Skip to main content

Customize tabs (SAP KC)


This document explains how to create your own tabs for the tabs interface that appears on certain MindTouch articles that act as navigation pages. After completing this how-to, you will have created your own tabs for the tabs interface.

custom_tabs.png

Your custom tabs include the custom labels you configure to appear on the tab itself, as well as custom content that appears when a user clicks the tab. You have three options for what appears when a user clicks a tab:

  • Using a page as a tab - You can create a regular MindTouch article and create static content to appear on the tab there. You specify the path of the MindTouch article to use and the system shows the contents of that page when the user clicks the tab.
  • Basing a tab on a new value for the Article Type field - Similar to how the User Guide Tabs interface shows the pages in the section with the Article Type of TopicHow-To, or Reference, you can create a new article type and create a tab that shows articles with that Article Type.
  • Basing a tab on a value for a new {{stag}} - Just as you can create new values for the Article Type field, you can create entirely new {{stags}} and values for those {{stags}}. Then you can create a tab that shows articles with a particular value in that {{stag}}.

* Custom tabs can be added to User Guides, though this is not available within Knowledge Bases.

Using a Page as a Tab

Use the following steps to create a custom tab where the content of the tab is the content of another MindTouch article:

  1. Create a page that contains the content you want to appear when the user clicks the tab. Note the URL of the page.
    Tip: If you don't want users to navigate to this page except as a tab, you can use the restrict access screen to make the page Semi-Private. Do not make the page Private, or else it won't appear on the tab to any users who don't have permission to find the page.
     
  2. Edit the page where you want to include the tabs interface.

    NOTE: If you expect to use the custom tabs in many pages, you can create a template and complete the steps in that template instead. Then you can insert the template on any page where you need the custom tabs. 
     
  3. Place your cursor where you want the tabs interface to appear and choose DekiScript from the Styles menu on the toolbar:
    insert_dekiscript.png
     
  4. Insert the following DekiScript:
template('MindTouch/IDF2/Views/Guide',{
    tabs:[     
        {title: "TabName", path: "/path"}
    ]
});

Where:

  • TabName is the word you want to appear on the tab
  • /path is the location of the page from step 1.
    Do not include the domain in this path. For example, if the URL of the page is https://example.mindtouch.us/tab, you would enter /tab here.

Basing a Tab on a New Value for the Article Type Field

Before you can complete this procedure, you must modify the values for the Article Type field. You must set at least one article to this article type before any information can appear in the tab. Use the following steps to create a custom tab where the content of the tab is determined by an article type that you created:

  1. Edit the page where you want to include the tabs interface.

    NOTE: If you expect to use the custom tabs in many pages, you can create a template and complete the steps in that template instead. Then you can insert the template on any page where you need the custom tabs. 
     
  2. Place your cursor where you want the tabs interface to appear and choose DekiScript from the Styles menu on the toolbar:

    insert_dekiscript.png
     
  3. Insert the following DekiScript:
template('MindTouch/IDF2/Views/Guide',{
    tabs:[    
        {title: "TabName", articletype: "tag:NewTag"}
    ]
});

Where:

  • TabName is the word you want to appear on the tab
  • NewType is the name of the custom article type you created previously during the Setting Up {{stagsup}} procedure.

NOTE: You can only tag articles that are contained in the guide your are working with. Remember the hierarchy: category > guide > article. 

Basing a Tab on a Value for a New {{stagup}}

Before you can complete this procedure, you must create a custom {{stag}}. You must set the {{stag}} of at least one article to the value in the code below before any information can appear in the tab.

Use the following steps to create a custom tab where the content of the tab is determined by the value in a {{stag}} that you created:

  1. Edit the page where you want to include the tabs interface.

    NOTE: If you expect to use the custom tabs in many pages, you can create a template and complete the steps in that template instead. Then you can insert the template on any page where you need the custom tabs. 
     
  2. Place your cursor where you want the tabs interface to appear and choose DekiScript from the Styles menu on the toolbar:

    insert_dekiscript.png
     
  3. Insert the following DekiScript:
template('MindTouch/IDF2/Views/Guide',{
tabs:[
{title: "TabName", articletype: "FieldName:FieldValue"}
]
});

Where:

  • TabName is the word you want to appear on the tab
  • FieldName is the name of the custom {{stag}} you created previously during the Setting Up {{stagsup}} procedure.
  • FieldValue is the value of the custom {{stag}} you created during the Setting Up {{stagsup}} procedure.

Mixing Tab Types

The examples on this page show just one custom tab apiece, but you can:

  • Include multiple of the same type of tab in a tabs interface
  • Mix the types of tabs in the same interface
  • Place custom tabs alongside the standard tabs 

For example, the following DekiScript creates a tabs interface with the three standard Topic, How To, and Reference tabs along with one each of the custom tab types listed in this article:

template('MindTouch/IDF2/Views/Guide',{
    tabs:[    
        {title: "Topic", articletype: "topic"},
        {title: "How To", articletype: "how-to"},
        {title: "Reference", articletype: "Reference"},
        {title: "Page", path: "/page"},
        {title: "NewArticleType", articletype: "article:NewType"},
        {title: "NewField", articletype: "FieldName:FieldValue"}
    ]
});

What's next

If you need further assistance with custom tabs, contact MindTouch Support.