Toolbox customization
Fully control your Question Toolbox
Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
var editorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);
//Add all countries question into toolbox
editor.toolbox.addItem({
        name: "countries",
        isCopied: true,
        iconName: "icon-default",
        title: "All countries",
        json: { "type": "dropdown",  optionsCaption: "Select a country...", choicesByUrl: { url: "https://restcountries.eu/rest/v1/all"   } }
});
<!DOCTYPE html>
<html>
<head>
    <title>Fully control your Question Toolbox, SurveyJS Editor Example</title>
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="https://surveyjs.azureedge.net/0.12.34/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-json.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-json.js" type="text/javascript" charset="utf-8"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link href="https://surveyjs.azureedge.net/0.12.34/surveyeditor.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/0.12.34/surveyeditor.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    <div id="surveyContainer">
    <div id="editorElement"></div>
</div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}
.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}
.panel-footer {
    padding: 0 15px;
    border:none;
    text-align: right;
    background-color: #fff;
}

Question Toolbox API

Limit the default question types

Use questionTypes string array in the editorOptions parameter of Editor constructor. Only the given question types will appear in the Toolbox
var editorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);

Question Toolbox functions

From version 0.12.0 a new editor.toolbox property has been introduced. It provides the full control under Question Toolbox.
    Here is the list of available properties and functions:
  • jsonText � The string property. Allows to get and set all toolbox items as a string.
  • copiedJsonText � The string property. Allows to get and set copied questions as a string. End-user may add a queston into toolbox by clicking on 'Add to Toolbox' question menu item.
  • items � Returns the list of current toolbox items. Toolbox item properties are described below.
  • copiedItems � Returns the list of current copied toolbox items. End-user may add a queston into toolbox by clicking on 'Add to Toolbox' question menu item.
  • addItems(items[, clearAll]) � Add the list of toolbox items into toolbox. If an optional parameter clearAll is set to true, all previous items will be removed.
  • addCopiedItem(question � Add a question into Toolbox as a copied item.
  • addItem(item) � Add a new item into toolobx. If the item with the same name already exists, then replace it.
  • replaceItem(item) � Find an existing item by item.name and replace its properties. Return false if the item with the same name doesn't exist.
  • removeItem(name) � Find an existing item by name parameter and remove it.
  • clearItems() � Remove all items from the toolbox.
  • clearCopiedItems() - Remove all copied items from the toolbox.

Question Toolbox Item properties

{
    name: string;
    iconName: string;
    json: any;
    title: string;
    isCopied: boolean;
}
  • name � The required attribute. The unique item id. By default it is a question type.
  • iconName � The optional attribute. The icon name. The default value is 'icon-default'. It is 'icon-' + [question_type] for a standard Survey question.
  • json � The required attribute. A question is created based on this json. The json should has at least the 'type' string property. It used to create the correct question. All other properties are optional and you
  • title � The toolbox item title.
  • isCopied � true if the item is created by clicking on 'Add to Toolbox' question menu item.

Add/replace an item into toolbox:

editor.toolbox.addItem(itemAsJson)