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>
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" }]);
SurveyCreator.defaultStrings.ed.toolboxGeneralCategory = "Common";
Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.
We'd really appreciate your feedback.
Start the SurveyApproximate time to complete: 2 min.