Forum Discussion
Unable to set the default rendering as "Tiles" for my document library view
I have created a new sharepoint modern team site, and inside the built-in document library, i want to set the default rendering for all users to be "Titles" instead of "List", as follow:- ...
john john Please find below my step by step approach to setting the "Tiles" as a default view.
- Site Contents - create a new list (with "Show in site navigation")
- Add an new item to the list (at this step the list is made only of the "Title" column).
- In the "All Items" drop-down - select "Save view as" - give it a new name. Ensure that "Make this a public view" is ticked.
- In the "All Items" drop-down ensure the view with the new name is selected and click "Format current view"
- Click 'Advance mode", paste your JSON and click "Save". At this point the view should change to reflect your JSON design. Close the "Format view" section ("x" - right corner).
- In the "All Items" drop-down - select "Tiles" (the expected view should be displayed)
- In the "All Items" drop-down - select "Save view as" (keep the same name), just click "Save"
- In the "All Items" drop-down - click "Set the current view as default"
- The solution -> Click "Save View as" (again with the same name)
- Done - the "Tiles" view is set as default
RaulPop "My JSON? All JSON files I discovered paint ugly rows of color, but not text at all is shown. Please help us all out here. Thank you.
I’ve adapted the example from https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/tile-layout-example-with-image
Site Contents - create a new list (with "Show in site navigation")
Column Name
Type
Title
ItemPrice
Number
ItemFeatures
Multiple lines
ItemPhoto
Picture
- Add an new item to the list, filling each column accordingly
- In the "All Items" drop-down - select "Save view as" - give it a new name. Ensure that "Make this a public view" is ticked.
- In the "All Items" drop-down ensure the view with the new name is selected and click "Format current view"
- Click 'Advance mode", paste the following JSON and click "Save". Close the "Format view" section ("x" - right corner).
- In the "new view name" drop-down - select "Tiles" (the new view should be displayed). At this point the view should change to reflect the new JSON design.
- In the ""new view name" " drop-down - select "Save view as" (keep the same name), just click "Save"
- In the " new view name " drop-down - click "Set the current view as default"
- The solution -> Click "Save View as" (again with the same name)
- Done - the "Tiles" view is set as default
{ "$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([$ItemPicture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$ItemPicture])", "title": "=if([$ItemPicture] == '', '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": [ "$", "", "[$ItemPrice]" ] } }, { "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": "[$ItemFeatures]" } ] } ] } ] } } }Thanks for this guide RaulPop - I've followed it and it works 🙂
It however only works in Sharepoint online - but doesn't affect the Files view in Teams (which is what I was hoping for as we only work with files through Teams).
Any suggestions to how it can affect the view in Teams also?My "new view name" is called "Default Galleri" (= tiles), and as you can see on the screenshot below, the new view-setting is applied in the drop-down by default in Teams, however the actual view doesn't update accordingly.
Thanks a lot for you help.
I’ve adapted the example from https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/tile-layout-example-with-image
Feel free to explore all the various samples there.
Site Contents - create a new list (with "Show in site navigation")
Column Name
Type
Title
ItemPrice
Number
ItemFeatures
Multiple lines
ItemPicture
Picture
- Add an new item to the list, filling each column accordingly
- In the "All Items" drop-down - select "Save view as" - give it a new name. Ensure that "Make this a public view" is ticked.
- In the "All Items" drop-down ensure the view with the new name is selected and click "Format current view"
- Click 'Advance mode", paste the following JSON and click "Save". Close the "Format view" section ("x" - right corner).
- In the "new view name" drop-down - select "Tiles" (the new view should be displayed). At this point the view should change to reflect the new JSON design.
- In the ""new view name" " drop-down - select "Save view as" (keep the same name), just click "Save"
- In the " new view name " drop-down - click "Set the current view as default"
- The solution -> Click "Save View as" (again with the same name)
- Done - the "Tiles" view is set as default
{ "$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([$ItemPicture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$ItemPicture])", "title": "=if([$ItemPicture] == '', '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": [ "$", "", "[$ItemPrice]" ] } }, { "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": "[$ItemFeatures]" } ] } ] } ] } } }
