Modern Promoted Links using JSON View formatting

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.

Preview of the custom list with the JSON formatting snippet below applied to the view

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 NameColumn Type
TitleSingle line of text
ImagePicture
URLHyperlink
NewTabYes/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"
                  }
               }
            ]
         }
      ]
   }
}

One thought on “Modern Promoted Links using JSON View formatting

Comments are closed.