Survey Creator Toolbox Categories


                        

// Rename the General category
const translations = SurveyCreator.localization.getLocale("");
translations.ed.toolboxGeneralCategory = "Others";

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.changeCategories([
  {
    name: "image",
    category: "Read-only"
  },
  {
    name: "html",
    category: "Read-only"
  },
  {
    name: "expression",
    category: "Read-only"
  },
  {
    name: "dropdown",
    category: "Choice-based"
  },
  {
    name: "checkbox",
    category: "Choice-based"
  },
  {
    name: "radiogroup",
    category: "Choice-based"
  },
  {
    name: "imagepicker",
    category: "Choice-based"
  },
  {
    name: "paneldynamic",
    category: "Panels"
  },
  {
    name: "panel",
    category: "Panels"
  },
  {
    name: "paneldynamic",
    category: "Panels"
  },
  {
    name: "multipletext",
    category: "Text Input"
  },
  {
    name: "text",
    category: "Text Input"
  },
  {
    name: "comment",
    category: "Text Input"
  },
  {
    name: "matrix",
    category: "Matrixes"
  },
  {
    name: "matrixdropdown",
    category: "Matrixes"
  }, {
    name: "matrixdynamic",
    category: "Matrixes"
  }
]);


    // Move the Others category to the end
    const categories = creator.toolbox.categories;
    const othersIndex = categories.findIndex((category) => category.name === "Others");
    const othersCategory = categories.splice(othersIndex, 1)[0];
    categories.push(othersCategory);

    creator.toolbox.allowExpandMultipleCategories = true;
    creator.showSidebar = false;
    creator.toolbox.forceCompact = false;


                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Categorize Toolbox Elements of your Survey Creator | Reactjs 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>

The Toolbox is a UI element that displays available question and panel types. To add a question or panel to your survey, simply click it in the Toolbox or drag and drop the desired survey element onto the design surface. This example shows how to arrange questions and panels in the Toolbox into multiple categories.

Note that the Toolbox displays categories only in full display mode. This mode is enabled automatically when Survey Creator has sufficient width. If you want to use the full mode at all times, set the forceCompact property to false.

Create Categories

To organize Toolbox items into categories, call the changeCategories() method. It accepts an array of objects with the following fields:

  • name
    The name of the item that should be grouped. Refer to the getType() method description for a list of accepted values.

  • category
    A category for this item.

Ungrouped items fall into the General category. You can use localization capabilities to change its caption. In this demo, the General category is renamed to "Others". Note that the code that changes the caption goes before the code that instantiates Survey Creator.

Reorder Categories

Created categories are stored in the categories array of the Toolbox. You can access and modify this array. For example, code in this demo moves the "Others" (General) category to the end.

Control the Behavior

The Toolbox also has the following properties to control the behavior of categories:

  • allowExpandMultipleCategories
    Allows users to expand more than one category at a time. If this property is false, the currently expanded category collapses when a user expands another category.

  • keepAllCategoriesExpanded
    Expands all categories. Users cannot collapse them.

Since these two properties are incompatible with each other, this example demonstrates only the allowExpandMultipleCategories property.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.