Request Sign-off | List Formatting Gallery

Request Sign-off

This sample provides a custom view to focus on files within a document library that need to be approved. A Power Automate flow is included to request sign-off (and to launch that flow directly from the view). This format provides a better visual indication of where documents are in the approval process.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-borderColor-neutralLight" }, "style": { "box-sizing": "border-box", "width": "100%", "border-width": "1px", "border-style": "solid", "padding": "0 0 0 20px", "margin-bottom": "10px", "align-items": "stretch" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px", "display": "flex", "flex-wrap": "wrap" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px", "box-sizing": "border-box", "padding": "10px" }, "children": [ { "elmType": "button", "attributes": { "class": "ms-fontSize-xl" }, "style": { "line-height": "1.5em", "margin-bottom": "1em", "border": "0", "padding": "0px", "color": "#0077ff", "background-color": "transparent", "cursor": "pointer" }, "txtContent": "[$FileLeafRef]", "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-fontSize-s" }, "style": { "line-height": "1.5em", "margin-bottom": "8px" }, "txtContent": "='Modified by ' + [$Editor.title] + ', ' + toLocaleString([$Modified])" }, { "elmType": "div", "attributes": { "class": "='ms-fontSize-s ms-fontWeight-bold ' + if([$SignOffDueDate] > @now, 'ms-fontColor-redDark', 'ms-fontColor-neutralPrimary')" }, "style": { "visibility": "=if([$SignOffDueDate], '', 'collapse')", "line-height": "1.5em", "margin-bottom": "8px" }, "txtContent": "='Due date ' + toLocaleDateString([$SignOffDueDate])" } ] }, { "elmType": "div", "style": { "flex": "0 0 170px", "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "button", "customRowAction": { "action": "editProps" }, "txtContent": "Edit Properties", "attributes": { "class": "sp-row-button ms-bgColor-neutralLighter ms-fontWeight-semibold" }, "style": { "width": "145px", "height": "32px", "margin": "20px 0 10px 0" } }, { "elmType": "button", "customRowAction": { "action": "executeFlow", "actionParams": "{\"id\": \"2d8001c0-31f4-48e5-90ab-1804fa33bb43\"}" }, "txtContent": "Request Sign Off", "attributes": { "class": "sp-row-button" }, "style": { "width": "145px", "height": "32px", "margin": "10px 0", "display": "=if([$RequiresSignOff] && [$SignOffStatus] != 'Pending' && [$SignOffStatus] != 'Approved', '', 'none')" } } ] } ] }, { "elmType": "div", "attributes": { "class": "=if([$RequiresSignOff], if([$SignOffStatus], if([$SignOffStatus] == 'Pending', 'ms-bgColor-yellow', if([$SignOffStatus] == 'Approved', 'ms-bgColor-green', 'ms-bgColor-redDark')), 'ms-bgColor-neutralLighter'), 'ms-bgColor-neutralLighter') + ' ' + if([$SignOffStatus] == 'Pending', 'ms-borderColor-redDark', '')" }, "style": { "flex": "0 0 173px", "display": "flex", "justify-content": "center", "align-items": "center", "border-top-width": "=if([$SignOffStatus] == 'Pending', '5px', '0')", "border-top-style": "solid", "color": "=if([$SignOffStatus] == 'Pending', 'black', if([$SignOffStatus] == 'Approved', 'white', 'white'))" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-fontSize-l" }, "style": { "display": "=if([$RequiresSignOff], 'none', '')", "text-align": "center", "color": "black" }, "txtContent": "No sign-off needed" }, { "elmType": "div", "style": { "display": "=if([$RequiresSignOff], 'inline-block', 'none')", "text-align": "center" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-fontSize-l" }, "style": { "line-height": "1.5em" }, "txtContent": "[$SignOffStatus]" }, { "elmType": "div", "style": { "display": "=if([$SignOffStatus], '', 'none')", "font-size": "=if([$SignOffStatus] == 'Approved' || [$SignOffStatus] == 'Rejected', '80px', '30px')", "line-height": "40px", "color": "=if([$SignOffStatus] == 'Pending', 'black', if([$SignOffStatus] == 'Approved', 'white', 'white'))" }, "attributes": { "iconName": "=if([$SignOffStatus] == 'Pending', 'Clock', if([$SignOffStatus] == 'Approved', 'StatusCircleCheckmark', 'StatusCircleErrorX'))" } } ] } ] } ] } }

From the contributor

How to use this sample

Summary

screenshot of the sample

View requirements

The view must include these columns:

Standard columns

LinkFilename
Editor
Modified

Custom columns

Column Name	Type
RequiresSignOff	Boolean
SignOffDueDate	DateTime
SignOffStatus	Text

Provisioning

This sample includes a site script (update-documents.json) that creates the required site columns, the Document Library, and a new view named All Documents - customized in the Document Library that contains all the required columns.

See the SharePoint site design and site script overview article to learn how to use the site script.

Flow Integration

Install the Flow

Import the Flow (requestsignoff.zip), which is basically the same Flow as the out of the box Request Sign Off Flow, but its ID is knowable and it can be modified.
Rename the Flow.
Find all the places where the Flow refers to the original site and Document Library, and change it to the site / Document Library in your environment.

Note: Be sure to use the Document Library GUID, not the name.

You will make these updates in 5 places:

For a selected item node
Get item node
Update item node Update Sign Off Status: Pending
Update item node Update Sign Off Status: Approved
Update item node Update Sign Off Status: Rejected

Save the Flow.
Copy the Flow ID.

Update the Flow ID in the View Formatter JSON

The View Formatter JSON (request-sign-off.json) defines a button labeled Request Sign Off that executes a Flow. To make it execute the Flow you just imported, follow these steps.

Replace the actionParams id value (shown below) with the ID of the Flow you imported and configured in the steps above.

                "elmType": "button",
                "customRowAction": {
                  "action": "executeFlow",
                  "actionParams": "{\"id\": \"3fee4531-d1c5-4e3d-9e4a-8bdecd81257b\"}"
                },
                "txtContent": "Request Sign Off",
                "attributes": {
                  "class": "sp-row-button"
                },

Sample

Solution	Author(s)
request-sign-off.json	Lincoln DeMaris, Todd Baginski, Justin So, Tyler Lui

Version history

Version	Date	Comments
1.0	October 9, 2018	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

None