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.
Related
I am having a problem setting the conditional formatting of a SharePoint Form "Header" based on the value of a column. For example, i am wanting the header banner to be "ms-bgColor-greenDark" when the column value for "Risk Status" is set as "Active", "ms-bgColor-yellowDark" when the column value for "Risk Status" is set as "Postponed".... and so on.
My code so far is as follows:
{
"elmType": "div",
"attributes": {
"class": "=if([$Risk_x0020_Status] == 'Active', 'ms-bgColor-greenDark', if([$Risk_x0020_Status] == 'Postponed', 'ms-bgColor-yellowDark', if([$Risk_x0020_Status] == 'Closed', 'ms-bgColor-redDark', 'ms-bgColor-neutralLight')))"
},
"style": {
"width": "99%",
"border-top-width": "0px",
"border-bottom-width": "1px",
"border-left-width": "0px",
"border-right-width": "0px",
"border-style": "solid",
"margin-bottom": "16px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "AlertSettings",
"class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-black",
"title": "Risk"
},
"style": {
"flex": "none",
"padding": "0px",
"padding-left": "10px",
"height": "36px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-black ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Risk: ' + [$Title]"
}
]
}
]
}
So far the header simply displays as ms-bgColor-neutralLight regardless of the value in the Risk Status column. AS im very new to JSON, im hoping this is a matter of understanding the syntax.
Any pointers would be most welcome.
I am using sharepoint online as an image library. I am using 'keywords' to tag each image. The field is a string of delimited values like this:
keyword1;keyword2;keyword3
I would like to format this field value by splitting the string using the semi-colon delimiter and showing each keyword in its own span, so its looks like this:
(keyword 1) (keyword 2) (keyword 3)
I'm not sure if I need to use a calculated column to do this or if it is even possible? I've tried using 'forEach' but i cannot seem to loop through the items - they just render as a single value in a single span?
This is what i'm using at the moment:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"tileProps": {
"height": "300",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"align-items": "stretch",
"box-shadow": "0 1.6px 3.6px 0 #00000022, 0 0.3px 0.9px 0 #0000001c",
"min-width": "150px",
"width": "100%",
"margin-bottom": "0",
"border-radius": "3px",
"margin": "0 2px",
"background-color": "#fbfbfb",
"height": "350px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"position": "relative",
"padding-bottom": "30px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"background-color": "#e4e4e4",
"overflow": "hidden",
"height": "200px",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"position": "relative"
},
"children": [
{
"elmType": "div",
"style": {
"oveflow": "=if([$File_x0020_Type] == '', 'auto', 'hidden')"
},
"children": [
{
"elmType": "img",
"style": {
"width": "=if([$File_x0020_Type] == '', '100%', '0'",
"height": "=if([$File_x0020_Type] == '', '100px', '0'"
},
"attributes": {
"src": "=if([$File_x0020_Type] == '', 'https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-react-assets/foldericons-fluent/folder-large_frontplate_nopreview.svg', '')"
}
},
{
"elmType": "img",
"style": {
"width": "100%",
"height": "100%",
"display": "=if([$File_x0020_Type] == '', 'none', '')"
},
"attributes": {
"src": "#thumbnail.300x300"
},
"defaultHoverField": "[$FileLeafRef]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin": "15px 0",
"position": "absolute",
"top": "200px",
"width": "100%"
},
"attributes": {
"class": "ms-fontSize-14 ms-fontWeight-semibold"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"padding": "0 16px",
"line-height": "20px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"flex": "1 0 100%"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#a7a7a7",
"font-weight": "bold"
},
"txtContent": "Keywords"
},
{
"elmType": "div",
"children": [
{
"forEach": "kwIterator in #currentField",
"elmType": "div",
"txtContent": "[$kwIterator]",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white",
"title": "='keyword:' + =[$kwIterator]"
},
"style": {
"width": "16px",
"height": "16px",
"text-align": "center",
"margin": "1px"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "inline-block",
"flex": "1 0 34%"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#a7a7a7"
},
"txtContent": "=if([$AverageRating] >= 5, '*****', if([$AverageRating] >= 4, '****', if([$AverageRating] >= 3, '***', if([$AverageRating] >= 2, '**', if([$AverageRating] >= 1, '*', 'no rating'))))"
},
{
"elmType": "div",
"style": {
"color": "#a7a7a7",
"font-size": "40px"
},
"txtContent": "=if([$AverageRating] >= 5, '*****', if([$AverageRating] >= 4, '****', if([$AverageRating] >= 3, '***', if([$AverageRating] >= 2, '**', if([$AverageRating] >= 1, '*', '-'))))"
}
]
}
]
}
]
}
]
}
}
}
Any pointers to iterate through a delimited list of values would be appreciated.
According to my research, forEach does not support multiple lines of text type.
From this article:
The field used in the loop must be in a supported field type with multi-value option enabled: Person, Lookup, and Choice.
Since all the text in the multi-line text is recognized as a whole, we couldn't split it via ";" and add the link break between them with Json.
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:
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:
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