Runtime Toolbox Customization

Survey Creator users can change the collection of available toolbox items and add new ones at runtime. In this demo, questions on the design surface have a Save to Toolbox button. Clicking it saves the current question configuration as a new toolbox item. To manage toolbox items, click the Customize Toolbox button in the toolbar. This button opens a pop-up window where you can show and hide any toolbox items and delete unnecessary custom items. Please note that runtime toolbox customization is not supported out of the box and requires implementation by your development team, as shown in this example.

Perform the following steps to let users save custom question configurations to the Toolbox:

1. Create a toolbox item configuration object.
   A toolbox item configuration object should implement the IQuestionToolboxItem interface.

2. Add the custom item to the Toolbox.
   Access the QuestionToolbox instance using Survey Creator's toolbox property and call the addItem(item, index) method on this instance.

3. Add a UI element that saves custom toolbox items. You can use any UI element that suits your use case. This demo uses the onDefineElementMenuItems event to add a custom button (adorner) to each question on the design surface. A click on this button call a saveCustomItem function that creates a IQuestionToolboxItem object and adds it to the Toolbox.

Refer to the Code tab for a code example. Code lines that implement the steps above are marked with comments.

If you want to let users add and remove items from the Toolbox, follow the instructions below:

1. Create a survey that displays the dialog content.
   A pop-up dialog is built upon a regular survey from SurveyJS Form Library. The survey displays a list of predefined toolbox items using a Checkboxes question and allows users to delete unnecessary custom toolbox items using a Dynamic Matrix question. Implement a function that returns the survey JSON schema (view the createToolboxSetupSurveyJson() function in code listings).

2. Populate the survey with lists of predefined and custom toolbox items.
   Access an array of toolbox items, use it to prepare data arrays for the Checkboxes and Dynamic Matrix questions, and assign these arrays to the questions' value property (view the populateToolboxSetupSurvey() function).

3. Add a custom button that opens the dialog window.
   Configure the button by defining an IAction object and passing it the Action constructor. This button can be added to the Survey Creator toolbar.

4. Apply the changes made in the dialog window.
   When users click Apply in the dialog window, you need to clear the Toolbox, collect selected toolbox items, and add them to the Toolbox anew (view the showToolboxSetupPopup() function).