Retail Accounts | List Formatting Gallery

Retail Accounts

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to manage retail stores. This sample defines a custom view to bring focus to the status of store locations. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and Bing maps.

{ "$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": { "border-top-width": "1px", "border-top-style": "solid", "width": "100%", "padding": "0 0 0 20px", "flex-wrap": "wrap", "align-items": "flex-start", "justify-content": "space-between" }, "children": [ { "elmType": "div", "style": { "flex": "1 0 300px", "margin": "10px" }, "children": [ { "elmType": "button", "attributes": { "class": "ms-fontSize-xl ms-fontColor-themePrimary" }, "style": { "border": "0", "padding": "0", "margin-bottom": "0.5em", "background-color": "transparent", "cursor": "pointer", "line-height": "1.5em", "overflow": "hidden", "text-align": "left" }, "customRowAction": { "action": "defaultClick" }, "txtContent": "[$Title]" }, { "elmType": "div", "attributes": { "class": "ms-fontSize-mPlus" }, "style": { "line-height": "1.5em" }, "children": [ { "elmType": "span", "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "[$Account_x0020_Manager.title]" }, { "elmType": "span", "txtContent": ", Account Manager" } ] }, { "elmType": "div", "attributes": { "class": "ms-fontSize-m" }, "style": { "line-height": "1.5m" }, "txtContent": "[$Location.DisplayName]" } ] }, { "elmType": "div", "style": { "flex": "0 0 539px", "width": "504px", "margin": "10px", "display": "flex", "justify-content": "space-between" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 173px", "height:": "108px" }, "children": [ { "elmType": "img", "attributes": { "class": "ms-borderColor-neutralLighter", "src": "='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=171,106&pp=' + if([$Location.Coordinates.Latitude], [$Location.Coordinates.Latitude], '0') + ',' + if([$Location.Coordinates.Longitude], [$Location.Coordinates.Longitude], '0') + '&key=Am_p9LOyc3ij2sHWu5H7jFYq-2s4lNNwPDL8hwpZwzJSt5Ob-g0knurihcsFuuhF'" }, "style": { "border-width": "1px", "border-style": "solid", "height": "106px", "display": "=if([$Location.Coordinates], '', 'none')" } } ] }, { "elmType": "div", "attributes": { "class": "=if([$Holiday_x0020_Display_x0020_Read], 'ms-bgColor-green', 'ms-bgColor-redDark') + ' ms-fontSize-mPlus ms-fontColor-white ms-fontWeight-bold'" }, "style": { "flex": "0 0 173px", "height": "108px", "box-sizing": "border-box", "padding": "12px 10px", "text-align": "center" }, "children": [ { "elmType": "div", "style": { "line-height": "1.4em" }, "txtContent": "HOLIDAY DISPLAY READY" }, { "elmType": "div", "style": { "color": "#fff", "font-size": "60px", "line-height": "0.75em" }, "attributes": { "iconName": "=if([$Holiday_x0020_Display_x0020_Read], 'StatusCircleCheckmark', 'StatusCircleErrorX')" } } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "flex": "0 0 173px", "height": "108px", "text-align": "center" }, "children": [ { "elmType": "span", "attributes": { "class": "ms-fontSize-mPlus ms-fontWeight-bold" }, "style": { "line-height": "3em" }, "txtContent": "SALES TARGET" }, { "elmType": "span", "attributes": { "class": "ms-fontSize-su ms-fontWeight-light" }, "style": { "display": "inline-block", "line-height": "1.1429em", "vertical-align": "top", "text-align": "right" }, "txtContent": "='$' +Number([$Sales_x0020_Target])" } ] } ] } ] } }

From the contributor

How to use this sample

Summary

screenshot of the sample

View requirements

The view must include these columns:

Standard columns

LinkTitle
Location

Custom columns

Column Name	Type
Account_x0020_Manager	User
Sales_x0020_Target	Currency
Holiday_x0020_Display_x0020_Read	Boolean

Site Script

This sample includes a site script (create-list.json) that creates the required site columns, the Retail Accounts 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.

Bing Map

The View Formatter JSON (retail-accounts.json) uses the Bing Map Imagery REST API to display map images based on the values in the Location column.

Note: You will need your own Bing Maps key to display the maps in your own environment.

First, get a Bing Maps Key.

https://msdn.microsoft.com/en-us/library/ff428642.aspx
Then, replace the key querystring parameter value (the YOUR BING MAP API KEY placeholder shown in the code below) with your own Bing Maps key.

"elmType": "img",
"attributes": {
  "class": " ms-borderColor-neutralLighter",
  "src": "='https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=171,106&pp=' + if([$Location.Coordinates.Latitude], [$Location.Coordinates.Latitude], '0') + ',' + if([$Location.Coordinates.Longitude], [$Location.Coordinates.Longitude], '0') + '&key=YOUR BING MAP API KEY'"

Sample

Solution	Author(s)
retail-accounts.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