How to Create a Link that Opens to a Specific Tab Item

This article will demonstrate how to create a clickable link that opens to a specific Tab item:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Part 1: Create and Copy the Tab URL
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Edit the Tabs Design Element
    • Step 3: Enable Preserve Active Tab
    • Step 4: Save and Publish
    • Step 5: Copy Tab URL
  • Part 2: Paste Tab URL
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Edit Design Element
    • Step 3: Paste URL
    • Step 4: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a Tabs Design Element on your page:

• You must already have a Design Element that has the Link option on your SharePoint page:

Interactive Tutorial

Start the interactive tutorial to learn how to create a link that opens to a specific tab item:

NOTEIt’s best to complete Part 1 after you've finished designing the page that contains the tabs. Once you add other elements to your page, the link to your tab might change, since it is auto-generated at runtime.

Step-by-step Tutorial

The steps have been divided into two parts. Follow the steps closely to successfully create a link that opens to a specific tab item:

Part 1: Create and Copy the Tab URL

NOTEIt’s best to complete Part 1 after you've finished designing the page that contains the tabs. Once you add other elements to your page, the link to your tab might change, since it is auto-generated at runtime.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page where your Tabs is located and click Edit:

• Close the Toolbox:

• Click the Edit Properties icon:

Step 2: Edit the Tabs Design Element

NOTEBefore proceeding, make sure you already have a Tabs Design Element on your page. If you don’t have it yet, check out How to Customize the Tabs Design Element.

• Click the Tabs tag:

• Select the cogwheel icon:

Step 3: Enable Preserve Active Tab

• Click the next icon:

• Go to the Advanced tab.
• Enable Preserve Active Tab:

• Click the green check mark.

Step 4: Save and Publish

• Save your changes:

• Publish your page:

Step 5: Copy Tab URL

• Select the tab item that you want to link to. You’ll notice a change in your URL. This is the URL generated for the specified tab item. Copy it:

That’s it! You now have the Tabs URL. You can proceed to Part 2.

Part 2: Paste Tab URL

Step 1: Edit the ShortPoint Web Part

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

• Close the Toolbox:

• Click the Edit Properties icon:

Step 2: Edit Design Element

NOTEBefore proceeding, make sure you have a Design Element that allows linking. In our case, we’ll use the Button Design Element: 

• Click the EasyPass tag of the Design Element:

• Select the cogwheel icon:

Step 3: Paste URL

• Look for the Link option and paste the Tab URL:

NOTEThe location of the link option depends on the Design Element you’re using.

• Click the green check mark.

Step 4: Save

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

• Save your changes:

• Publish your page:

Congratulations! You now have a clickable link that redirects to a specific tabs item:

Related articles:

• How to Create an Anchor Link that Opens to a Specific Accordion Item
• How to Add a Search Box to Your SharePoint Page Using the Code Design Element
• How to Display Dynamic Greetings on Your SharePoint Page Using the Code Design Element