Customize the Tab Bar

SurveyJS offers the flexibility to add, remove, and modify tabs in its Form Builder UI to implement additional functionality as needed. In this example, we demonstrate how to manage built-in tabs and create a custom "Survey Templates" tab that enables survey authors to quickly load boilerplate surveys into Survey Creator for further customization.

Survey Creator includes six built-in tabs. To specify the visibility of each tab, use a dedicated configuration property:

• showDesignerTab
• showPreviewTab
• showJSONEditorTab
• showLogicTab
• showTranslationTab
• showThemeTab

By default, the Designer, Preview, Logic, and JSON Editor tabs are visible, while the Translations and Themes tabs are hidden. In this demo, the Translations tab is made visible by setting the showTranslationTab property to true.

If you want to add a custom tab to Survey Creator, follow the instructions below:

1. Implement a custom component that renders tab markup.
   In this demo, the component renders buttons that load different JSON schemas into Survey Creator.

2. Register your component under a custom name in the component collection.
   In HTML/CSS/JavaScript projects, register the component in ReactElementFactory as shown in the index.js file.
   In React, register the component in ReactElementFactory as shown in the SurveyCreatorComponent.jsx file.
   In Angular, register the component in AngularComponentFactory as shown in the survey-templates-tab.component.ts file.
   In Vue.js, use techniques native to this framework.

3. Configure a tab plugin.
   A tab plugin is an object that allows you to handle user interactions with a tab. The tab plugin object must specify the activate and deactivate functions. They are executed when users switch to or from the tab and allow you to handle and cancel the switch if necessary. In this demo, activate is empty, and deactivate always returns true, which means that they do not interfere with user interactions in any way.

4. Register a custom tab.
   Call the addTab(tabOptions) method on a SurveyCreatorModel instance to register a custom tab.