SOLVED

Add Button to SharePoint Form JSON

New Contributor

I maintain a SharePoint list at work, and I would like to create some buttons on the Edit and Display item forms for common quick actions which involve updating data in several fields / columns. 

 

I've tried a few approaches:

  • I have a Power Automate flow for each quick action, and I can currently use these flows from the right-click menu when I'm looking at the SharePoint list, but I can't use them when I have the item open and am looking at the Edit/Display form.
  • I was able to make a custom column on a test list that could set other values in the item, but it also wasn't actionable from the Edit/Display Form.
  • I have the Edit/Display Form configured using the options described here: Configure the list form | Microsoft Docs. The idea is to add button elements to the header, with the customRowAction of "executeFlow" (or set Value-- tried this too but no luck). I created elements on the Edit Form that look like buttons, that show up where I want them to, the way I want them to, when I want them to. However, clicking them does nothing.

Based on everything I've tried so far, I think the json & Flow setup is correct, but so far nothing has transferred to the list forms. I know Power Apps is an option for this, but I would prefer to avoid re-building the current JSON formatting for the list forms in a new place if I can, since the overhead there is much higher. 

Is there something specific I need to do differently to make buttons work on the list forms? Alternately, is there a way to pull the existing JSON-formatted list forms into PowerApps to start with as a base?

 

 

Below is what I have in the header JSON to define one of the buttons (edited out work-specific info for obvious reasons). The button is conditionally visible to me & another user who was helping me troubleshoot, depending upon the status of the item, and the flow ID is just taken from the flow URL. The visibility works fine, but clicking the button doesn't do anything. 

{
     "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
     "elmType": "button",
     "customRowAction": {
          "action": "executeFlow",
          "actionParams": "{\"id\": \"<the flow ID>\"}"
     },
     "style": {
          "border-width": "1px",
          "border-radius": "20px",
          "width": "225px",
          "margin": "2px",
          "box-shadow": "1px 1px SlateBlue",
          "border-style": "solid",
          
          "border-color": "SkyBlue",
          "background-color": "LightSkyBlue",
          "color": "MidnightBlue",
          
          "text-align": "center",
          "font-size": "16px",
          
          "cursor": "pointer",
          "visibility": {
               "operator": "?",
               "operands": [
                    {
                         "operator": "&&",
                         "operands": [
                              {
                                   "operator": "==",
                                   "operands": [
                                        "[$Technical_x0020_Reviewer_x0020_D]",
                                        ""
                                   ]
                              },
                              {
                                   "operator": "!=",
                                   "operands": [
                                        "[$Status]",
                                        "Rejected"
                                   ]
                              },
                              {
                                   "operator": "!=",
                                   "operands": [
                                        "[$Status]",
                                        "Approved"
                                   ]
                              },
                              {
                                   "operator": "!=",
                                   "operands": [
                                        "[$Status]",
                                        "Approved, Won't Be Updated"
                                   ]
                              },
                              {
                                   "operator": "!=",
                                   "operands": [
                                        "[$Status]",
                                        "Abandoned"
                                   ]
                              },
                              {
                                   "operator": "||",
                                   "operands": [
                                        {
                                             "operator": "==",
                                             "operands": [
                                                  "@me",
                                                  "<my email>"
                                             ]
                                        },
                                        {
                                             "operator": "==",
                                             "operands": [
                                                  "@me",
                                                  "<other work user>"
                                             ]
                                        }
                                   ]
                              }
                         ]
                    },
                    "visible",
                    "hidden"
               ]
          }
     },
     "children": [
          {
               "elmType": "span",
               "attributes": {
                    "iconName": "SkypeCircleCheck"
               },
               "style": {
                    "padding-right": "6px",
                    "color": "AliceBlue",
                    "text-align": "left"
               }
          },
          {
               "elmType": "span",
               "txtContent": "Mark Technical Approval",
               "style": {
                    "padding-right": "6px"
               }
          }
     ]
}

I've also tried making it into a "set value" button instead, but no luck with that either.

 

5 Replies
Just checking but I assume you've changed <the flow ID>\ in row 6 to your flow's ID?

@RobElliott Yeah, that was one of the things I redacted out of an overabundance of caution re: work-related stuff on the internet. 

It ends up looking like: "actionParams":  "{\"id\": \"XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\"}" (where X can be any character matching [0-9A-z])

 

I just got it from this part of the URL:

make.powerautomate.com/environments/Default-<some other id>/flows/shared/XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/details

best response confirmed by Annika_Morrell (New Contributor)
Solution

@Annika_Morrell I don't think customRowAction (executeFlow or setValue) are supported in list form JSON formatting.

Seems like your only option is to customize list forms using Power apps where you can add buttons & execute flows from power apps.

 

Also, you cannot get the JSON formatting in power apps as it is while customizing list form using power apps.

 

Similar thread:  Form configuration - add buttons in footer  


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap Thanks for the response! Before I close the thread-- do you know if there's any workaround on moving JSON formatting of a list to PowerApps? I understand if it's not as simple as copy/paste, but it seems strange for there not to be any portability between the two.

@Annika_Morrell SharePoint JSON formatting and Power apps are two different technologies and those works differently. 

 

So, you cannot move SharePoint JSON formatting to Power apps. You have to use the power apps controls (buttons, labels, etc.) and their properties (color, fill, hovercolor, hoverfill, etc.) to color code in power apps.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.