SharePoint
Mastering SharePoint List and Library View Formatting: Your Ultimate Guide
Formatting SharePoint list views can be done using JSON code in the “Format current view” option within the SharePoint list settings. This allows you to customize the appearance of items in the list view according to your requirements. Here’s a general guide on how to format SharePoint list views:
- Format Current View:
- In the List Settings page, scroll down to the “Views” section and click on the view you want to format.
- Choose “Format current view” from the options.
- Add JSON Code:
- In the JSON formatting pane, you can either write your JSON code directly or use pre-made templates.
- You can find many pre-made templates and examples online that you can copy and paste into the JSON formatting pane.
- Preview and Apply:
- After adding your JSON code, you can preview how the formatting will look by clicking on “Preview.”
- Once you’re satisfied with the preview, click on “Save” to apply the formatting to the list view.
- Test and Adjust:
- After applying the formatting, test it thoroughly to ensure it meets your requirements.
- If adjustments are needed, you can go back to the JSON formatting pane, make changes, and save again.
- Share the View (Optional):
- If the formatted view is useful for others, you can share it by clicking on the “Save as” button in the List Settings and providing a name for the new view.
- Documentation and Resources:
- Refer to SharePoint documentation and community resources for more advanced formatting options and examples.
- Microsoft provides extensive documentation and resources for SharePoint JSON formatting, including examples and guides.
Remember, JSON formatting in SharePoint can be quite powerful but may require some familiarity with JSON syntax and SharePoint’s column formatting schema. It’s recommended to test your formatting thoroughly and ensure it works as expected across different scenarios and devices.
Example: Build SharePoint View Using Document Library – Card View JSON
Columns used in below example:
- Choice – languages (English, German, French)
- People Picker – Like/Dislike
- Yes/No – Recommended, Timestamp, Guidance
- Single Line Of Text
Code Snippet
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 430,
"width": 300,
"hideSelection": true,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"style": {
"box-sizing": "border-box",
"box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"border-radius": "6px",
"height": "100%",
"width": "100%",
"display": "flex",
"flex-direction": "column",
"overflow": "hidden",
"border-width": "1px",
"border-style": "solid",
"border-color": "#edebe9"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-subContainer"
},
"style": {
"height": "100%"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-imageContainer"
},
"children": [
{
"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.512x432"
},
"style": {
"height": "200px"
},
"filePreviewProps": {
"fileTypeIconClass": "sp-css-borderColor-neutralLight",
"fileTypeIconStyle": {
"width": "100px",
"display": "none"
},
"brandTypeIconClass": "sp-css-borderColor-neutralLight",
"brandTypeIconStyle": {
"width": "68px",
"display": "none"
}
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin-top": "5px",
"padding-right": "8px",
"font-weight": "bold",
"text-align": "right"
},
"txtContent": "[$Type_x0020_of_x0020_Asset]"
},
{
"elmType": "div",
"style": {
"height": "115px",
"margin-top": "2px",
"padding": "0px 8px 0px 8px"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "normal",
"font-size": "Regular",
"display": "=if([$Topic] == '', 'none', 'inline')",
"white-space": "break-spaces",
"word-wrap": "normal"
},
"txtContent": "[$Topic]",
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "span",
"style": {
"display": "=if([$Recommended]=='Yes','inline-block','none')",
"margin-top": "5px",
"margin-left": "5px",
"width": "100px",
"height": "18px",
"color": "white",
"border-radius": "15px",
"padding-top": "5px",
"background-color": "red",
"font-weight": "bold",
"font-size": "11px",
"text-align": "center"
},
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "Recommended"
}
,
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "=if([$File_x0020_Type]=='mp4','inline-block','none')"
},
"children": [
{
"elmType": "a",
"txtContent": "Timestamp",
"attributes": {
"href": "[$Timestamp]",
"target": "_blank"
},
"style": {
"display": "inline-block",
"margin-top": "5px",
"margin-left": "5px",
"width": "75px",
"height": "18px",
"color": "white",
"border-radius": "15px",
"padding-top": "5px",
"padding-bottom": "5px",
"font-weight": "bold",
"font-size": "11px",
"text-align": "center",
"text-decoration": "none",
"background-color": "=if([$Timestamp]=='','#dddddd','#5885AF')",
"pointer-events": "none",
"cursor": "=if([$Timestamp]=='','not-allowed','allowed')",
"border": "=if([$Timestamp]=='','1px solid #dddddd','1px solid #5885AF')"
}
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "inline-block"
},
"children": [
{
"elmType": "a",
"txtContent": "Guidence",
"attributes": {
"href": "[$Guidence]",
"target": "_blank"
},
"style": {
"display": "inline-block",
"margin-top": "5px",
"margin-left": "5px",
"width": "65px",
"height": "18px",
"color": "white",
"border-radius": "15px",
"padding-top": "5px",
"padding-bottom": "5px",
"font-weight": "bold",
"font-size": "11px",
"text-align": "center",
"text-decoration": "none",
"background-color": "=if([$Guidence]=='','#dddddd','#5885AF')",
"pointer-events": "none",
"cursor": "=if([$Guidence]=='','not-allowed','allowed')",
"border": "=if([$Guidence]=='','1px solid #dddddd','1px solid #5885AF')"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin-left": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block"
},
"forEach": "item in [$Language]",
"children": [
{
"elmType": "a",
"style": {
"display": "inline-block",
"padding": "2px 2px",
"font-size": "9px",
"text-align": "center",
"text-decoration": "none",
"border": "1px solid #3498db",
"color": "#3498db",
"background-color": "#ffffff",
"border-radius": "5px",
"transition": "background-color 0.3s, color 0.3s",
"margin-left": "5px",
"margin-top": "10px"
},
"attributes": {
"href": "YOUR_URL",
"target": "_blank"
},
"txtContent": "[$item]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"text-align": "left",
"margin-left": "6px",
"margin-bottom": "15px",
"margin-top": "15px"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "setValue",
"actionInput": {
"Like": "=if(indexOf([$Like.email] , @me) > -1 , removeFrom([$Like.email] , @me) , appendTo([$Like.email] , @me) )",
"Dislike": "=removeFrom([$Dislike.email] , @me)"
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"title": "Like"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"font-size": "18px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(indexOf([$Like.email] , @me) > -1, 'LikeSolid', 'Like')"
},
"style": {
"padding-right": "2px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "setValue",
"actionInput": {
"Like": "=removeFrom([$Like.email], @me)",
"Dislike": "=if(indexOf([$Dislike.email] , @me) > -1 , removeFrom([$Dislike.email] , @me) , appendTo([$Dislike.email] , @me))"
}
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"title": "dislike"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"font-size": "18px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(indexOf([$Dislike.email] , @me) > -1, 'DislikeSolid', 'Dislike')"
},
"style": {
"padding-right": "8px"
}
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "inline-block"
},
"children": [
{
"elmType": "a",
"txtContent": "Open Link",
"attributes": {
"href": "[$DocumentLink]",
"class": "sp-card-linkButto"
},
"style": {
"color": "white",
"text-decoration": "none",
"padding": "5px 10px",
"border": "=if([$DocumentLink]=='','1px solid #dddddd','1px solid #03787c')",
"border-radius": "4px",
"background-color": "=if([$DocumentLink]=='','#dddddd','#03787c')",
"display": "inline-block",
"margin-left": "5px",
"pointer-events": "none",
"cursor": "=if([$DocumentLink]=='','not-allowed','allowed')"
}
}
]
},
{
"elmType": "div",
"style": {
"flex-grow": "1",
"display": "inline-block"
},
"children": [
{
"elmType": "a",
"txtContent": "Feedback",
"attributes": {
"href": "='YOUR_URL'",
"target": "_blank",
"class": "sp-card-linkButto"
},
"style": {
"color": "white",
"text-decoration": "none",
"padding": "5px 10px",
"border": "1px solid #03787c",
"border-radius": "4px",
"background-color": "#03787c",
"display": "inline-block",
"margin-left": "10px"
}
}
]
}
]
}
]
}
]
}
}Reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
Happy Building š
Check Out Our Power Automate : https://365stack.in/wp-admin/post.php?post=1937&action=edit
0
Tags :
