Initial commit for Microsoft Ignite View Formatter samples (#96)

pnp · Oct 18, 2018 · c750332 · c750332
1 parent ce8155e
commit c750332
Show file tree

Hide file tree

Showing 15 changed files with 1,100 additions and 0 deletions.
diff --git a/view-samples/document-library/README.md b/view-samples/document-library/README.md
@@ -0,0 +1,98 @@
+# Document Library Sample
+
+## Summary
+
+SharePoint is at its best when using lightweight structure and process to organize content and keep things moving forward.  New to Document Libraries is an out of the box Flow that allows you to quickly request a member of your team to sign off on a document in a Dcument Library.  This sample defines a custom view to bring focus to the files that need to be approved.  It also provides a better visual indication of where documents are in the process and which ones require action.
+
+###Desktop and tablet view
+
+![Document Library Sample](images/document-library.jpg)
+
+## View requirements
+
+The view must include these columns:
+
+###Standard columns
+
+- LinkFilename
+- Editor
+- Modified
+
+###Custom columns
+
+Column Name|Type
+-----------|----
+RequiresSignOff | Boolean
+SignOffDueDate | DateTime
+SignOffStatus | Text
+
+## Site Script
+
+This sample includes a site script ([update-documents.json](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](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-overview) to learn how to use the site script.
+
+## Flow Integration
+
+### Install the Flow
+
+1.	**Import** the Flow ([requestsignoff.zip](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.
+2.	**Rename** the Flow.
+3.  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.
+
+  ![flow-changes.jpg](images/flow-changes.jpg)
+
+  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
+
+4. **Save** the Flow.
+5. Copy the **Flow ID**.
+
+### Update the Flow ID in the View Formatter JSON
+
+The View Formatter JSON ([card-format.json](card-format.json)) defines a button labeled Request Sign Off that executes a Flow.  To make it execute the Flow you just imported, follow these steps.
+
+1. Replace the **actionParams id value** (shown below) with the ID of the Flow you imported and configured in the steps above.
+
+````json
+                "elmType": "button",
+                "customRowAction": {
+                  "action": "executeFlow",
+                  "actionParams": "{\"id\": \"3fee4531-d1c5-4e3d-9e4a-8bdecd81257b\"}"
+                },
+                "txtContent": "Request Sign Off",
+                "attributes": {
+                  "class": "sp-row-button"
+                },
+````
+
+###Authors
+
+- Tyler Lui (Canviz) @TylerLu
+- Justin So (Canviz)
+- Todd Baginski (Microsoft MVP, Canviz) @TBag
+- Lincoln DeMaris (Microsoft) @ldemaris
+
+## 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
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-list-formatting/view-samples/document-library" />
diff --git a/view-samples/document-library/card-format.json b/view-samples/document-library/card-format.json
@@ -0,0 +1,187 @@
+{
+  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
+  "debugMode": true,
+  "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'))"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/view-samples/document-library/images/document-library-mobile.jpg b/view-samples/document-library/images/document-library-mobile.jpg
diff --git a/view-samples/document-library/images/document-library.jpg b/view-samples/document-library/images/document-library.jpg
diff --git a/view-samples/document-library/images/flow-changes.jpg b/view-samples/document-library/images/flow-changes.jpg
diff --git a/view-samples/document-library/requestsignoff.zip b/view-samples/document-library/requestsignoff.zip
diff --git a/view-samples/document-library/update-documents.json b/view-samples/document-library/update-documents.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "schema.json",
+  "actions": [
+    {
+      "verb": "createSiteColumn",
+      "fieldType": "Boolean",
+      "internalName": "RequiresSignOff",
+      "displayName": "Requires Sign Off",
+      "isRequired": false,
+      "group": "View Formatter Samples"
+    },
+    {
+      "verb": "createSiteColumn",
+      "fieldType": "DateTime",
+      "internalName": "SignOffDueDate",
+      "displayName": "Due Date",
+      "isRequired": false,
+      "group": "View Formatter Samples"
+    },
+    {
+      "verb": "createSiteColumn",
+      "fieldType": "Text",
+      "internalName": "SignOffStatus",
+      "displayName": "Sign Off Status",
+      "isRequired": false,
+      "group": "View Formatter Samples"
+    },
+    {
+      "verb": "createSPList",
+      "listName": "Documents",
+      "templateType": 101,
+      "subactions": [
+        {
+          "verb": "addSiteColumn",
+          "internalName": "RequiresSignOff",
+          "addToDefaultView": true
+        },
+        {
+          "verb": "addSiteColumn",
+          "internalName": "SignOffDueDate",
+          "addToDefaultView": true
+        },
+        {
+          "verb": "addSiteColumn",
+          "internalName": "SignOffStatus",
+          "addToDefaultView": true
+        },
+        {
+          "verb": "addSPView",
+          "name": "All Documents - customized",
+          "viewFields": [
+            "LinkFilename",
+            "Editor",
+            "Modified",
+            "RequiresSignOff",
+            "SignOffDueDate",
+            "SignOffStatus"
+          ],
+          "query": "",
+          "rowLimit": 100,
+          "isPaged": true,
+          "makeDefault": true
+        }
+      ]
+    }
+  ],
+  "version": 1
+}