Survey Toolbox customization


                        



const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
//Add all countries question into toolbox
creator.toolbox.addItem({
        name: "countries",
        isCopied: true,
        iconName: "icon-default",
        title: "All countries",
        json: { "type": "dropdown",  placeholder: "Select a country...", choicesByUrl: { url: "https://surveyjs.io/api/CountriesExample"   } }
});

//Change the default choices for "checkbox", "radiogroup" and "dropdown" questions
var newDefaultChoices =  ["My Choice 1", {value: 2, text: "Show text not value"}];

//Change default choices only
creator.toolbox.getItemByName("checkbox").json.choices = newDefaultChoices;
creator.toolbox.getItemByName("radiogroup").json.choices = newDefaultChoices;
creator.toolbox.getItemByName("dropdown").json.choices = newDefaultChoices;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Toolbox customization, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/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>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

<script type="text/babel" 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.

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.

Survey Toolbox customization

Question Toolbox API

Limit the default question types

Question Toolbox functions

Question Toolbox Item properties

Why We Use Cookies

Tell Us What You Think