Add a button in to a SharePoint List/Library to trigger a Flow (part 02-customization)

Part 02 (This article)

In my previous article, we saw how we can add a button in to SharePoint online list or library to trigger a flow in place. We are continuing with this article on how we can customize the newly added button to change its appearance (Well, let’s make it look like a button).

Changing the appearance:

Go to the format mode from the target button column. And we can use the following parameters to change the look and feel. My button here looks good as it stands out from the rest of the content in this space.

• txtContent: “Define your button text”
• color: “set a button text color code”
• border: “set a border to the button”
• background-color: “set a button background color”

Applying a condition to the button:

Further more, you can customize the button to apply when a condition is true (e.g. – show a button only when the Flow have not started).

In this case, I’m going to tweak my approval Flow a little bit to maintain the status of the library items. The purpose here is to update the status of a item which is initiate for approval but still “Pending” as we using a custom status column here.

By modifying the Approval Flow, I am adding a new step (SharePoint Update item action) to my existing flow. This new step has to be placed before the starting the start. At this stage, I have to set the status as “Pending” (static string).

Then the same action added to both ending paths in order to update the status column up on “Rejection” or “Approval”. At this stage I can simply use the “Response” variable to pick up the current status value and update the “Status” column.

Once added, it’s position looks like below.

Define the Site URL, Choose the target library, pick the ID attribute and Response variable as shown below. Repeat the same for “No” path as well and that’s all we need to do here.

That’s it from the Flow and we can head back to the Library to do the appearance tweaking. Go the column format mode and notice the changes I have done here. Apart from the color and background changes which I did to the button earlier, I have added a condition to display the button only when its true. Under this logic, the button would only appear when the status column = empty (“”), meaning the Flow have not started for a respective item in this library.

And, as expected ! the logic is right therefore the condition perfectly applies. I have few documents in this library with mixed statuses (Rejected, Approved, Pending and of course some are not started yet). The button only showed for the items which are not gone through the Flow.

Microsoft reference for JSON based column formatting is here. This article has covered many perspectives of column formatting.

And ! here’s the full JSON code of this customization which you can reuse if you have a similar use case.

If you want to start from the beginning, go ahead and read my previous article.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "span",
  "style": {
    "color": "#0078d7"
  },
  "children": [
    {
      "elmType": "button",
      "style": {
        "border": "light",
        "background-color": "yellow",
        "color": "#0078d7",
        "cursor": "pointer",
        "visibility": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Status]",
                ""
              ]
            },
            "visible",
            "hidden"
          ]
        }
      },
      "txtContent": "Send to Approval",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"e290feff-0013-41f2-97dd-91a37fb84ea0\"}"
      }
    }
  ]
}

Advertisement