OK so in this scenario, I was just playing around with a bit of SP list formatting and wanted a method to track if users have read documents assigned to them in SharePoint. I quite liked this approach as it gives the document owner a view against each document with who it has been assigned to and if those people have confirmed to have read it or not.
It's a pretty straight forward one here. You need two people pick columns with multiple select turned on. In this example I have a column called Read and a column called Assigned To.
In the Read column I paste the below advanced formatting in, and I now have a nice tracker with interactive button for my users to confirm they have read the document.
Here's what we have achieve with this.
A button to confirm or unconfirm reading of the document that changes colour and icon depending on status.
A counter showing how many people have confirmed against the assigned to.
A view of assignees.
A view of confirmed people.
Code below as always!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"cursor": "pointer",
"padding": "3px 5px",
"border-radius": "5px",
"background-color": "=if(indexOf([$Read.email], @me) > -1, '#d4edda', '#f8d7da')",
"color": "=if(indexOf([$Read.email], @me) > -1, '#155724', '#721c24')",
"margin-bottom": "5px"
},
"attributes": {
"title": "=if(indexOf([$Read.email], @me) > -1, 'Click to mark as unread', 'Click to mark as read')"
},
"customRowAction": {
"action": "setValue",
"actionInput": {
"Read": "=if(indexOf([$Read.email], @me) > -1, removeFrom([$Read], @me), appendTo([$Read], @me))"
}
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "=if(indexOf([$Read.email], @me) > -1, 'CheckMark', 'StatusCircleErrorX')"
},
"style": {
"margin-right": "5px"
}
},
{
"elmType": "span",
"txtContent": "=if(indexOf([$Read.email], @me) > -1, 'Confirmed', 'Click to confirm')"
}
]
},
{
"elmType": "div",
"style": {
"margin-top": "10px",
"font-weight": "bold"
},
"txtContent": "=length([$Read]) + ' out of ' + length([$AssignedTo]) + ' people confirmed'"
},
{
"elmType": "div",
"style": {
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "bold",
"margin-bottom": "5px"
},
"txtContent": "Assigned to:"
},
{
"forEach": "person in [$AssignedTo]",
"elmType": "span",
"style": {
"margin-right": "5px",
"padding": "2px 4px",
"border": "none",
"border-radius": "3px",
"display": "inline-block"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage([$person.email], 'S')",
"title": "[$person.title]"
},
"style": {
"width": "20px",
"height": "20px",
"border-radius": "50%",
"margin-right": "5px"
}
},
{
"elmType": "span",
"txtContent": "[$person.title]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin-top": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "bold",
"margin-bottom": "5px"
},
"txtContent": "Confirmed by:"
},
{
"forEach": "person in [$Read]",
"elmType": "span",
"style": {
"margin-right": "5px",
"padding": "2px 4px",
"border": "none",
"border-radius": "3px",
"display": "inline-block"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage([$person.email], 'S')",
"title": "[$person.title]"
},
"style": {
"width": "20px",
"height": "20px",
"border-radius": "50%",
"margin-right": "5px"
}
},
{
"elmType": "span",
"txtContent": "[$person.title]"
}
]
}
]
}
]
}
Commentaires