Resource Catalog Sample

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to implement a marketing resources catalog. This sample defines a custom view to bring focus to the status of items in the resource catalog. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and profile pictures.

{ "$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": { "flex-direction": "column", "align-items": "stretch", "box-sizing": "border-box", "border-width": "1px", "border-left-width": "4px", "border-style": "solid", "border-left-color": "=if([$ResourceStatus] == 'Draft', '#FFB900', '#107C10')", "margin-bottom": "10px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "align-items": "center", "box-sizing": "border-box", "padding": "0 20px" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "div", "attributes": { "class": "ms-font-xl" }, "style": { "line-height": "1.5em", "color": "#0077FF", "margin": "8px 0" }, "txtContent": "[$Title]" }, { "elmType": "div", "attributes": { "class": "ms-font-m" }, "style": { "line-height": "1.5em", "margin": "8px 0" }, "children": [ { "elmType": "div", "style": { "display": "inline-block" }, "children": [ { "elmType": "span", "style": { "vertical-align": "bottom", "margin": "0 9px 0 1px" }, "attributes": { "iconName": "FolderList" } }, { "elmType": "span", "attributes": { "class": "ms-fontWeight-semibold" }, "style": { "margin-right": "18px" }, "txtContent": "[$ResourcePillar]" } ] }, { "elmType": "div", "style": { "display": "inline-block" }, "children": [ { "elmType": "span", "txtContent": "[$ResourceTechnology]" } ] } ] } ] } ] }, { "elmType": "div", "attributes": { "class": "ms-borderColor-neutralLight" }, "style": { "flex": "0 0 203px", "border-left-width": "1px", "border-left-style": "solid", "display": "flex", "justify-content": "space-evenly", "align-items": "center", "margin": "8px 0" }, "children": [ { "elmType": "img", "attributes": { "src": "= @currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$ResourceOwner.email] + '&UA=0&size=HR48x48'", "title": "[$ResourceOwner.title]" }, "style": { "border": "1px solid #808080", "border-radius": "50%", "left": "50%", "width": "48px", "height": "48px", "margin-left": "15px" } }, { "elmType": "span", "attributes": { "class": "ms-font-m" }, "style": { "display": "inline-block", "width": "90px", "text-align": "center" }, "txtContent": "[$ResourceOwner.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "ms-fontSize-sPlus ms-bgColor-neutralLighter" }, "style": { "padding": "4px 20px", "line-height": "1.5em", "display": "flex", "justify-content": "space-between" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "txtContent": "Last updated " }, { "elmType": "span", "txtContent": "=toLocaleDateString([$Modified])" } ] }, { "elmType": "div", "style": { "margin": "0 10px" }, "children": [ { "elmType": "span", "txtContent": "Status: " }, { "elmType": "span", "style": { "display": "inline-block" }, "txtContent": "[$ResourceStatus]" } ] }, { "elmType": "div", "children": [ { "elmType": "span", "txtContent": "Public: " }, { "elmType": "span", "style": { "display": "inline-block", "text-transform": "capitalize" }, "txtContent": "[$ResourcePublic]" } ] } ] } ] } }

From the contributor

How to use this sample

Summary

screenshot of the sample

View requirements

The view must include these columns:

Standard columns

LinkTitle
Modified

Custom columns

Column Name	Type
ResourcePillar	Text
ResourceTechnology	Text
ResourceStatus	Text
ResourcePublic	Boolean
ResourceOwner	User

Site Script

This sample includes a site script (create-list.json) that creates the required site columns, the Resource Catalog list, and a new view named All Items - customized in the list that contains all the required columns.

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

Sample

Solution	Author(s)
resource-catalog.json	Todd Baginski, Lincoln DeMaris, Chris McNulty, Tyler Lui, Justin So

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

Get this format