LiveTiles Intranet Hub

LiveTiles Intranet Hub

  • Hub
  • Workspaces
  • Metadata
  • Governance
  • What's New

›Guides

Getting Started

  • Overview
  • Architecture
  • Installation

    • Microsoft 365
    • SharePoint 2019
  • Upgrade
  • Configuration

Guides

  • Hub
  • Multiple JSON Configuration Files
  • Theming
  • Custom Styling
  • Navigation
  • Matrix
  • Search
  • People Search
  • Page
  • Layout
  • Footer
  • Multi Language
  • Data Aggregation
  • Keyboard Shortcuts
  • SharePoint Integration
  • Custom Code
  • Notifications
  • List Items Grouping
  • Multi Content Type Item Template
  • Everywhere Panel
  • Everywhere Panel SP2019
  • Everywhere Panel Manager
  • Everywhere Panel Audience Target
  • MegaMenu Manager
  • JSON GUI Editor
  • Coveo Hosted Search Page
  • Mobile Configuration

Widgets

  • Tabs Widget
  • Hero Widget
  • Weather Widget
  • User Widget Zones

Web Parts

  • Reach News Web Part
  • Reach Posts Web Part
  • Reach Events Web Part
  • Content Items Web Part
  • Markup Web Part
  • Schedule Web Part
  • Slider Web Part
  • Timezone Web Part

Data Connectors

  • SharePoint Search
  • SharePoint List
  • Microsoft Graph
  • Microsoft Outlook
  • Web APIs
  • Microsoft Search
  • Coveo Search Data Provider

Navigation

Overview

LiveTiles Intranet Hub provides a well organized navigation, which helpes the user to access the desired places quickly and prevents them to get lost in Microsoft 365. The navigation is located in the header and consists of top navigation nodes with each having its own mega flyout associated.

Overall Availability

The navigation of LiveTiles Intranet Hub can be integrated all over in SharePoint Online tenant. You can achieve that by adding the LiveTiles Intranet Hub app to the sites, where the navigation should be integrated.

Structure

Each mega flyout of a top node is structered in to the following hierarchical levels:

  • Page
  • Group
  • Link

Megamenu

Inline Editor

The configuration of the megamenu can be done via a comfortable inline configuration editor. In this editor you can define new nodes and the elements of the mega flyout. You can even arrange the elements via drag and drop. You can access the editor via the action menu by clicking on Edit Menu.

Megamenu

Multi-language Support

All the texts of the elements in the megamenu can be defined in mulitple languages. You can even define separate URLs for the links in case the links point to different pages for each language.

Top Navigation Nodes Icons

The top navigation nodes can be rendered in different ways depending on the device you access the application with. On desktop you can choose between displaying only text, an icon or both text and icon while on mobile you have the choice of rendering either only text or text and icon.

The configuration is done on a per-node basis within each node's style property. On the iconUrl property you can specify the URL of the icon. If this is omitted, only the node title will be rendered.

The render mode can be specified on the renderMode property for both mobile and web on the corresponding sub-properties, mobile and web respectively. The accepted values for render modes can be found by looking up the enums MobileMegaMenuRootNodeTitleRenderMode and WebMegaMenuRootNodeTitleRenderMode in the reference documentation.

A guide to specifying the render mode:

  • in order to render the text only you only need to specify the value text on the renderMode property. You don't need to specify anything for the iconUrl property.
  • in order to render the text and icons you need to specify the value textandicon on the renderMode property together with the URL of the icon on the iconUrl property.
  • in order to render the icon only you need to specify the value icon on the renderMode property together with the URL of the icon on the iconUrl property. This render mode is not available on mobile.

Desktop rendering options example:

Megamenu

Mobile text and icon rendering option example:

Megamenu

Hyperlink Interception

By default on a modern page in SharePoint when a hyperlink is clicked, navigation to the page is achieved via a page router to avoid full refresh of the screen. Click here for more information

You can control weather the page will make a full refresh from a link clicked inside the menu by setting an optional feature flag in your Hub Config.

"features": {
    ...
    "megaMenu": {
      "dataInterception": "off"
    }
  }

Note: This dataInterception property is by default "on"

Top Navigation Nodes Styling

Top navigation nodes can be styled with custom colors for the background and the text. This can be done via the global config by specifying the desired color combination for each root node under the style optional property.

For defining the colour of an active megamenu child item, add this configuration inside the styles node from the Hub JSON Config Editor:

Before applying the JSON configuration, the active elements will have a default color such as this:

Active-Element-Before-Colour

     "colors": {
      "component": {
        "header": {
          "megaMenu": {
            "highLightText": "HEX CODE for desired colour"
          }
        }
      }
    }

After applying the JSON configuration, the active elements will look like this:

Active-Element-After-Colour

The configuration used for this example is this:

     "styles": {
    "colors": {
      "component": {
        "header": {
          "megaMenu": {
            "highLightText": "#FF00E8"
          }
        }
      }
    }
  }
← Custom StylingMatrix →
  • Overview
  • Overall Availability
  • Structure
  • Inline Editor
  • Multi-language Support
  • Top Navigation Nodes Icons
  • Hyperlink Interception
  • Top Navigation Nodes Styling
Docs
HubWorkspacesMetadataGovernance
References & Samples
Hub ReferenceHub ConfigsWorkspaces ReferenceWorkspaces ConfigsMetadata Configs
More
What's NewLiveTiles Products
LiveTiles
Copyright © 2023 LiveTiles