list formatting in SharePoint not working
https://sharepoint.stackexchange.com/questions/284749
-
16-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
list formatting in SharePoint I am trying to create a view using view formatting by trying the below
https://github.com/pnp/sp-dev-list-formatting/blob/master/view-samples/tile-layout-example-with-image/README.md I used the below code but it is not working
Not sure what is the problem
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"height": "450",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "150px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "8px",
"color": "#333333"
},
"children": [
{
"elmType": "div",
"style": {
"width": "95%",
"height": "98%",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "300px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$Image] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Image])",
"title": "=if([$Image] == '', 'No picture available', [$Image])"
},
"style": {
"width": "100%",
"height": "200px"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "300px",
"vertical-align": "top",
"padding-left": "16px",
"padding-top": "16px"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#767676",
"font-size": "12px"
},
"txtContent": "Product"
},
{
"elmType": "div",
"style": {
"margin-bottom": "12px",
"font-size": "16px",
"font-weight": "600"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"txtContent": "Price",
"style": {
"color": "#767676",
"font-size": "12px",
"margin-bottom": "2px"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"margin-bottom": "12px"
},
"txtContent": {
"operator": "+",
"operands": [
"$",
"",
"[$Price]"
]
}
},
{
"elmType": "div",
"txtContent": "Features",
"style": {
"color": "#767676",
"font-size": "12px",
"margin-bottom": "2px"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"margin-bottom": "10px",
"width": "235px",
"height": "70px"
},
"txtContent": "[$Description]"
}
]
}
]
}
]
}
}
}
Solution
I rechecked the sample form the link you posted on my tenant and seems to be working fine 🤔
One thing I noticed real quick from your attached screen is that after you applied the view formater you are still in 'All Items' list view but the sample you use actually adds a new view to the list which is tile view as it implements the tileProps node. Please see the attached screen from my example I tried to point the thing I am describing.
If you would like to overwrite the default list view you should use the 'rowFormatter' row and hide the header row.
When being in tile view it still does not work?
Edit 1
To include a static link (so some kind url which will be the same in all elements) you may add just another child element to the tile element which will always present some static text and link (with very easy change you could get those values from other columns using $ sign and column name like [$ColumnName])
So to the link element with static content would look like:
{
"elmType": "a",
"txtContent": "Static Link",
"attributes": {
"target": "_blank",
"href": "http://google.pl"
}
}
also to make the link clickable in tile view (as by default clicking on the tile will open the right show/edit pane) you need to add hideSelection set to true like
"hideSelection": true,
The full example extended from the sample you used:
json
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"hideSelection": true,
"height": "450",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "150px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "8px",
"color": "#333333"
},
"children": [
{
"elmType": "div",
"style": {
"width": "95%",
"height": "98%",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "300px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$ProductPhoto] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$ProductPhoto])",
"title": "=if([$ProductPhoto] == '', 'No picture available', [$Picture.desc])"
},
"style": {
"width": "100%",
"height": "200px"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "300px",
"vertical-align": "top",
"padding-left": "16px",
"padding-top": "16px"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#767676",
"font-size": "12px"
},
"txtContent": "Product"
},
{
"elmType": "div",
"style": {
"margin-bottom": "12px",
"font-size": "16px",
"font-weight": "600"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"txtContent": "Price",
"style": {
"color": "#767676",
"font-size": "12px",
"margin-bottom": "2px"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"margin-bottom": "12px"
},
"txtContent": {
"operator": "+",
"operands": [
"$",
"",
"[$ProductPrice]"
]
}
},
{
"elmType": "div",
"txtContent": "Features",
"style": {
"color": "#767676",
"font-size": "12px",
"margin-bottom": "2px"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"margin-bottom": "10px",
"width": "235px",
"height": "45px"
},
"txtContent": "[$Features]"
},
{
"elmType": "a",
"txtContent": "Static Link",
"attributes": {
"target": "_blank",
"href": "http://google.pl"
}
}
]
}
]
}
]
}
}
}
result
