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 "Input type" property values. Hover over the Single-Line Input toolbox item to view these subitems. This demo shows how to add a custom toolbox subitem and explains how to manage built-in subitems. For demonstration purposes, available toolbox items are limited to those that have subitems.

Subitems are unavailable in a compact toolbox.

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:

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

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();

Toolbox subitems act like shortcuts for creating certain question configurations. Removing a subitem doesn't remove the associated properties from the Property Grid. If you need to prevent users from editing them, hide those properties explicitly.

You can completely deactivate the subitems feature by disabling the Toolbox's showSubitems property:

creator.toolbox.showSubitems = false;