LiveTiles Everywhere Panel SP2019

LiveTiles Everywhere Panel SP2019 enables admins to configure a sidebar that follows the users during their whole intranet experience. The sidebar contains different sections, each containing a set of web parts. The web parts can be arranged in a layout with a certain amount of columns.

Architecture

The Everywhere Panel SP2019 is deployed to a tenant as an own SharePoint Framework app that contains an application customizer for modern pages as well as a web part that can be placed on classic pages, for example to add the Everywhere Panel SP2019 to the hub page. There is no dedicated backend for this app, as the configuration is stored as an own node in the LiveTiles Intranet Hub config.

Installation

To install the Everywhere Panel SP2019 execute following steps:

  • Download the app
  • Add it to your global app catalog.
  • If the app is not globally deployed, then deploy the apps on all relevant site collections
  • If you would like to make it available on a hub page, please add the web part called "LiveTiles Everywhere Panel Launcher" to the hub page. Choose chrome type "None".
  • Please note that wherever this app is used, the LiveTiles Intranet Hub app needs to be installed as well (either globally or per site collection).

Configuration

Important Note

The LiveTiles Intranet Hub Widget configurations are not supported on the SP2019 version of the Everywhere Panel.

The configuration of the Everywhere Panel SP2019 is done via the LiveTiles Intranet Hub JSON Editor on a root node named "everywherePanel", which will contain the Everywhere Panel SP2019 configuration. In the "everywherePanel" node, each element consists of an object that contains two nodes: "settings" and "content".

  • settings contains the basic settings
  • content contains the content (sections, web parts, etc.) in the structured content format known from LiveTiles Intranet Enterprise

The web parts can be configured either using the actual config from SharePoint (this can be accessed by appending the maintenancemode=true query param to the page URL within SharePoint).

Structure

The configuration for each element in the "everywherePanel" node, should look like this:

{
"settings": {...},
"content": {...}
}

Config Sample

"everywherePanel": {
    "settings": {
      "EnabledModern": "true",
      "default": true,
      "UseThemesOnModern": "true",
      "WelcomePage": {
        "heading": "LiveTiles Everywhere Panel SP2019",
        "description": "",
        "smallLogo": "",
        "bigLogo": "",
        "brandingColor": "",
        "sectionLineType": "slope",
        "previewOnDesktop": "true"
      }
    },
    "content": {
      "children": [
        {
          "children": [
            {
              "children": [
                {
                  "children": [],
                  "hasMultipleParents": false,
                  "sortOrder": 1,
                  "translatedTitle": null,
                  "translatedValue": null,
                  "id": "1a4806e3-eafa-4cd8-92f4-563f8ff0bfa5",
                  "contentType": "powerpanel-component",
                  "title": "Trending Documents",
                  "value": {
                    "componentType": "CustomModernWebpart",
                    "webpartProperties": "{\r\n  \"id\": \"f92bf067-bc19-489e-a556-7fe95f508720\",\r\n  \"instanceId\": \"d5ac6512-b851-4bb9-9ca7-73a52d1a1973\",\r\n  \"title\": \"Document library\",\r\n  \"description\": \"Add a document library\",\r\n  \"serverProcessedContent\": {\r\n    \"htmlStrings\": {},\r\n    \"searchablePlainTexts\": {},\r\n    \"imageSources\": {},\r\n    \"links\": {}\r\n  },\r\n  \"dataVersion\": \"1.0\",\r\n  \"properties\": {\r\n    \"isDocumentLibrary\": true,\r\n    \"selectedListId\": \"a2f00b11-12fd-4b42-8e5b-d52e9cde2624\",\r\n    \"listTitle\": \"Documents\",\r\n    \"selectedListUrl\": \"/sites/gov-test/Shared Documents\",\r\n    \"webRelativeListUrl\": \"/Shared Documents\",\r\n    \"webpartHeightKey\": 4\r\n  }\r\n}",
                    "webpartId": "f92bf067-bc19-489e-a556-7fe95f508720",
                    "columnIndex": 1
                  }
                }
              ],
              "hasMultipleParents": false,
              "sortOrder": 1,
              "translatedTitle": null,
              "translatedValue": null,
              "id": "798a7c67-7fbd-43bb-b70f-a22749338cd5",
              "contentType": "Section",
              "title": "Section",
              "value": {
                "layout": {
                  "key": "'2columns66x33'",
                  "name": "2 columns 66x33"
                }
              }
            }
          ],
          "hasMultipleParents": false,
          "sortOrder": 0,
          "translatedTitle": null,
          "translatedValue": null,
          "id": "396e631c-b9c9-410d-b8b4-0b109af000c6",
          "contentType": "powerpanel-panel",
          "title": "My Documents",
          "value": {
            "widthType": "Large",
            "icon": {
              "icon": "ms-Icon ms-Icon--AnalyticsView",
              "color": "",
              "backgroundColor": ""
            },
            "label": "My Documents"
          }
        }
      ]
    }
  }

The value property of a SharePoint QuickLinks Web Part

"value": {
  "webpartProperties": "{\"id\":\"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd\",\"instanceId\":\"d1911627-c723-496a-96b5-d78447ca8853\",\"title\":\"Quick links\",\"description\":\"Links.\",\"audiences\":[],\"serverProcessedContent\":{\"htmlStrings\":{},\"searchablePlainTexts\":{\"items[0].title\":\"Example Domain\"},\"imageSources\":{},\"links\":{\"baseUrl\":\"\",\"items[0].sourceItem.url\":\"https://example.com\"},\"componentDependencies\":{\"layoutComponentId\":\"706e33c8-af37-4e7b-9d22-6e5694d92a6f\"}},\"dataVersion\":\"2.2\",\"properties\":{\"items\":[{\"sourceItem\":{\"itemType\":2,\"fileExtension\":\"\",\"progId\":\"\"},\"thumbnailType\":3,\"id\":1,\"description\":\"\",\"altText\":\"\"}],\"isMigrated\":true,\"layoutId\":\"Button\",\"shouldShowThumbnail\":true,\"imageWidth\":100,\"buttonLayoutOptions\":{\"showDescription\":false,\"buttonTreatment\":2,\"iconPositionType\":2,\"textAlignmentVertical\":2,\"textAlignmentHorizontal\":2,\"linesOfText\":2},\"listLayoutOptions\":{\"showDescription\":false,\"showIcon\":true},\"waffleLayoutOptions\":{\"iconSize\":1,\"onlyShowThumbnail\":false},\"hideWebPartWhenEmpty\":true,\"dataProviderId\":\"QuickLinks\"}}",
  "webpartId": "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
  "columnIndex": 1
}

The content JSON structure is a 3-level hierarchy with a hierarchical structure.

The following illustrates this concept:

{
  "children": [
    {
      // Level 1: Panel configuration
      "title": "Panel Title",
      "value": {
        // See `IPanelContentValue` below
      },
      "children": [
        {
          // Level 2: Section configuration
          "title": "Section Title",
          "value": {
            // See `ISectionContentValue` below
          },
          "children": [
            {
              // Level 3: Web part configuration
              "title": "Web Part Title",
              "value": {
                // See `IWebPartContentValue` below
              }
            },
            {
              // additional web parts...
            }
          ]
        },
        {
          // additional sections...
        }
      ]
    },
    {
      // additional panels...
    }
  ]
}

All levels of children have the following interface in common:

interface IContentElement<T> {
  id: string; // Uniquely identifies the element
  title: string;
  sortOrder: number;
  value: T;
}

This interfaces value T is individual to each level's specific configuration requirements.

Level 1: Panel configuration

interface IPanelContentValue {
  widthType: "Small" | "Medium" | "Large" | "Full screen" | "Custom";
  width: number; // width in pixels, used together with widthType: "Custom"
  label: string;
  icon: {
    icon: string; // string used in icon html class name (see https://uifabricicons.azurewebsites.net/ for all icons)
  };
}

Level 2: Section configuration

interface ISectionContentValue {
  layout:
    | "'1column100'"
    | "'2columns50x50'"
    | "'2columns33x66'"
    | "'2columns66x33'"
    | "'3columns33x33x33'";
  noWebpartBackground: boolean;
}

Level 3: Web Part configuration

interface IWebPartContentValue {
  webPartValue: ISharePointWebPartValue;
}

interface ISharePointWebPartValue {
  webPartProperties: string; // JSON stringified value of SharePoint Web Part Data object
  webPartId: string; // SharePoint Web Part Id
  columnIndex?: number;
}

Both SharePoint and Web Parts with their respective configuration.

SharePoint WebPart

Enter the SharePoint maintenance mode by appending the maintenancemode=true query param to the page URL within SharePoint, where you have configured a Web Part that you would like to display in the Everywhere Panel.

  1. webPartId: In the Summary tab, copy the Id of the Web Part and use it as value
  2. webPartProperties: Copy the whole content of the Data tab and stringify it as JSON string. (e.g. using the browser console JSON.stringify() command)

Layout Style Variants

The Everywhere Panel SP2019 currently comes with 2 layout variants. These variants define how the Everywhere Panel SP2019 is displayed within the viewport. The position is set using the layoutStyle key which excepts a value of either default or floating and is added to the settings object.

Example:

"everywherePanel": [
    {
      "settings": {
        "EnabledModern": "true",
        "default": true,
        "UseThemesOnModern": "true",
        "layoutStyle": "floating",
        "defaultIconColor": "",
        "defaultIconBackground": "",
        ...

  • Default - The default layout places the Everywhere Panel SP2019 from top the bottom to the left-hand side of the viewport. This position can then be toggled from left to right by clicking the available toggle icon at the base of the Everywhere Panel. The position is saved to local storage on the end user device.

    Default layout variant

  • Floating - The floating layout places the Everywhere Panel as a draggable floating panel to the left of the viewport. The position can be dragged to either the left, right or bottom of the viewport by dragging the drag icon at the base of the panel. Within each position, the panel can also be dragged vertically or horizontally within the set position. The position is saved to local storage on the end user device.

    Floating layout variant

← Everywhere PanelEverywhere Panel Manager →