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):
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.
- Go to https://flow.microsoft.com
- In your list or library, click the Flow drop-down in the toolbar, and choose Create a Flow.
- Choose the Flow called “Request manager approval for a selected item”.
- On the next screen, click Continue.
- Now, in the flow design screen, click Save at the top right.
- 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.
- 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
-
- Go to your list or library, click on the name of the column, and click Column settings, then choose Format this column.
- Your pane will show on the right side of the screen, to paste this code in.
- Go to your list or library, click on the name of the column, and click Column settings, then choose Format this column.
{
“$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\”}”
}
}
]
}
- 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.
Hi Laura,
Nicely done, but I have a couple of questions.
1. Does the flow need to have already been shared with the SharePoint list that the flow is acting on?
2. If yes, what minimum license level for Flow is needed to enable that?
LikeLike
1. No
2. This isn’t a particular Flow license level, I only have Office 365 E1.
LikeLike
Hi Laura,
Thanks for this blog, but as always it asks more questions 😉
I would like to show a button when a document is published. This starts a Flow so that it makes a copy of the document and copies it to the correct language intranet. This flow works well.
But I do not get the condition right in JSON.
How do I get this done when Version ends with .0?
Is this a solution or do I have to think about another way?
Can you help me with this?
thanks in advance
LikeLike
Hi can we update a column in sharepoint list on click of a button which we create using column formating
LikeLike
how to run a custom code using JSON button in SharePoint
LikeLike
None of these work when I paste them into my column formatting dialog. It says, “Please enter valid column-formatting JSON.”
LikeLike
If you copied and pasted then the quotes are most likely the wrong characters. Change all the double quotes to double quotes, i.e. ” not “ or
LikeLike
I need to start a Flow from a single button on a SharePoint page. The Flow has a “Manual” trigger. Can you please tell me how I can add it to the “onclick” attribute: <input type="Button" style="background-color:#a7cb00; width:250px;font-size:13pt" onclick="window.location=
LikeLike
In my last comment it looks like the blog software changed my quotes too. In any case, just use a normal double quotes. You have to replace them all.
LikeLike
Hi Laura, the URL for my Flow isn’t quite the same as yours, and I’m trying to parse out the GUID, and could use a little help: https://us.flow.microsoft.com/manage/environments/Default-60b81999-0b7f-412d-92a3-e17d8ae9e3e0/flows/bf454aa9-d6fe-4614-b790-6e2beb08c1f6?backUrl=%2Fflows%2Fbf454aa9-d6fe-4614-b790-6e2beb08c1f6%2Fdetails
LikeLike
Hi Laura,
Good Day.
I just want to ask a question about your post.
Is the flow you created can be run by other user who had access to list? or is it only applicable to the owner of the flow itself?
Thank you in advance.
TinnyWinnie
LikeLike
It can be run by end users who have access to the list.
LikeLike
Hi Laura,
Thank you for the quick reply. 🙂
This is great. I’ll try it on our side.
LikeLike
Hi Laura, I have been able to follow along the instructions with the addition of a button working well. What is not working for me though is the button only showing based on column status – I am not receiving any errors in the json code box its just the button doesn’t appear at all now after extending the code. Is there anything else I need to be aware of when using this? Thinking maybe the format of the column of the status or anything? I feel so close but yet so far to completing this work!!!
LikeLike
Hi Laura, will the option to show button after approval status has been met work on any other field in the SharePoint list or does it have to be the approval field? Sorry for the repeat query, just trying to get it to work!! 🙂
LikeLike
There’s a reference in the JSON to “current field” versus @fieldname. So if you want the logic to use the current field, use that, but if you’re referencing a different field, you have to use the ampersand. I don’t remember the exact syntax off the top of my head, but it’s definitely different.
LikeLike
How do you pass parameters? What is format?
LikeLike
Okay, I’m at a loss. I wrote the following code based on your example and it doesn’t seem to matter what I put in the ButtonVisible field, the button is always visible. I checked to make sure that it has the correct system column name. It does. I thought maybe Visible is a reserved word, so I replaced it with Yay/Nay. That didn’t work. I have no idea why it won’t execute correctly.
{
“elmType”: “button”,
“txtContent”: “Mark Complete”,
“customRowAction”: {
“action”: “executeFlow”,
“actionParams”: “{\”id\”:\”b9437ba0-a6a9-4a72-be9e-277f4604bbc1\”}”
},
“visibility”: {
“operator”: “?”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$ButtonVisible]”,
“Visible”
]
},
“visible”,
“hidden”
]
}
}
LikeLike
Update: I figured out that if I add in the code that you added to change the text and background color, it works fine. I was a little worried about that, because I didn’t want a purple button. However, I figured out I can change it to light grey and it looks fine.
LikeLike
Hi,
I have the buttons working in a list, pretty cool.
And when the list is viewed on a modern page in a list view web part, the buttons do show.
But they are not clickable.
Any thoughts?
LikeLike