Showing posts with label Format View. Show all posts
Showing posts with label Format View. Show all posts

Thursday, July 15, 2021

Format view using json in SharePoint Online Modern Asset Library

 You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements. View formatting does not change the data in list items; it only changes how they're displayed to users who browse the list. Anyone who can create and manage views in a list can use view formatting to configure how views are displayed

To open the view formatting pane, open the view dropdown and choose Format current view.


The pane will look like the following depending on the current layout:


Sample schema for asset library is below

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"hideSelection": true,
"height": "300",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"align-items": "stretch",
"margin": "2px 2px",
"background-color": "#fbfbfb",
"height": "380px",
"overflow": "inherit",
"border-radius": "2px",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"position": "relative",
"padding-bottom": "5px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"margin-top": "0px",
"height": "200px",
"display": "block",
"align-items": "center",
"justify-content": "center",
"position": "relative",
"border-bottom": "1px solid #EEE",
"overflow": "hidden",
"border-radius": "2px 2px 0 0"
},
"children": [
{
"elmType": "button",
"style": {
"position": "absolute",
"height": "100%",
"width": "100%",
"opacity": "0",
"cursor": "pointer"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"width": "=if([$File_x0020_Type] == '', '100px', '100%')",
"height": "=if([$File_x0020_Type] == '', '100px', '100%')",
"oveflow": "=if([$File_x0020_Type] == '', 'auto', 'hidden')",
"text-align": "center",
"overflow": "hidden"
},
"children": [
{
"elmType": "img",
"style": {
"height": "=if([$File_x0020_Type] == '', '100%', '0'"
},
"attributes": {
"src": "=if([$File_x0020_Type] == '', 'https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-react-assets/foldericons-fluent/folder-large_frontplate_nopreview.svg', '')"
}
},
{
"elmType": "img",
"style": {
"display": "=if([$File_x0020_Type] == '', 'none', '')"
},
"attributes": {
"src": "@thumbnail.383x383"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin": "25px 0 0 0",
"position": "absolute",
"top": "153px",
"width": "100%",
"color": "#333333"
},
"attributes": {
"class": "ms-fontSize-14 ms-fontWeight-semibold"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$File_x0020_Type] == 'docx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/docx.svg?v6', if([$File_x0020_Type] == 'xlsx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/xlsx.svg?v6', if([$File_x0020_Type] == 'pptx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pptx.svg?v6', if([$File_x0020_Type] == 'pdf', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pdf.svg?v6', if([$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'gif','https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/photo.svg?v6', if([$File_x0020_Type] == 'mp4' || [$File_x0020_Type] == 'avi' || [$File_x0020_Type] == 'mov', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/video.svg?v6', if([$File_x0020_Type] == 'zip', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/zip.svg?v6','Unknown')))))))"
},
"style": {
"flex": "none",
"line-height": "100%",
"font-weight": "normal",
"font-size": "2rem",
"margin": "5px 5px 5px 10px",
"height": "25px"
}
},
{
"elmType": "div",
"txtContent": "[$VideoTitle]",
"style": {
"padding": "0 0 0 16px",
"font-weight": "bold",
"font-size": "1rem"
}
},
{
"elmType": "div",
"txtContent": "[$VideoSummary]",
"style": {
"padding": "0 0 0 16px"
}
}
]
}
]
}
]
}
}
}

You can modify this based on your needs.