Question Editor

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.
Customize question editor

                        //Add a tag property to all questions
Survey.Serializer.addProperty("question", "tag");
// Change the order of name and title properties, remove the startWithNewLine property and add a tag property
SurveyCreator.SurveyQuestionEditorDefinition.definition["question"].properties = 
["title", "name", {name: "tag", title: "Tag"}, {name: "visible", category: "checks"}, {name: "isRequired", category: "checks"}];
// make visibleIf tab the second after general for all questions
SurveyCreator.SurveyQuestionEditorDefinition.definition["question"].tabs = [{name: "visibleIf", index: 1}];




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


                    
<!DOCTYPE html>
<html>
<head>
    <title>Customize question editor, 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.12/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.12/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.12/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>

Question Editor Definition

UI of Question Editors are built based on JSON located in SurveyCreator.SurveyQuestionEditorDefinition.definition property.

You can modify it, before creating the editor object.

The UI builder combines the information for the selected question type and all its parents. For example, the "dropdown" question combines properties and tabs from: "question", "selectbase" and "dropdown".

The original, unmodified definition, you may find here

Here is the full Question Editors definition as JSON, used in the demo, property SurveyCreator.SurveyQuestionEditorDefinition.definition: