@WonderLaura

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):

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. 1. Go to your list or library, click on the name of the column, and click Column settings, then choose Format this 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\”}”
}
}
]
}

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\”}”
}

}

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”
}}

 

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”.

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.