This article will demonstrate how to connect a Design Element to your Hub site navigation. This connection is beneficial if you want to create a navigation menu using ShortPoint Design Elements.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial:
  • Step 1: Edit your SharePoint page
  • Step 2: Switch to Grid Mode
  • Step 3: Connect your ShortPoint Element to ShortPoint REST API
  • Step 4: Enable Advanced Settings and Add Map Results
  • Step 5: Map Items to display
  • Step 6: Update and Save

Prerequisites

• You must have the latest version of ShortPoint installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have the Design Element on the page you want to use to connect.

Step-by-step Tutorial:

Follow the steps below to learn how to connect a Design Element to your Hub site navigation:

Step 1: Edit your SharePoint page

Go to the SharePoint page you want to use and click Edit:

Then, click the ShortPoint tag:

Select the pencil icon:

NOTEBefore proceeding, make sure you already have the Design Element you want to use to connect on your page. For example, we will use the Tiles Design Element for this tutorial:

Step 2: Switch to Grid Mode

Then, click the Switch to Grid Mode icon:

NOTEThe ShortPoint Connect feature is currently only available in Grid Mode.

Look for the ShortPoint Design Element you want to use and click the cogwheel icon:

Step 3: Connect your ShortPoint Element to ShortPoint REST API

Switch to the Connect tab:

Select REST API:

Copy the code below:

<Site Collection Url>/_api/web/HubSiteData

Paste the code  in the REST API URL field and Replace <Site Collection Url> with your site’s URL:

Step 4: Enable Advanced Settings and Add Map Results

Scroll down and toggle on Enable Advanced Settings:

Then, copy the code below:

var hubSiteData = JSON.parse(data.d.HubSiteData);
return hubSiteData.navigation;

Look for the Map Results field and paste the copied code:

Click Connect:

Step 5: Map Items to display

Navigate to the Items or Tiles tab (this will depend on the Design Element you used):

Then, delete all default content:

Click the link icon under the Title field and select Title:

Under the Link field, click the link icon and select Url:

NOTETo learn more about items mapping, check out ShortPoint Connect: Basic Tutorial.

In the Linking Options field, select the option you prefer:

NOTETo learn more about Linking Options, check out Types of Linking Options.

Step 6: Update and Save

Once done, click Update:

Click the eye icon to see your page in real-time:

Once satisfied, click Save to apply all your changes:

That’s it! You can now connect a ShortPoint Design Element to the Hub site navigation.

Related articles:

• How to Make the Counter Boxes Show the Total Number of Items in a SharePoint List
• How to Connect and Display a List of Subsites
• How to Connect ShortPoint Design Elements with SharePoint Document Sets