Survey Toolbox categories


                        



const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
        creator.toolbox.addItem({
                name: "countries",
                isCopied: true,
                iconName: "icon-default",
                title: "All countries",
                category: "Custom",
                json: {
                    "type": "dropdown",
                    placeholder: "Select a country...",
                    choicesByUrl: {
                        url: "https://surveyjs.io/api/CountriesExample"
                    }
                }
            });
        creator.toolbox.changeCategories([
          {
            name: "image",
            category: "Read-only"
          },
          {
            name: "html",
            category: "Read-only"
          },
          {
            name: "expression",
            category: "Read-only"
          },
          {
            name: "dropdown",
            category: "Select"
          },
          {
            name: "checkbox",
            category: "Select"
          },
          {
            name: "radiogroup",
            category: "Select"
          },
          {
            name: "rating",
            category: "Select"
          },
          {
            name: "imagepicker",
            category: "Select"
          },
          {
            name: "paneldynamic",
            category: "Panels"
          },
          {
            name: "ranking",
            category: "Select"
          },
          {
            name: "panel",
            category: "Panels"
          },
          {
            name: "paneldynamic",
            category: "Panels"
          },
          {
            name: "matrix",
            category: "Matrix"
          },
          {
            name: "multipletext",
            category: "Matrix"
          },
          {
            name: "matrixdropdown",
            category: "Matrix"
          }, {
            name: "matrixdynamic",
            category: "Matrix"
          }
        ]);
        creator.showSidebar = false;
        creator.toolbox.forceCompact = false;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Toolbox categories, 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

By default there is one category in the Toolbox (General) and its title is not shown.

You may change the category of the default question types by calling changeCategory function

creator.toolbox.changeCategory("panel", "Panels");
creator.toolbox.changeCategory("paneldynamic", "Panels");

The better way is to use changeCategories function. It will rebuild toolbox presentation model just one time:

creator.toolbox.changeCategories([{ name: "panel", category: "Panels" }, { name: "paneldynamic", category: "Panels" }, { name: "matrix", category: "Matrix" }]);

You may change the name of the default (General) category as any other localizable string. Please make sure to run this code before creating the Editor.

SurveyCreator.defaultStrings.ed.toolboxGeneralCategory = "Common";

Survey Toolbox categories

Question Toolbox API

Why We Use Cookies

Tell Us What You Think