SharePoint Integration

Overview

As of version 6.0.0 we provide some new ways to integrate with SharePoint and as of version 6.3.0 we introduced the concept of Scoped Settings that enable you to hide the header and footer. This can be usefull if for example all you want to use is the LiveTiles Intranet Hub Web Part.

Place a LiveTiles Intranet Hub Widget on SharePoint Page

To place a LiveTiles Intranet Hub widget on a SharePoint page you can edit the SharePoint page and add the LiveTiles Intranet Hub web part and use the same configuration you would use on the Hub Page. Please be aware that on the Hub Page the height of the Widget is defined by our grid. SharePoint uses a different concept where the web parts basically define their own height. You can specify the height of the LiveTiles Intranet Hub widget in the properties. Any valid CSS height value is supported, e.g. "500px" or "50%", etc.

Place a SharePoint Widget on the LiveTiles Intranet Hub Page

To place a SharePoint Widget on the LiveTiles Intranet Hub Page you can use the (SharePointWidgetConfig). Please note that this functionality is still in an experimental phase. Certain SharePoint widgets might not behave as expected. We provide a styles member on the config that accepts any valid CSS. You can use this to style the web part to fit your needs. Basically you need to configure the alias of the SharePoint web part as well as the data. To get hold of this information we recommend following approach:

  • Head over to a regular SharePoint modern page and place and configure the SharePoint web part you would like to add to the hub page.
  • Once that's done, save and reload the page. The web part will displayed.
  • Append maintenancemode=true to the URL of the current page and reload the page.
  • The SharePoint page will be displayed in a special mode where the web parts will not be rendered, but instead their technical details will be displayed. You can then copy Alias from the "Summary"-tab as well as the contents of the "Data"-tab.
  • Head over to the hub page, edit the page, add a new web part.
  • Choose configTypeKey widget_sharePoint and set alias and data to the values you copied before (see below sample).
  • Once you are done, you can delete the initial web part you created on the SharePoint page in case you don't need it anymore.
  • Please also note that the LiveTiles Intranet Hub is a classic SharePoint page. And not all modern web parts are supported on classic pages, so some of the them might not work when placed on a Hub page.

Sample Config

{
  "configTypeKey": "widget_sharePoint",
  "alias": "ContentRollupWebPart",
  "data": {},
  "styles": "background-color: red"
}

Configure visibility of LiveTiles Intranet Hub Header and Footer

In case you would like to hide the header and/or the footer on specific pages you can use Scoped Settings. You can specify an identifier using expressions and/or RegExes. If you omit an identifier, then it will always match. If you specify both an expression and a url on the same identifier, then both need to match. The scopedSettings-member is an array, the first setting that matches will be considered.

So, for example, a simple configuration that hides the header and footer on all pages would be:

"scopedSettings": [
  {
    "identifier": null,
    "settings": {
      "hideHeader": true,
      "hideFooter": true
    }
  }
]

Please note that this also hides the header and footer on the hub page. In case you do not want this, you could consider using following configuration:

"scopedSettings": [
  {
    "identifier": {
      "url": "https://mytenant.sharepoint.com/sitepages/hub.aspx"
    },
    "settings": {
      "hideHeader": false,
      "hideFooter": false
    }
  },
  {
    "identifier": null,
    "settings": {
      "hideHeader": true,
      "hideFooter": true
    }
  }
]

Configure visibility of the Everywhere Panel

In case you would like to hide the Everywhere Panel on specific pages you can use Scoped Settings. You can provide an identifier such as the url of the page that you want to target.

For example a configuration that hides the Everywhere Panel on the current site (all pages in the site) looks like this:

"scopedSettings": [
  {
    "identifier": null,
    "settings": {
      "hideEverywherePanel": true
    }
  }
]

In case you want to have a more dynamic approach and you want your panel to be seen on the hub page, on a specific page and not on the other pages, then take a look at this example:

"scopedSettings": [
  {
    "identifier": {
      "url": "https://mytenant.sharepoint.com/sitepages/hub.aspx"
    },
    "settings": {
      "hideEverywherePanel": false,
    }
  },
  {
    "identifier": {
      "url": "https://mytenant.sharepoint.com/sitepages/somepage.aspx"
    },
    "settings": {
      "hideEverywherePanel": false,
    }
  },
  {
    "identifier": null,
    "settings": {
     "hideEverywherePanel": true
    }
  }
]

The properties "hideHeader", "hideFooter" and "hideEverywherePanel" can be used together.

← Keyboard ShortcutsCustom Code →