0

I tried using below json code to make list like tile.

It works as expected when open it in the list however, the layout changed when use this list as web part in page.

Figure 1 : Open in list

enter image description here

Figure 2 : List used as web part

enter image description here

Is there any way to make Figure 2 layout same as Figure 1?

I am appreciate for your great help!

Json code:

    {
    "schema": 
    "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
     "hideSelection": "true", 
     "hideColumnHeader": "true", 
     "rowFormatter": 
     { "elmType": "a", 
      "attributes": 
       {
     "href": "[$URL]", 
    "target": "=if([$OpenInNewTab] == true, '_blank', '')" 
    }, 
    "style": { "float": "left" }, 
    "children": [ { 
    "elmType": "div", 
    "attributes": 
    { 
    "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover" 
    }, 
    "style": 
    { 
    "display": "flex", 
    "flex-wrap": "wrap", 
    "min-width": "80px", 
    "min-height": "50px", 
    "margin-right": "10px", 
    "box-shadow": "2px 2px 4px darkgrey" 
    }, 
    "children": 
    [ 
    { 
    "elmType": "div", 
    "style": 
    {
    }, 
    "padding": "0 25%", 
    "children": 
    [ 
    { 
    "elmType": "img", 
    "style": 
    { 
    "vertical-align": "top" 
    }, 
    "attributes": 
    { 
    "src": "[$thumbnail]" 
    } 
    } 
    ] 
    } 
    ] 
    } 

] 
    } 
}
0

If I understand correctly, you want this result:

enter image description here

So I change a little your code in order to match the json formatter v2 for sharepoint Online:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",                
"debugMode": true, 
"elmType": "div",
"style": {
    "display": "block",
    "min-height": "50px"                      
},
"attributes": {
    "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"                   
},
"children": [
    {
        "elmType":"a",
        "attributes": {
            "href": "[$URL]",
            "target": "=if([$OpenInNewTab] == true, '_blank', '')"
        },
        "children": [
            {
                "elmType": "img",
                "style" : {
                    "max-width": "100%",
                    "height": "5rem",
                    "margin-left": "auto",
                    "margin-right": "auto",
                    "padding": "0.5rem",
                    "display": "block"
                },
                "attributes": {
                    "src": "[$thumbnail]"
                }
            }
        ]
    }
]

}

If you dont like the size of the icon image you can change it on the children related to the img tag.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.