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.
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();
If you want to completely deactivate the subitems feature, disable the Toolbox's showSubitems
property:
creator.toolbox.showSubitems = false;