Customize the Toolbar

Survey Creator's toolbar contains buttons that perform actions relevant to the active tab. For instance, the Designer tab allows users to undo and redo last operations, the Preview tab—change the device type and orientation, and the JSON Editor tab—import and export the survey JSON schema. This demo shows how to add a custom toolbar button that clears the survey on the design surface.

To configure a toolbar button, define an IAction object. Within it, you can set the button's unique ID, icon, title, and other parameters. You should also specify a function that this button will call and assign it to the action property. In this demo, the action function sets the Survey Creator's JSON property to an empty object, thus clearing the survey users configure.

import { Action } from "survey-core";

const clearSurveyAction = new Action({
    id: "clear-survey",
    title: "Clear Survey",
    showTitle: false,
    iconName: "icon-clear-24x24",
    action: () => {
        creator.JSON = {};
    }
});

Different tabs can have different toolbar buttons. To control the toolbar button visibility, use the IAction object's visible property. You can set it to a static Boolean value or to a ComputedUpdater instance if you need to calculate the property value dynamically. The ComputedUpdater constructor accepts a function that specifies the calculation rules. This function will be reevaluated each time a dependency property is changed. In this demo, the visible property depends on the Survey Creator's activeTab property:

const clearSurveyAction = new Action({
    // ...
    visible: new ComputedUpdater(() => creator.activeTab === "designer")
});

Survey Creator includes two toolbars: top (for the desktop view) and bottom (for the mobile view). You can add your custom button to both or only one of the toolbars:

// Add a custom button to the top toolbar
creator.toolbar.actions.push(clearSurveyAction);

// Add a custom button to the bottom toolbar
creator.footerToolbar.actions.push(clearSurveyAction);

Open the Code tab to view the code example in full.