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, and JSON Editor tabs are visible, while the Logic, Translations, and Themes tabs are hidden. In this demo, the Logic tab is made visible by setting the showLogicTab 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 and Knockout, use techniques native to these libraries:

   • Component Registration in Vue 2
   • Component Registration in Vue 3
   • Component Registration in Knockout

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 addPluginTab() method on a SurveyCreatorModel instance to register a custom tab.