One of my clients wanted a way to show documents requiring approval on the homepage of their client portal with a bit of styling. This simple approach creates a card view of documents needed to be approved. Give it a go! I'd love to hear how you got on!
First, you need to create a standard document library and add a field called Approval Status. This needs to be a choice field and in my example, I have the following choices.
Once done, you then need to create a new Tile view of the document library. I created one called Home Approvals
Now I have that view created. I can use the below formatting in the advanced formatting pane to get my nicely formatted card for my homepage.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 150,
"width": 225,
"hideSelection": true,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"justify-content": "space-between",
"align-items": "flex-start",
"height": "100%",
"width": "100%",
"background": "transparent",
"border": "1px solid #fff",
"box-shadow": "none",
"padding": "10px",
"border-radius": "5px",
"position": "relative"
},
"children": [
{
"elmType": "span",
"txtContent": "[$FileLeafRef]",
"style": {
"font-size": "16px",
"font-weight": "normal",
"color": "#fff",
"margin-bottom": "10px",
"text-align": "left",
"white-space": "normal",
"overflow-wrap": "break-word"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "center",
"width": "100%",
"margin-bottom": "10px"
},
"children": [
{
"elmType": "span",
"style": {
"width": "14px",
"height": "14px",
"border-radius": "50%",
"display": "inline-block",
"margin-right": "8px",
"background-color": "=if([$ApprovalStatus] == 'Approved', '#8FBC8B', if([$ApprovalStatus] == 'Not Approved', '#FFC107', if([$ApprovalStatus] == 'Postponed Pending Review', '#E52B50', '')))"
}
},
{
"elmType": "span",
"txtContent": "[$ApprovalStatus]",
"style": {
"font-size": "14px",
"font-weight": "normal",
"color": "#fff",
"text-align": "left",
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "=if([$ApprovalStatus] == 'Not Approved', 'flex', 'none')",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "center",
"width": "100%"
},
"children": [
{
"elmType": "button",
"txtContent": "Approve",
"customRowAction": {
"action": "setValue",
"actionInput": {
"ApprovalStatus": "Approved",
"SignedBy": "[$User.displayName]"
}
},
"style": {
"margin-right": "10px",
"background-color": "#8FBC8B",
"color": "white",
"border": "none",
"padding": "5px 10px",
"text-align": "center",
"text-decoration": "none",
"display": "inline-block",
"font-size": "12px",
"border-radius": "5px",
"cursor": "pointer"
}
},
{
"elmType": "button",
"txtContent": "Postpone",
"customRowAction": {
"action": "setValue",
"actionInput": {
"ApprovalStatus": "Postponed Pending Review"
}
},
"style": {
"background-color": "#E52B50",
"color": "white",
"border": "none",
"padding": "5px 10px",
"text-align": "center",
"text-decoration": "none",
"display": "inline-block",
"font-size": "12px",
"border-radius": "5px",
"cursor": "pointer"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "=if([$ApprovalStatus] != 'Not Approved', 'block', 'none')",
"height": "20px"
},
"children": [
{
"elmType": "span",
"txtContent": "Approved by: [$SignedBy]",
"style": {
"font-size": "12px",
"font-weight": "normal",
"color": "#fff",
"text-align": "left",
"white-space": "normal",
"overflow-wrap": "break-word"
}
}
]
},
{
"elmType": "a",
"attributes": {
"href": "[$FileRef]",
"target": "_blank"
},
"style": {
"position": "absolute",
"top": "10px",
"right": "10px",
"display": "inline-block",
"margin-top": "10px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "https://mytenant.sharepoint.com/sites/MySite/SiteAssets/icons8-document-94.png",
"alt": "Open Document",
"title": "Open Document"
},
"style": {
"width": "25px",
"height": "25px",
"cursor": "pointer"
}
}
]
}
]
}
}You also need to add the modern script editor webpart and pop in the below CSS to help with some styling but you can leave this out if you would rather tweak the SP list formatting. The reason for this is that I needed my webparts to have a transparent background so it could be placed on the darker section colour.
<style type="text/css">
.ms-webpartPage-root {border-spacing: 0px !important;}
.ms-webpartzone-cell {margin: 0px !important;
}
.a_a_ea5ab61a {
background-color: transparent !important; };
[class*=".emptyFolderTitle-"] {color: rgb(255 255 255) !important;}
</style>
Once done, I now have a nice interactive webpart for document approvals. The user can see the status, Approve or Reject (in this case Postpone) and also a file icon to launch the file in a new tab for review.
I hope you found this useful. My name is Stephen Port and I am one of the founders at Dapt. Follow Dapt and myself for more hints and tips!
Comments