SharePoint Document User Experience Cheat Codes
In this video, we will look at a fantastic approach to displaying documents to users of your SharePoint Intranet site - AKA the document user experience cheat code 🔥
This approach leverages JSON formatting within a document library to build a custom document card complete with 'Download' and 'View' buttons 😁
One of the best parts is that the code used is pretty generic and can be easily applied to multiple document libraries.
In the video, I walk you step-by-step through how the code works and where to use it.
✅ Video Chapters
0:00 - Introduction and what we are doing
0:32 - What's wrong with the default user experience
4:15 - Creating our base document library
6:35 - Creating a custom document library view
8:25 - Adding a download button and code explanation
14:22 - Adding a view button and code explanation
16:26 - Extending the description and title size to wrap
19:44 - Adjusting the height of our document card
20:01 - Removing the default card interactions
21:53 - Creating our new page and styling the header
25:06 - Adding our custom document library view to a site page
25:45 - Finishing off the experience with dynamic filters
🎓 My Courses:
🚀 Intranet Site Builders Master Class here: https://academy365.podia.com/sharepoi...
🚀SharePoint Training & Education Platform Site: https://academy365.podia.com/training...
🏷️ Use coupon code FLASH30 for 30% off 😁 Just enter at checkout!
🔗 Icons Link: https://flicon.io
🟢 Download Button JSON code:
{
"elmType": "button",
"style": {
"border-radius": "5px",
"margin": "5px 15px",
"padding": "10px 0px",
"border": "none",
"cursor": "pointer"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
},
"children": [
{
"elmType": "a",
"style": {
"text-decoration": "none"
},
"attributes": {
"target": "_blank",
"href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]",
"class": "ms-fontColor-white ms-fontSize-m"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "Download"
}
},
{
"elmType": "span",
"txtContent": "Download"
}
]
}
]
},
🟢 View Button JSON code
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"style": {
"border-radius": "5px",
"margin": "5px 15px",
"padding": "10px 0px",
"border": "none",
"cursor": "pointer"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-fontSize-m"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px",
"cursor": "pointer"
},
"attributes": {
"iconName": "View"
}
},
{
"elmType": "span",
"txtContent": "Open"
}
]
}