JSON formatting

30 Topics

Add Button to SharePoint Form JSON
I maintain a SharePoint list at work, and I would like to create some buttons on the Edit and Display item forms for common quick actions which involve updating data in several fields / columns. I've tried a few approaches: I have a Power Automate flow for each quick action, and I can currently use these flows from the right-click menu when I'm looking at the SharePoint list, but I can't use them when I have the item open and am looking at the Edit/Display form. I was able to make a custom column on a test list that could set other values in the item, but it also wasn't actionable from the Edit/Display Form. I have the Edit/Display Form configured using the options described here: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration. The idea is to add button elements to the header, with the customRowAction of "executeFlow" (or set Value-- tried this too but no luck). I created elements on the Edit Form that look like buttons, that show up where I want them to, the way I want them to, when I want them to. However, clicking them does nothing. Based on everything I've tried so far, I think the json & Flow setup is correct, but so far nothing has transferred to the list forms. I know Power Apps is an option for this, but I would prefer to avoid re-building the current JSON formatting for the list forms in a new place if I can, since the overhead there is much higher. Is there something specific I need to do differently to make buttons work on the list forms? Alternately, is there a way to pull the existing JSON-formatted list forms into PowerApps to start with as a base? Below is what I have in the header JSON to define one of the buttons (edited out work-specific info for obvious reasons). The button is conditionally visible to me & another user who was helping me troubleshoot, depending upon the status of the item, and the flow ID is just taken from the flow URL. The visibility works fine, but clicking the button doesn't do anything. { "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json", "elmType": "button", "customRowAction": { "action": "executeFlow", "actionParams": "{\"id\": \"<the flow ID>\"}" }, "style": { "border-width": "1px", "border-radius": "20px", "width": "225px", "margin": "2px", "box-shadow": "1px 1px SlateBlue", "border-style": "solid", "border-color": "SkyBlue", "background-color": "LightSkyBlue", "color": "MidnightBlue", "text-align": "center", "font-size": "16px", "cursor": "pointer", "visibility": { "operator": "?", "operands": [ { "operator": "&&", "operands": [ { "operator": "==", "operands": [ "[$Technical_x0020_Reviewer_x0020_D]", "" ] }, { "operator": "!=", "operands": [ "[$Status]", "Rejected" ] }, { "operator": "!=", "operands": [ "[$Status]", "Approved" ] }, { "operator": "!=", "operands": [ "[$Status]", "Approved, Won't Be Updated" ] }, { "operator": "!=", "operands": [ "[$Status]", "Abandoned" ] }, { "operator": "||", "operands": [ { "operator": "==", "operands": [ "@me", "<my email>" ] }, { "operator": "==", "operands": [ "@me", "<other work user>" ] } ] } ] }, "visible", "hidden" ] } }, "children": [ { "elmType": "span", "attributes": { "iconName": "SkypeCircleCheck" }, "style": { "padding-right": "6px", "color": "AliceBlue", "text-align": "left" } }, { "elmType": "span", "txtContent": "Mark Technical Approval", "style": { "padding-right": "6px" } } ] } I've also tried making it into a "set value" button instead, but no luck with that either.
Solved
Annika_Morrell
Sep 02, 2022 Place SharePoint
18KViews
0likes
5Comments
Use lookup value in column formatting.
Hi community I have format of the column Accept docs like below: { "$schema": "https: //developer.microsoft.com/en-us/json-schemas/sp/column-formatting.schema.json", "elmType": "span", "children": [ { "elmType": "span", "txtContent": "=if(@currentField == true, 'Yes', if(@currentField == false, 'No', ''))" }, { "elmType": "button", "txtContent": "Accept", "customRowAction": { "action": "executeFlow", "actionParams": "{\"id\": \"\"}" }, "style": { "border": "none", "background-color": "#2ca1e8", "color": "white", "visibility": "=if([$Country.lookupValue] == 'India', 'hidden', 'visible')", "padding": "0 15%", "display": "flex", "margin-left": "10%", "cursor": "pointer" } } ] Country is a column with Lookup type. I want to set visibility value depends on Country lookup value. I tried this simple if condition,. but it is not work for me. Any suggestions?
Solved
avytrykh
Jul 15, 2021 Place SharePoint
16KViews
0likes
2Comments
Trying to Change the Gallery View with JSON to open custom URL instead of edit item menu
I have a simple list as follows: I'm trying to update the Gallery view so that when you click on the tile it opens the URL in "Form Link" instead of opening the standard "edit item" menu. I think I have to change the elmType to "a" instead of "button" but I've tried all combinations of href and target but I can't get it to work quite right. I'm fairly new to JSON does anyone have any suggestions? Here's my code: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 295, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "button", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-imageContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground" }, "children": [ { "elmType": "img", "style": { "display": "=if([$Thumbnail] == '', 'none', '')" }, "attributes": { "src": "=[$Thumbnail.serverUrl] + [$Thumbnail.serverRelativeUrl]", "title": "[$Thumbnail.fileName]", "class": "sp-card-imagePreview" } }, { "elmType": "svg", "style": { "display": "=if([$Thumbnail] == '', '', 'none')" }, "attributes": { "preserveAspectRatio": "none", "viewBox": "0 0 210 105", "class": "sp-card-defaultImage ms-bgColor-themeLighter" }, "children": [ { "elmType": "path", "attributes": { "id": "sp-card-defaultImage-path1", "d": "M0 25.7896L126.5 53.8817L96 105H0V25.7896Z" } }, { "elmType": "path", "attributes": { "id": "sp-card-defaultImage-path2", "d": "M96 105L158.7 0H204C207.314 0 210 2.68629 210 6V105H96Z" } } ] }, { "elmType": "svg", "style": { "display": "=if([$Thumbnail] == '', '', 'none')" }, "attributes": { "class": "sp-card-defaultImageOverlay", "viewBox": "0 0 40 40" }, "children": [ { "elmType": "path", "attributes": { "id": "sp-card-defaultImageOverlay-path1", "d": "M 4 4 H 37 V 37 H 4 L 4 4" } }, { "elmType": "path", "attributes": { "id": "sp-card-defaultImageOverlay-path2", "d": "M24.17 21.151L21.66 24.741L17.54 19.191C17.3322 18.914 17.0062 18.751 16.66 18.751C16.3137 18.751 15.9877 18.914 15.78 19.191L9.20997 28.051C8.97126 28.3786 8.93818 28.813 9.12453 29.173C9.31088 29.533 9.68465 29.7567 10.09 29.751H29.91C30.3085 29.7562 30.6769 29.5396 30.866 29.1887C31.0551 28.8378 31.0335 28.411 30.81 28.081L26 21.151C25.7991 20.8407 25.4546 20.6533 25.085 20.6533C24.7153 20.6533 24.3709 20.8407 24.17 21.151Z" } }, { "elmType": "path", "attributes": { "id": "sp-card-defaultImageOverlay-path3", "d": "M28 15.751C29.3807 15.751 30.5 14.6317 30.5 13.251C30.5 11.8703 29.3807 10.751 28 10.751C26.6193 10.751 25.5 11.8703 25.5 13.251C25.5 14.6317 26.6193 15.751 28 15.751Z" } }, { "elmType": "path", "attributes": { "id": "sp-card-defaultImageOverlay-path4", "d": "M4.5 37.251H35.5C36.3284 37.251 37 36.5794 37 35.751V4.75098C37 3.92255 36.3284 3.25098 35.5 3.25098H4.5C3.67157 3.25098 3 3.92255 3 4.75098V35.751C3 36.5794 3.67157 37.251 4.5 37.251ZM4 4.75098C4 4.47483 4.22386 4.25098 4.5 4.25098H35.5C35.7761 4.25098 36 4.47483 36 4.75098V35.751C36 36.0271 35.7761 36.251 35.5 36.251H4.5C4.22386 36.251 4 36.0271 4 35.751V4.75098Z" } } ] } ] } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "style": { "text-align": "center", "font-size": "18px" }, "attributes": { "title": "[$Title]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent" }, "txtContent": "=if ([$Title] == '', '–', [$Title])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "style": { "text-align": "center", "vertical-align": "top", "word-break": "normal" }, "attributes": { "title": "[$Description]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Description] == '', '–', [$Description])" } ] } ] } ] } }
Solved
Grayson1530
Feb 04, 2021 Place SharePoint
15KViews
1like
12Comments
SharePoint JSON Formatting using split and the resulting array
Hello, at https://learn.microsoft.com/de-de/sharepoint/dev/declarative-customization/formatting-syntax-reference I did find this for the split operator: split: divides the given string into an ordered list of substrings by searching for the given pattern, and returns an array of these substrings "txtContent": "=split('Hello World', ' ')" returns an array with 2 strings - 'Hello' and 'World' This returns: Hello, World Now with that given - I use this: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "=split([$Supervisor.email], '@')" } This returns: first.name,domain.com It does what it should. However my question is how can I address the array? So for example that only the index 0 of the array will be returned? Means only: first.name Or index 1 of the array, which would return only: domain.com At the end I need all elements of the array to build a new string I need. I want to create a delve link of the user profile to be opened at a new browser tab. I have all working except the string rebuild of the email. Side note: I have used the replace operator to solve my problem (not mentioned and shown here!) But, I want to learn more and like to know, how to use the split operator and access each operand of the array individually. Somebody knowing it and can explain? Many thanks for teaching me in advance. Cheers JK
Solved
_J-K_
May 26, 2023 Place SharePoint
14KViews
0likes
2Comments
Conditional Formatting SharePoint List
Hello team, I need your support with conditional JSON formatting of SharePoint list. I would like to format column INVEST_DUE_DATE based on current date (date cell) and based on value in column Phase (string). Right now, I implemented just formatting based on date, using following code: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "style": { "background-color": "=if(@currentField < @now , '#f7adad', if(@currentField <= @now + 864000000, '#f2d596', if(@currentField >= @now + 864000000 , '#a0dec0', '')))" } } I want to apply additional condition for it - use color formatting only if value of cell Phase = Investigation. So , it should be something like this (@currentField < @now) and @[$Phase]='Investigation' , '#f7adad', and etc.... But it does not works.... Could you please advise me how to modify initial JSON code? Thank you in advance!
AnatolyD
Oct 13, 2020 Place SharePoint
12KViews
0likes
5Comments
Preview URL on hover in Sharepoint list
I have a column in a Sharepoint list which contains a UPS tracking link e.g. http://wwwapps.ups.com/WebTracking/track?track=yes&trackNums=1Z1527A06890731426 I would like give users the ability to hover over the link and view the package's progress. Is this possible, perhaps by using JSON formatting? Many thanks, Bevis
hungatebevis
Apr 19, 2020 Place SharePoint
7.4KViews
0likes
6Comments
JSON View Formatting - Count total number of items in SP list
Hi, I want to modify the groups footer of a custom view that is grouped by a metadata column named Response/Actionv2. In the Totals section of the view settings I enabled Count for this column, which now displays the number of items (rows) for each of the groups. However, I would like to use this number in the JSON formatting to calculate and display the proportion (in percentage %) of total number of decisions. As you can see in the code below, I've included the static number 31, but I'd like to be able to dynamically reference the total number of items in the list? Basically, do you have an idea on how to implement this formula: (@columnAggregate.value / TOTAL NUMBER OF ITEMS) * 100 { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "hideFooter": false, "footerFormatter": { "elmType": "div", "children": [ { "elmType": "div", "attributes": { "iconName": "CalculatorPercentage" }, "style": { "color": "=if(@columnAggregate.type == 'Count' && @columnAggregate.value < 50, '#d13438', '#107c10')", "font-weight": "600", "margin-top": "10px" } }, { "elmType": "div", "style": { "color": "=if(@columnAggregate.type == 'Count' && @columnAggregate.value < 50, '#d13438', '#107c10')", "font-weight": "600", "margin-top": "10px", "font-family": "Segoe UI" }, "txtContent": { "operator": "*", "operands": [ 100, { "operator": "/", "operands": [ "@columnAggregate.value", 31 ] } ] } } ] } } }
mathieualexhache
Jul 26, 2022 Place SharePoint
7.4KViews
0likes
1Comment
JSON column formatting with Flow
Hi all I'm trying to automate the build of a SharePoint list that is formatted with JSON so that I can easily reuse it on new projects. I've built a Flow that uses http requests to create the list, is it possible to also send the JSON formatting info through an http request from Flow? If so, how could I do this? Thanks in advance
Solved
Alessandro_Ansa
Jun 26, 2020 Place SharePoint
7.2KViews
1like
3Comments
JSON Column Formatting help with Condition statement for displaying Hyperlink alternate txt
I have a SharePoint list, which I have a single line of text column that will contain an URL link. To start with this column is blank and does not show on the new for item form. It gets populated by power automate when the flow creates a file in a whiteboard document library and and the next step in the flow after creating the document in the "Whiteboard" document library is to update the URL single line of text column with the link to the file it created in the previous step if the flow. I would like to display this column as a clickable link using JSON column formatting and I have found the following code to display the URL as a link and the alternate text as "whiteboard" and it works. However, if the field is blank I would like to leave the field displayed as blank, instead of "Whiteboard". Right now while it works, it displays "Whiteboard" for every item, even if the field is blank before the flow triggers and has a chance to populate it. I would like to modify the code I am using to make the field show nothing in the column if the column is left blank and then once the flow populates the column, the have it show the alternate text as "whiteboard". Can anybody suggest how to modify this so it will still display "Whiteboard" if the the column is not blank, but if the column is blank, then to display the column as blank? OR Can somebody suggest how to modify the code with an IF statement where it shows the txtContent as "whiteboard" only if the column is not null otherwise shows the txtContent as "Creating" Here is the code I am using: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "attributes": { "href": "@currentField", "target": "_blank" }, "txtContent": "Whiteboard" }
Solved
Oberke2380
Jul 14, 2022 Place SharePoint
6.7KViews
0likes
3Comments
JSON column formatting - get user's phone number from people column
In a SharePoint list (M365), I have a people column. Even though the contact information is already included in the people column, users still want it displayed as separate columns. I used JSON formatting to grab the email address using [$ContactPerson.email] but I cannot figure out how to grab the phone number. I tried [$ContactPerson.businessphones], .telephonenumber, .phones but didn't work. As a work around, I just used Power Apps and default value: Substitute(Substitute(Substitute(First(Office365Users.UserProfileV2(DataCardValue2.Selected.Email).businessPhones).Value, "(", ""), ")", ""), " ", "-") Here's the code, I'd like to change the @currentField in line 22 to grab the phone# from [$ContactPerson]. { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "span", "style": { "display": "block", "color": "#333333", "text-align": "left", "font-size": "16px", "font-weight": "bold", "padding-top": "10px", "padding": "0 4px" }, "attributes": { "iconName": "Phone" } }, { "elmType": "a", "txtContent": "@currentField", "attributes": { "target": "_blank", "href": "='https://teams.microsoft.com/l/call/0/0?users=' + [$ContactPerson.email]" } } ] }
Solved
Tamras1972
Sep 12, 2023 Place SharePoint
6.5KViews
0likes
1Comment