Button in SharePoint List to Trigger Microsoft Flow

In SharePoint modern lists, conditional formatting can be done, and there is a great detailed reference by Microsoft.  I was trying to find a way to create a nice pretty button right there on a SharePoint list, to quickly click to run a workflow.  With that in place, end users won’t have to wonder which menu and where to click in order to get that item approved (or run any workflow at all).

Microsoft’s reference on how to do this is here.

 

After reading this and trying it myself, I made a couple of tweaks to it, that you may like.  In this post, I’ll explain how it works, and what I did.  Here are a couple of examples, one with a list (Customers), and one with a library (Policies):

sharepoint-conditional-formatting-policies

There are two ways I’ll demonstrate, one way is with a hyperlink, and the other with a button.  The Policy Owner column above is a hyperlink, and the Button column is a button.

First of all, you’ll need to decide which Flow you want to run, and get the GUID of it.  Here’s how to create a flow if you don’t already have one, using a specific template for manager approval.  The important thing is that its trigger is based on the selected item, NOT based on when an item is created or modified.

  1. Go to https://flow.microsoft.com
  2. In your list or library, click the Flow drop-down in the toolbar, and choose Create a Flow.
  3. Choose the Flow called “Request manager approval for a selected item”.
  4. On the next screen, click Continue.
  5. Now, in the flow design screen, click Save at the top right.
  6. Go back to your list of Flows, and then open this Flow.  For any flow in your list, here’s how to get the GUID, it’s in the URL.
  7. My URL looks like this https://us.flow.microsoft.com/manage/environments/Default-9d3ccee1-5cf8-4e08-887c-53b2a210967b/flows/de138f88-1e85-5d0f-a3ad-fa9b0c9e5ac5/details.  I just need that part in red.  Copy just that part to your clipboard.  de138f88-1e85-5d0f-a3ad-fa9b0c9e5ac5

Next, I’ll show you how to create the column as a hyperlink.  It doesn’t matter what kind of column it is, or even if it has a value in it or not.

My policy owner’s name is in a people column called Policy_x0020_Owner

    1. Go to your list or library, click on the name of the column, and click Column settings, then choose Format this column.
      sharepoint-format-polcy-owner-column
    2. Your pane will show on the right side of the screen, to paste this code in.

{
“$schema”: “https://developer.microsoft.com/en-us/json-schemas/sp/column-formatting.schema.json”,
“elmType”: “span”,
“style”: {
“color”: “#0078d7”
},
“children”: [
{
“elmType”: “span”,
“attributes”: {
“iconName”: “Flow
}
},
{
“elmType”: “button”,
“style”: {
“border”: “none”,
“background-color”: “transparent”,
“color”: “#0078d7”,
“cursor”: “pointer”
},
“txtContent”: {
“operator”: “+”,
“operands”: [
“[$Policy_x0020_Owner.title]”,
Approval
]
},
“customRowAction”: {
“action”: “executeFlow”,
“actionParams”: “{\”id\”: \”86dfdf10-8d99-4914-8e98-fe4b21ed7e34\”}”
}
}
]
}

garth-fort-approval

  1. I’ve color coded the parts that I changed, to explain what each one is.
    Red – My Flow GUID that I obtained in that first set of steps above
    Purple – the name of my column.  The only reason I had to put the .title in it, is because it’s a person column.  All column types don’t need this extra part.  Reference.
    Blue – the word that I’m showing after the person’s name
    Green – the name of the icon that I’m showing in front of the person’s name.  This one is called Flow, but there are bunch of others here.

Next, I’ll show you how to create the column as a button, shown above in my Button column, which is just a text column with nothing in it.  Do step one from above first, then in the column formatting box, use this code:

{

{
“elmType”: “button”,
“txtContent”: “Get Approved“,
“customRowAction”: {
“action”: “executeFlow”,
“actionParams”: “{\”id\”: \”f191e7c8-1a36-4553-9d64-607764fc6f83\”}”
}

}

get-approved-button

This one is much simpler.  I didn’t make the text dynamic at all, it just says Get Approved for all of them.  Clicking the button launches my Flow.

Red – my Flow GUID.

Blue – the words on the button

What if I want the button to be a different color?  Then, the code would look like this instead, with a purple button with white text:

{
“elmType”: “button”,
“txtContent”: “Get Approved”,
“customRowAction”: {
“action”: “executeFlow”,
“actionParams”: “{\”id\”: \”86dfdf10-8d99-4914-8e98-fe4b21ed7e34\”}”
},
“style”: {
“background-color”: “purple“,
“color”: “white”

}}

purple-approval-button

 

What if you only want the button to show under a certain condition.  In this example, I only want this button to be visible if the content approval status is “Pending”.  Here’s the code for that:

{
“elmType”: “button”,
“txtContent”: “Get Approved”,
“customRowAction”: {
“action”: “executeFlow”,
“actionParams”: “{\”id\”: \”86dfdf10-8d99-4914-8e98-fe4b21ed7e34\”}”
},
“style”: {
“background-color”: “purple”,
“color”: “white”,
“visibility”: {
“operator”: “?”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$_ModerationStatus]”,
Pending
]
},
“visible”,
“hidden”
]
}
}
}

In the above code, here are the important parts:

Red – my column’s system name is _ModerationStatus

Blue – the value of the status is pending

In the syntax, a question mark (?) operator is used to create a condition, like an IF statement.  So, in the “visibility” section of the code above, we’re saying IF the ModerationStatus equals (==) Pending, then “visible”, otherwise (if it’s not pending), then “hidden”.

policies-approved-flow

Here’s my SharePoint Power Hour video where I demonstrated how to do all of this, along with how to do the workflow that works with the content approval status in the list/library.

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.