Here is how to created a promoted links list with a custom list and JSON view formatting. There are other JSON View formatting examples here. There are some similar ones but this version does not need the view to be in the Tiles view mode to work.
Why use a Modern list with JSON and not the promoted links list? Well with JSON formatting you can modify the CSS to change the way the tiles display, add additional fields etc. It is all about flexibility.
To start with, first we will need to create a custom list with the following fields:
Column Name | Column Type |
Title | Single line of text |
Image | Picture |
URL | Hyperlink |
NewTab | Yes/No |
Once the list is created, select format the current view and paste the code snippet below in. You can update the size of the image and other properties; you can add a description field. This is just a baseline to get you started.
{
"$schema":"https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection":true,
"hideColumnHeader":true,
"rowFormatter":{
"elmType":"div",
"attributes":{
"class":"ms-bgColor-themeLighterAlt ms-bgColor-neutralTertiaryAlt--hover ms-fontColor-white--hover sp-field-dataBars ms-font-m",
"title":"[$Title]"
},
"style":{
"margin":"5px",
"padding":"0 0px 0 0",
"border-width":"0px",
"border-radius":"0px",
"border-style":"none",
"cursor":"pointer",
"float":"left",
"flex-grow":"1",
"display":"flex",
"flex-direction":"column",
"flex-wrap":"nowrap",
"align-items":"center"
},
"children":[
{
"elmType":"a",
"attributes":{
"href":"[$URL]"
},
"target":"=if([$NewTab] == true, '_blank', '')",
"_comments_":"Each item is a link",
"style":{
"margin":"5px"
},
"children":[
{
"elmType":"img",
"_comments_":"Backgroung image",
"attributes":{
"src":"[$Image]"
},
"style":{
"display":"flex",
"flex-wrap":"wrap",
"width":"auto",
"height":"150px",
"box-shadow":"2px 2px 4px darkgrey"
}
},
{
"elmType":"div",
"txtContent":"[$Title]",
"attributes":{
"class":"ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary ms-fontColor-white--hover"
}
}
]
}
]
}
}
Malka,
Thanks putting this information together so eloquently.
Keep up the great work.