Survey Creator Options

Show Designer Tab Show Test Survey Tab Show Logic Tab Show Translation Tab Show JSON Editor Tab Show Embeded Survey Tab


                        



const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );

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

Survey options

You may:

Show/hide survey tabs.
Show/hide options menu button and turn-on valid JSON generation
Limit question types you want to have in the toolbox
Show toolbox and property grid on the left, right, combine them or hide
Change the style of the property grid. Instead of categories show all properties in alphabet order where property name and editor are in one row.
Set the designer height

Show/hide survey tabs.

By default, "Survey Designer", "JSON Editor" and "Test Survey" are visible. "Embed Survey" tab is invisible. The following boolean properties in creatorOptions give you the control under them. Please note, that there is no property for "Survey Designer" tab. You can't make it invisible.

showJSONEditorTab - Show/hide JSON editor tab. It is true by default.
showTestSurveyTab - Show/hide Test Survey tab. It is true by default.
showTranslationTab - Show/hide a tab that shows on one page all localized strings for all locales/languages.
showLogicTab - Show/hide a tab that shows the Survey logic.
showEmbededSurveyTab - Show/hide a tab that shows how to embed the survey into your web page. It is false by default.

var creatorOptions = {showJSONEditorTab: false};
//There will be two tabs visible: "Survey Designer" and "Test Survey"
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);

Show property grid in old (classic) style.

By default, property grid displays properties divided by categories. You may change it to the classic property grid view by turnning off showElementEditorAsPropertyGrid option.

var creatorOptions = {showElementEditorAsPropertyGrid: false};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);

Show/hide options menu button and turn-on valid JSON generation.

There is an Options menu button in the creator. You may see it here. It is invisible by default and in the most cases you do not need it showing it to your end-users. However, you may decide to generate a valid JSON, instead of JSON5. The SurveyJS Creator generates JSON5 json by default.

generateValidJSON - Generate valid JSON if it is true and a JSON5 - modern, user-friendly if it is false. It is true by default and as result, the generated JSON is valid.

showOptions - Show/hide options menu button, it is false by default.

Limit question types you want to have in the toolbox

You may limit question types your end-users may use in the creator. The following example show how to show in the toolbox only four question types.

var creatorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);

There are more possibilities for toolbox customization. Please go to this demo to learn more about toolbox customization API.

Set the designer height

By default the designer height is "75vh". You may find it in the survey-creator.css. You may set the designer height via options. The following examples set the designer height to 700px:

var creatorOptions = {designerHeight: "700px"};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);

Control toolbox and properties panel layout

By default the toolbox is shown on the left and advanced properties panel on the right. But you can control it via the showToolbox and showPropertyGrid options of the creator:

creator.showToolbox = "right";
creator.showPropertyGrid = "right";