Conditional formatting on SharePoint list column with Flow buttons - json

I'm trying to include a button to conditionally launch a flow on an item of a SharePoint List.
I have a list with multiple columns, such as Status, Approval and Created_By. I want the Approval column to show buttons that can launch a Power Automate Flow on the list item. And these buttons should be different in the following situations:
When the field in the Status column equals 'Draft' -> Show button to start Flow 1
When the field in the Status column equals 'Approved' -> Show button to start Flow 2
When the person who views the list is not the creator of the item -> Show no button
The method to include a button to launch a flow, using a formatted column, can be found here. However the example does not include conditional statements, see code below:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Flow"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "Send to Manager"
}
]
}
I found that it is possible to include if statements in the JSON code. The Status can be checked with the following code: "=if([$Status] == 'Approved','','')".
Whether the person who is viewing the list is the same as the person who created the item should be possible to check with something like this (although this specific piece of code does not work..): "=if(#me == [$Created_x0020_By.email],'','')"
I'm not really known with JSON so I don't know how to insert these conditions into the code above. So I'd like to ask your help!
Solved thanks to Michael Han_MSFT! My resulting code is:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "=if(#me == [$Author.email], if([$Status]=='Draft', '{\"id\": \"d4ebc660-16fd-4320-a69c-d91d51277666\"}', if([$Status]=='Approved', '{\"id\": \"94233841-9c32-4e90-9018-479e72c33385\"}', 'null')), 'null')"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(#me == [$Author.email],'Flow','')"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "=if(#me == [$Author.email], if([$Status]=='Draft','Start approval', if([$Status]=='Approved','Cancel', '')), '')"
}
]
}

1.The Statu can be checked in the "actionParams" with the following code, different id for different flows:
"actionParams": "=if([$Status]=='Approved','{\"id\": \"a04b0180-7d32-471c-8ff6-49497d229b23\"}','{\"id\": \"1f922b63-a66b-4177-9aa6-f4c37c4d6f27\"}')"
2.You need to use [$Author.email] instead of [$Created_x0020_By.email].
Below example code for your reference:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "=if([$Status]=='Approved','{\"id\": \"a04b0180-7d32-471c-8ff6-49497d229b23\"}','{\"id\": \"1f922b63-a66b-4177-9aa6-f4c37c4d6f27\"}')"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(#me == [$Author.email],'Flow','')"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "=if(#me == [$Author.email], if([$Status]=='Approved','Flow1','Flow2'), '')"
}
]
}
Test result:

Related

Power automate flow not getting triggered

I'm new to JSON and would like to seek some advise on following piece of code.
Scenario:
In the following list, would like to trigger a flow for the selected item to move the item to another list once the approver clicks "Approve". Have nested the executeFlow action under "Approve" button. I'm not able to figure out where i'm going wrong, so thought of seeking some advise. (Note: Flow ID is changed.)
List
Thank you for your help, in advance.
JSON Script:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "nowrap"
},
"children": [
{
"elmType": "div",
"style": {
"display": "=if([$Status] == 'In Progress', 'inherit','none')",
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\":\"0000f4409-0081-0016-b459-4f000000001dfd\"}",
"action": "setValue",
"actionInput": {
"Status": "Approved",
"ApprovalDecisionBy": "#me"
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"display": "flex",
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "SkypeCircleCheck"
},
"style": {
"padding": "4px"
}
},
{
"elmType": "span",
"txtContent": "Approve",
"style": {
"word-break": "keep-all"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"actionInput": {
"Status": "Not Approved",
"ApprovalDecisionBy": "#me"
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"display": "flex",
"flex-directon": "row",
"justify-content": "left",
"align-items": "center",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Blocked"
},
"style": {
"padding": "4px"
}
},
{
"elmType": "span",
"txtContent": "Reject",
"style": {
"word-break": "keep-all"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "='This item is ' + toLowerCase([$Status])",
"style": {
"display": "=if([$Status] == '' , 'none','inherit')",
"padding-left": "5px",
"word-break": "keep-all"
}
}
]
}
]
}
It looks like it is not allowed to use two actions in a customRowAction property of a button. When I try to add that in my json I am getting a Duplicate object key warning.
As a workaround I would suggest to simply update the Status and ApprovalDecisionBy fields from your Power Automate flow instead. You can use an update item action for that.

Formatting SharePoint columns to display button with JSON

I have a SharePoint library with a status field and a button field. The button field has formatted JSON code to execute a Flow but the button only displays if the Status field is set to a certain value. This works great. However, I would the button to display if the Status field is value 1 OR value 2. How do I do that in the code? Thanks!!
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"txtContent": "Archive Machine",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"88258048-da4b-101c-8b4a-e91ebd385d5e\"}"
},
"style": {
"background-color": "purple",
"color": "white",
"visibility": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"[$Status]",
"Status1"
]
},
"visible",
"hidden"
]
}
}
}```
Please follow the steps:
1.Create a Choice column named [Status]
2.Use the below JSON code to Formate [Status] column
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"txtContent": "Archive Machin",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\":\"88258048-da4b-101c-8b4a-e91ebd385d5e\"}"
},
"style": {
"background-color": "purple",
"color": "white",
"visibility": "=if(([$Status] == '1') || ([$Status] == '2'),'visible','hidden')"
}
}

Formatting a single field to display a button based on a choice fields value using JSON

I have a field that defines the document being approved. Field Name is "WorkflowRequired", which is a choice field.
I would like to display a button based on that choice.
I can do this singularly but when I attempt to incorporate multiple if statements, the logic fails.
This is what I have.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
If([#WorkflowRequired]=='DI Exit',
"elmType": "button",
"txtContent": "Launch DI Exit",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{"id": "86b2de78-e44c-4e6d-9707-08369f679a42"}"
},
"style": {
"background-color": "#0080ff",
"color": "white",
"border-radius": "0 15px",
"visibility": "=if(([$DIExitApprovalStatus] == 'Pending'),'visible','hidden')"
}
If([#WorkflowRequired]=='OA Exit',
"elmType": "button",
"txtContent": "Launch OA Exit",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{"id": "e7879e07-2fed-4cee-9a13-9aa4fc673b3c"}"
},
"style": {
"background-color": "#008082",
"color": "white",
"border-radius": "0 15px",
"visibility": "=if(([$OAExitApprovalStatus] == 'Pending'),'visible','hidden')")
}
If([#WorkflowRequired]=='CD_CV Exit',
"elmType": "button",
"txtContent": "Launch CD_CV Exit",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{"id": "52999e98-ea2b-46c7-ab21-d5e8e727fa94"}"
},
"style": {
"background-color": "#008082",
"color": "white",
"border-radius": "0 15px",
"visibility": "=if(([$_CD_CVExitApprovalStatus] == 'Pending'),'visible','hidden')"
}
}
In short, if you want to apply the if condition, you will need to place it after the properties. It is just like "elmType": "button", "txtContent":"=IF()"
You can see the examples here
A blog having a similar scenario with you.

How to make a customize column's button in SharePoint library visible only when File type is "Folder"

I have a customized button column (Test)
I would like to set condition for the button to be shown when the file type = folder only.
Below is my Json code but unfortunately it doesn't works.
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "button",
"customRowAction":
{
"action": "executeFlow",
"actionParams": "{\"id\": \"\"}"
},
"style": {
"border": "none",
"background-color": "transparent",
"color": "#0078d7",
"cursor": "pointer",
"display": "=if( ([$Type] == 'Folder' ), 'block', 'none')"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "FollowUser"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "click to start"
}
]
}
There is a content type column in SharePoint Library, you can judge the value of this column to determine whether to display this button.
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "button",
"customRowAction":
{
"action": "executeFlow",
"actionParams": "{\"id\": \"\"}"
},
"style": {
"border": "none",
"background-color": "transparent",
"color": "#0078d7",
"cursor": "pointer",
"display": "=if( ([$ContentType] == 'Folder' ), 'block', 'none')"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "FollowUser"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "click to start"
}
]
}
Test result:

SharePoint List/row Formatting

I am using SharePoint online and would like to use row formatting on a document library.
Ideally i like the tile view for the documents. However, it only shows the "name" of the file. I would like to use the Title instead of the Name and i prefer to keep the same tile view style.
Any ideas how to do this?
Thanks.
We can't use view formatting for the default Tiles style view, we need create following view formatting for List style view.
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": "true",
"hideColumnHeader": "true",
"rowFormatter": {
"elmType": "a",
"attributes": {
"href": "[$FileRef]",
"target": "'_blank'"
},
"style": {
"float": "left"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "180px",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "Test",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
}
Refer to: sp-dev-list-formatting>generic-tile-format