0

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

enter image description here

Not sure what is the problem

enter image description here {

  "$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]"

                }

              ]

            }

          ]

        }

      ]

    }

  }

}
Improve this question

1 Answer 1

Reset to default
2

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. enter image description here

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

enter image description here

Improve this answer
2
  • That was it thanks, would you know how to add a static link or a button which point to a site below features?
    – Rinu
    Commented Sep 13, 2020 at 13:14
  • 1
    sure, I extended my post, see Edit 1. I hope that was the result you were looking for 🤔
    – Adam
    Commented Sep 13, 2020 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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