Survey Creator Options

Please read the license agreement if you want to use Survey Creator widget in your app(s). Visit our buy page to find out developer license(s) price.
Use options to customize the Survey Creator

                        var options = { showLogicTab: true };
var creator = new SurveyCreator.SurveyCreator("creatorElement", options);




                    
<!DOCTYPE html>
<html>
<head>
    <title>Use options to customize the Survey Creator, Survey Creator Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.15/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/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>
    -->
    <link href="https://surveyjs.azureedge.net/1.1.15/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.15/survey-creator.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body>
        <div id="surveyContainer">
        <div id="creatorElement"></div>
    </div>

<script type="text/javascript" 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
  • 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/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);