Manage Toolbox Subitems

Toolbox subitems are preconfigured templates grouped under a parent toolbox item. They appear when users hover over that item. Selecting a subitem adds a survey element with preset properties. This demo shows how to add custom subitems and manage built-in subitems. Hover over a toolbox item to view its subitems. For demonstration purposes, available toolbox items are limited to those that have subitems.

Subitems are unavailable in a compact toolbox. This demo sets forceCompact to false to keep the full toolbox visible.

To create a custom subitem, pass its configuration object to the addSubitem(subitem, index) method. Call this method on the parent toolbox item instance. The name property identifies the subitem, title supplies its label, and json defines the survey element to create. 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
    }
});

In addition, this demo includes the following custom subitems:

• Dynamic Panel – Tabbed UI and Carousel UI.
• Rating Scale – Customer Satisfaction Score and Net Promoter Score.
• Radio Button Group, Dropdown, and Single-Select Matrix – Agree – Disagree, Frequency, Understanding, Likely – Unlikely, and Yes / No.

If you want to remove a specific subitem, call the removeSubitem(subitem) method on a toolbox item instance. The following list contains the predefined subitems available by default:

• Rating Scale – "labels", "stars", "smileys"
• Single-Line Input – "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text-default", "time", "url", "week"

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

You can also remove all subitems from a toolbox item by calling the clearSubitems() method:

// Remove all subitems from 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;