Forum Discussion
Column formatting not showing when view shown in a List Web Part (Modern Page and List)
Mike Insch Hi!
I am currently working on a SharePoint Online (Modern Page and List), with Column Formatting and View Formatting in some customized lists.
I am embedding my lists through a WebPart for Viewing List in several Pages. I can see that Column Formatting is consistent between the List and the one displayed in the WebPart.
However, View Formatting is not consistent, and it depends on the Style and Class formatting implemented for my View.
@Lincoln DeMaris, sorry for calling out your name, but you seem to be our "go-to person" for getting some estimates. Are there any news for correcting the styling done through the View Formatting?
Thank you in advance!
LHMinu Hi!
While we acknowledge that there is some mismatch between the formatting behavior of lists when used as web parts (and we are working on it), it'd be best if you can provide us with the JSON being used for view formatting. This will help us in pin pointing the problem specific to your use case and maybe we'll be able to provide you with a workaround till the time the issue is completely resolved.
Regards
- LHMinuAug 13, 2019Copper Contributor
Hi SVaibhav !
Thank you so much for the predisposition.
My JSON is based on the code displayed on the GitHub for Retail Detail View. However, I removed the reference to the .api for retrieving and displaying locations through a map.
I am using the same structure for displaying text, and the main goal of the view is displaying the Status for Projects. When embedding the list on a WebPart, it shows the same text and the same structured table; however, the formatting and spacing of the text is completely arbitrary (As if the specifications made on the Classes didn't exist).
{ "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>", "debugMode": false, "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": " ms-borderColor-neutralLight" }, "style": { "border-top-width": "1px", "border-top-style": "solid", "width": "100%", "padding": "0 0 0 20px", "flex-wrap": "wrap", "align-items": "flex-start", "justify-content": "space-between" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px", "margin": "10px" }, "children": [ { "elmType": "button", "attributes": { "class": "ms-fontSize-xl ms-fontColor-themePrimary" }, "style": { "border": "0", "padding": "0", "margin-bottom": "0.5em", "background-color": "transparent", "cursor": "pointer", "line-height": "1.5em", "overflow": "hidden", "text-align": "left" }, "customRowAction": { "action": "defaultClick" }, "txtContent": "[$Title]" }, { "elmType": "div", "attributes": { "class": "ms-fontSize-mPlus" }, "style": { "line-height": "1.5em" }, "children": [ { "elmType": "span", "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "Goal: " }, { "elmType": "span", "txtContent": "[$Goal]" } ] }, { "elmType": "div", "attributes": { "class": "ms-fontSize-mPlus" }, "style": { "line-height": "1.5em" }, "children": [ { "elmType": "span", "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "Start Date: " }, { "elmType": "span", "txtContent": "=toLocaleDateString[$StartDate]" }, { "elmType": "span", "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": " || " }, { "elmType": "span", "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "Due Date: " }, { "elmType": "span", "txtContent": "=toLocaleDateString[$Due_x0020_Date]" } ] } ] }, { "elmType": "div", "style": { "flex": "0 0 539px", "width": "504px", "margin": "10px", "display": "flex", "justify-content": "space-between" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 180px", "height": "108px", "text-align": "center" }, "children": [ { "elmType": "span", "attributes": { "class": " ms-fontSize-mPlus ms-fontWeight-bold" }, "style": { "line-height": "2em" }, "txtContent": "Last Activities" }, { "elmType": "span", "attributes": { "class": "ms-fontSize-s ms-fontWeight-light" }, "style": { "display": "inline-block", "line-height": "1em", "vertical-align": "top", "text-align": "justify", "margin": "5px" }, "txtContent": "[$LastActivities]" } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 173px", "height": "108px", "text-align": "center" }, "children": [ { "elmType": "span", "attributes": { "class": " ms-fontSize-mPlus ms-fontWeight-bold" }, "style": { "line-height": "2em" }, "txtContent": "Next Activities" }, { "elmType": "span", "attributes": { "class": "ms-fontSize-s ms-fontWeight-light" }, "style": { "display": "inline-block", "line-height": "1em", "vertical-align": "top", "text-align": "justify", "margin": "5px" }, "txtContent": "[$NextActivities]" } ] }, { "elmType": "div", "attributes": { "class": "=if([$Status] == 'Red', 'ms-bgColor-red', if([$Status] == 'Green', 'ms-bgColor-green', if([$Status] == 'Amber', 'ms-bgColor-yellow', if([$Status] == 'On Hold', 'ms-bgColor-teal', ''))))" }, "style": { "flex": "0 0 173px", "height": "108px", "box-sizing": "border-box", "padding": "12px 10px", "text-align": "center" }, "children": [ { "elmType": "div", "attributes": { "class": " ms-fontSize-mPlus ms-fontWeight-bold" }, "style": { "line-height": "0.5em" }, "txtContent": "Status" }, { "elmType": "div", "style": { "color": "#fff", "font-size": "70px", "line-height": "1em" }, "attributes": { "iconName": "=if([$Status] == 'Red', 'StatusCircleErrorX', if([$Status] == 'Green', 'CheckMark', if([$Status] == 'Amber', 'StatusCircleExclamation', if([$Status] == 'On Hold', 'Remove', ''))))" } } ] } ] } ] } }
- SVaibhavAug 14, 2019Microsoft
LHMinu Hi!
Thank you for sharing the JSON. As we expected, there are some classes related to font-size and font-color which are not working properly when used on web part. The same is the case here too. For now I have modified your JSON to use the actual CSS properties instead of classes which you can use for now (till we resolve this completely).
You can use the following JSON for now, and to see what changes I did to the original JSON you can see them here.
PS: There is still one class missing called "ms-fontColor-themePrimary", so that mismatch is still going to happen, or you can use a fixed color for that (for now). Let me know if you need help with that!
{ "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "debugMode": false, "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": " ms-borderColor-neutralLight" }, "style": { "border-top-width": "1px", "border-top-style": "solid", "width": "100%", "padding": "0 0 0 20px", "flex-wrap": "wrap", "align-items": "flex-start", "justify-content": "space-between" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px", "margin": "10px" }, "children": [ { "elmType": "button", "attributes": { "class": "ms-fontColor-themePrimary" }, "style": { "border": "0", "padding": "0", "margin-bottom": "0.5em", "background-color": "transparent", "cursor": "pointer", "line-height": "1.5em", "overflow": "hidden", "font-size": "21px", "text-align": "left" }, "customRowAction": { "action": "defaultClick" }, "txtContent": "[$Title]" }, { "elmType": "div", "style": { "font-size": "15px", "line-height": "1.5em" }, "children": [ { "elmType": "span", "style": { "font-weight": "700" }, "txtContent": "Goal: " }, { "elmType": "span", "txtContent": "[$Goal]" } ] }, { "elmType": "div", "style": { "font-size": "15px", "line-height": "1.5em" }, "children": [ { "elmType": "span", "style": { "font-weight": "700" }, "txtContent": "Start Date: " }, { "elmType": "span", "txtContent": "=toLocaleDateString[$StartDate]" }, { "elmType": "span", "style": { "font-weight": "700" }, "txtContent": " || " }, { "elmType": "span", "style": { "font-weight": "700" }, "txtContent": "Due Date: " }, { "elmType": "span", "txtContent": "=toLocaleDateString[$Due_x0020_Date]" } ] } ] }, { "elmType": "div", "style": { "flex": "0 0 539px", "width": "504px", "margin": "10px", "display": "flex", "justify-content": "space-between" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 180px", "height": "108px", "text-align": "center" }, "children": [ { "elmType": "span", "style": { "font-size":"15px", "font-weight": "700", "line-height": "2em" }, "txtContent": "Last Activities" }, { "elmType": "span", "style": { "font-size": "12px", "font-weight": "100", "display": "inline-block", "line-height": "1em", "vertical-align": "top", "text-align": "justify", "margin": "5px" }, "txtContent": "[$LastActivities]" } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 173px", "height": "108px", "text-align": "center" }, "children": [ { "elmType": "span", "style": { "font-size":"15px", "font-weight":"700", "line-height": "2em" }, "txtContent": "Next Activities" }, { "elmType": "span", "style": { "font-size":"12px", "font-weight":"100", "display": "inline-block", "line-height": "1em", "vertical-align": "top", "text-align": "justify", "margin": "5px" }, "txtContent": "[$NextActivities]" } ] }, { "elmType": "div", "attributes": { "class": "=if([$Status] == 'Red', 'ms-bgColor-red', if([$Status] == 'Green', 'ms-bgColor-green', if([$Status] == 'Amber', 'ms-bgColor-yellow', if([$Status] == 'On Hold', 'ms-bgColor-teal', ''))))" }, "style": { "flex": "0 0 173px", "height": "108px", "box-sizing": "border-box", "padding": "12px 10px", "text-align": "center" }, "children": [ { "elmType": "div", "style": { "font-size":"15px", "font-weight":"700", "line-height": "0.5em" }, "txtContent": "Status" }, { "elmType": "div", "style": { "color": "#fff", "font-size": "70px", "line-height": "1em" }, "attributes": { "iconName": "=if([$Status] == 'Red', 'StatusCircleErrorX', if([$Status] == 'Green', 'CheckMark', if([$Status] == 'Amber', 'StatusCircleExclamation', if([$Status] == 'On Hold', 'Remove', ''))))" } } ] } ] } ] } }
- marissa_sinaiOct 18, 2019Copper Contributor
SVaibhav @Lincoln DeMaris Custom Row Actions not working on SP Page:
Hi! This is my first time coding or doing View Formatting, so any help would be much appreciated:
I am using both the Custom Row Actions editProps (edit button) and defaultClick (info button) in my formatting. On the list, they both work perfectly. On the SP Page where I am displaying this list view, however, neither button works as it did on the list itself. The editProps does not do anything at all when clicked, and the defaultClick causes a new tab to open up with the item details, as opposed to the right-hand details pane sliding out. Can you please help me with these issues?
Thanks so much!
Marissa
{ "schema": "<a href="<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a</a>>", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "flex-direction": "column", "display": "flex", "align-items": "flex-start", "margin-left": "40px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "display": "flex", "width": "100%" }, "children": [ { "elmType": "div", "style": {}, "children": [ { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage1]", "target": "_blank" }, "children": [ { "elmType": "img", "style": { "width": "250px", "height": "auto", "align": "top", "display": "block" }, "attributes": { "src": "=if([$shopImage1], [$shopImage1], @currentWeb + '/Shared Documents/swap_shop_default.jpg')", "class": "ms-fontSize-su" } } ] }, { "elmType": "div", "style": { "display": "flex", "width": "250px" }, "children": [ { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage2]", "target": "_blank" }, "style": { "display": "=if([$shopImage2], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage2]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage3]", "target": "_blank" }, "style": { "display": "=if([$shopImage3], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage3]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage4]", "target": "_blank" }, "style": { "display": "=if([$shopImage4], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage4]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage5]", "target": "_blank" }, "style": { "display": "=if([$shopImage5], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage5]", "class": "ms-fontSize-su" } } ] } ] } ] }, { "elmType": "div", "style": { "text-align": "left", "display": "flex", "align-items": "flex-start", "flex-direction": "column", "flex": "1" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-row-title" }, "txtContent": "[$Title]", "style": { "margin-left": "15px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding", "display": "=if([$Description], 'block', 'none')" }, "txtContent": "[$Description]", "style": { "margin-left": "15px" } }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$URL]", "target": "_blank" }, "style": { "border": "none", "text-decoration": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if([$URL], 'flex', 'none')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "0px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "style": { "padding-right": "4px" }, "attributes": { "iconName": "link" } }, { "elmType": "span", "style": { "padding-right": "2px", "font-size": "12px" }, "txtContent": "[$URL.desc]" } ] }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "padding-left": "15px", "margin-top": "auto", "box-sizing": "border-box", "width": "100%", "white-space": "nowrap" }, "children": [ { "elmType": "div", "txtContent": "='$' + [$Price]", "style": { "padding-right": "5px", "margin": "8px 10px 0px 0px", "font-size": "16px", "color": "green", "font-weight": "700" } }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": { "operator": "+", "operands": [ "mailto:", "[$Author.email]", "?subject=Swap Shop Inquiry&body=\r\n---\r\n", "@me", "\r\nSwap Shop link: <a href="<a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a>" target="_blank"><a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a</a>>", "[$ID]" ] } }, "style": { "border": "none", "text-decoration": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "style": { "padding-right": "8px", "font-size": "16px" }, "attributes": { "iconName": "Mail" } }, { "elmType": "span", "txtContent": "[$Author.title]", "style": { "font-size": "12px", "padding-right": "2px" } } ] }, { "elmType": "div", "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if([$Phone], 'flex', 'none')", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "phone" }, "style": { "padding-right": "6px", "font-size": "14px" } }, { "elmType": "span", "txtContent": "='(' + substring([$Phone], 0, 3) + ') ' + substring([$Phone], 3, 6) + '-' + substring([$Phone], 6, 10)", "style": { "font-size": "12px" } } ] }, { "elmType": "div", "style": { "margin-left": "auto", "display": "flex" }, "children": [ { "elmType": "button", "customRowAction": { "action": "share" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "share" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Share", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "info" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Info", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "editProps" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if(@me != [$Author.email], 'none', 'flex')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "edit" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Edit", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "delete" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if(@me != [$Author.email], 'none', 'flex')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "delete" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Delete", "style": { "font-size": "12px" } } ] } ] } ] } ] } ] } ] } }
- SVaibhavOct 18, 2019Microsoft
It'd be great if you can share the JSON you are using. That'll help us in pinpointing the issue you are facing.
Thanks
- marissa_sinaiOct 18, 2019Copper Contributor
{ "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "flex-direction": "column", "display": "flex", "align-items": "flex-start", "margin-left": "40px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "display": "flex", "width": "100%" }, "children": [ { "elmType": "div", "style": {}, "children": [ { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage1]", "target": "_blank" }, "children": [ { "elmType": "img", "style": { "width": "250px", "height": "auto", "align": "top", "display": "block" }, "attributes": { "src": "=if([$shopImage1], [$shopImage1], @currentWeb + '/Shared Documents/swap_shop_default.jpg')", "class": "ms-fontSize-su" } } ] }, { "elmType": "div", "style": { "display": "flex", "width": "250px" }, "children": [ { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage2]", "target": "_blank" }, "style": { "display": "=if([$shopImage2], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage2]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage3]", "target": "_blank" }, "style": { "display": "=if([$shopImage3], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage3]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage4]", "target": "_blank" }, "style": { "display": "=if([$shopImage4], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage4]", "class": "ms-fontSize-su" } } ] }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$shopImage5]", "target": "_blank" }, "style": { "display": "=if([$shopImage5], 'inline', 'none')", "width": "25%" }, "children": [ { "elmType": "img", "style": { "width": "100%", "height": "auto", "border": "1px solid white", "box-sizing": "border-box" }, "attributes": { "src": "[$shopImage5]", "class": "ms-fontSize-su" } } ] } ] } ] }, { "elmType": "div", "style": { "text-align": "left", "display": "flex", "align-items": "flex-start", "flex-direction": "column", "flex": "1" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-row-title" }, "txtContent": "[$Title]", "style": { "margin-left": "15px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding", "display": "=if([$Description], 'block', 'none')" }, "txtContent": "[$Description]", "style": { "margin-left": "15px" } }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": "[$URL]", "target": "_blank" }, "style": { "border": "none", "text-decoration": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if([$URL], 'flex', 'none')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "0px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "style": { "padding-right": "4px" }, "attributes": { "iconName": "link" } }, { "elmType": "span", "style": { "padding-right": "2px", "font-size": "12px" }, "txtContent": "[$URL.desc]" } ] }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "padding-left": "15px", "margin-top": "auto", "box-sizing": "border-box", "width": "100%", "white-space": "nowrap" }, "children": [ { "elmType": "div", "txtContent": "='$' + [$Price]", "style": { "padding-right": "5px", "margin": "8px 10px 0px 0px", "font-size": "16px", "color": "green", "font-weight": "700" } }, { "elmType": "a", "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover", "href": { "operator": "+", "operands": [ "mailto:", "[$Author.email]", "?subject=Swap Shop Inquiry&body=\r\n---\r\n", "@me", "\r\nSwap Shop link: <a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a>", "[$ID]" ] } }, "style": { "border": "none", "text-decoration": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "style": { "padding-right": "8px", "font-size": "16px" }, "attributes": { "iconName": "Mail" } }, { "elmType": "span", "txtContent": "[$Author.title]", "style": { "font-size": "12px", "padding-right": "2px" } } ] }, { "elmType": "div", "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if([$Phone], 'flex', 'none')", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "phone" }, "style": { "padding-right": "6px", "font-size": "14px" } }, { "elmType": "span", "txtContent": "='(' + substring([$Phone], 0, 3) + ') ' + substring([$Phone], 3, 6) + '-' + substring([$Phone], 6, 10)", "style": { "font-size": "12px" } } ] }, { "elmType": "div", "style": { "margin-left": "auto", "display": "flex" }, "children": [ { "elmType": "button", "customRowAction": { "action": "share" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "share" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Share", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "flex", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "info" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Info", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "editProps" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if(@me != [$Author.email], 'none', 'flex')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "edit" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Edit", "style": { "font-size": "12px" } } ] }, { "elmType": "button", "customRowAction": { "action": "delete" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover" }, "style": { "border": "none", "background-color": "transparent", "align-items": "center", "flex-direction": "row", "display": "=if(@me != [$Author.email], 'none', 'flex')", "cursor": "pointer", "border-radius": "5px", "text-align": "center", "vertical-align": "middle", "margin": "8px 10px 0px 15px", "padding": "0 13 0 13px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "delete" }, "style": { "padding-right": "6px", "font-size": "16px" } }, { "elmType": "span", "txtContent": "Delete", "style": { "font-size": "12px" } } ] } ] } ] } ] } ] } ] } }