Documentation Docs
Documentation Docs

Toolbox Customization

The Toolbox contains available question and panel types. Users can click questions and panels or drag and drop them onto the design surface to add them to the survey. This help topic describes how you can customize the Toolbox.

Survey Creator - Toolbox in full mode

Full and Compact Modes

The Toolbox supports full mode (illustrated above) and compact mode. In compact mode, element names are hidden. To see an individual element name, a user should move the mouse pointer over the element icon.

Survey Creator - Toolbox in compact mode

The Toolbox switches between the modes automatically based on available width. Specify the forceCompact property if you want the Toolbox to always use a specific mode:

// Compact mode
creator.toolbox.forceCompact = true;
// Full mode
creator.toolbox.forceCompact = false;

You can also use the isCompact property to find out whether the Toolbox is currently in compact mode:

console.log(creator.toolbox.isCompact);

View Demo

Limit Available Question and Panel Types

All available question and panel types are listed in the getType() method description. If you need to show only a part of these types, specify them in the Survey Creator's questionTypes array:

const creatorOptions = {
    questionTypes: ["text", "checkbox", "radiogroup", "dropdown"]
};

const creator = new SurveyCreator.SurveyCreator(creatorOptions);

// In Vue and modular applications:
import { SurveyCreator } from "survey-creator-knockout";
const creator = new SurveyCreator(creatorOptions);
// In React:
import { SurveyCreator } from "survey-creator-react";
const creator = new SurveyCreator(creatorOptions);
// In Angular:
import { SurveyCreatorModel } from "survey-creator-core";
const creator = new SurveyCreatorModel(creatorOptions);

View Demo

Group Toolbox Items by Categories

The compact Toolbox does not display categories.

To group Toolbox items, call the changeCategories() method. It accepts an array of objects with the following fields:

  • name
    The name of the item that should be grouped. Refer to the getType() method description for a list of accepted values.

  • category
    A category for this item.

The following code places the Panel and Panel Dynamic types into the Panels category and the Matrix, Matrix Dropdown, and Matrix Dynamic types into the Matrixes category:

creator.toolbox.changeCategories([
    { name: "panel", category: "Panels" }, 
    { name: "paneldynamic", category: "Panels" }, 
    { name: "matrix", category: "Matrixes" },
    { name: "matrixdropdown", category: "Matrixes" },
    { name: "matrixdynamic", category: "Matrixes" }
]);

View Demo

Ungrouped items fall into the General category. You can use localization capabilities to change its caption. If your application does not employ modules, use the following code:

<script src="https://unpkg.com/survey-creator-core/survey-creator-core.i18n.min.js"></script>
const translations = SurveyCreator.editorLocalization.getLocale("");
translations.toolboxCategories["general"] = "Common";

In modular applications, use the code below:

import "survey-creator-core/survey-creator-core.i18n";
import { editorLocalization } from "survey-creator-core";
const translations = editorLocalization.getLocale("");
translations.toolboxCategories["general"] = "Common";

The following properties control the behavior of categories:

creator.toolbox.allowExpandMultipleCategories = true;
creator.toolbox.keepAllCategoriesExpanded = false;

Customize Predefined Toolbox Items

To customize a predefined Toolbox item, pass its type as an argument to the getItemByName(itemName) method. This method returns the item's configuration object. Change the properties of this object to customize the Toolbox item. For example, the following code uses the json property to override predefined choices for a Dropdown question:

creator.toolbox
  .getItemByName("dropdown")
  .json
  .choices = [
    { text: "Option 1", value: 1 },
    { text: "Option 2", value: 2 },
    { text: "Option 3", value: 3 }
  ];

View Demo

Manage Toolbox Subitems

Toolbox items can have nested items, or "subitems". They appear when users hover over a toolbox item. Subitems help you create more specific configurations of a broader survey element type and group them. For example, the Single-Line Input toolbox item includes a number of subitems that create Single-Line Input questions with different inputType property values.

Survey Creator: Toolbox subitems

To create a custom subitem, pass its configuration object to the addSubitem(subitem, index) method. Call this method on a toolbox item instance to which you want to add the subitem. For instance, the following code adds a "Limited to 280 characters" subitem to the Long Text toolbox item:

import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = { ... };
const creator = new SurveyCreatorModel(creatorOptions);

const longTextItem = creator.toolbox.getItemByName("comment");
longTextItem.addSubitem({
    name: "limitedLongText",
    title: "Limited to 280 characters",
    json: {
        type: "comment",
        maxLength: 280
    }
});

View Demo

If you want to remove a specific subitem, call the removeSubitem(subitem) method on a toolbox item instance. You can also remove all subitems of a toolbox item by calling the clearSubitems() method:

// Remove the Labels subitem of the Rating Scale toolbox item
const ratingScaleItem = creator.toolbox.getItemByName("rating");
ratingScaleItem.removeSubitem("labels");

// Remove all subitems of the Single-Line Input toolbox item
const singleLineInputItem = creator.toolbox.getItemByName("text");
singleLineInputItem.clearSubitems();

If you want to completely deactivate the subitems feature, disable the Toolbox's showSubitems property:

creator.toolbox.showSubitems = false;

Add a Custom Toolbox Item

Since the Toolbox is meant to contain question and panel types, to add a new element, you need to create a custom question or panel type. Refer to the following help topics for detailed instructions:

Send feedback to the SurveyJS team

Need help? Visit our support page

Copyright © 2024 Devsoft Baltic OÜ. All rights reserved.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.