Question Editor

Customize question editor

                        //Add a tag property to all questions
Survey.JsonObject.metaData.addProperty("question", "tag");
// Change the order of name and title properties, remove the startWithNewLine property and add a tag property
SurveyEditor.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
SurveyEditor.SurveyQuestionEditorDefinition.definition["question"].tabs = [{name: "visibleIf", index: 1}];

var editorOptions = { };
var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);

<!DOCTYPE html>
    <title>Customize question editor, Survey Builder Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src=""></script>
<script src=""></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <link href="" type="text/css" rel="stylesheet" />
    <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./index.css">

        <div id="surveyContainer">
        <div id="editorElement"></div>

<script type="text/javascript" src="./index.js"></script>


Question Editor Definition

UI of Question Editors are built based on JSON located in SurveyEditor.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 origional, unmodified definition, you may find here

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