Survey Toolbox customization

Please read the license agreement if you want to use Survey Creator widget in your app(s). Visit our buy page to find out developer license(s) price.
Fully control your Survey Questions Toolbox

                        var creatorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
//Add all countries question into toolbox
creator.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/v2/all"   } }
});



                    
<!DOCTYPE html>
<html>
<head>
    <title>Fully control your Survey Questions Toolbox, Survey Creator Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.6/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/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></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/1.1.6/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.6/survey-creator.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>

Question Toolbox API

Limit the default question types

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

Question Toolbox functions

From version 0.12.0 a new creator.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:

creator.toolbox.addItem(itemAsJson)