Customize question editor, Survey Creator Example

Question Editor

Edit in Plunker

Open in new window

Result
JavaScript
HTML
Documentation


                        
    
        SurveyCreator.StylesManager.applyTheme("bootstrap");
    

//Add a tag property to all questions
Survey.Serializer.addProperty("question", {name: "tag", category: "general"});
// 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"}];
        
            var creatorOptions = { };
            var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
            creator.showToolbox = "right";
            creator.showPropertyGrid = "right";
            creator.rightContainerActiveItem("toolbox");

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Customize question editor, Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.7.19/survey.ko.js"></script>
    <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>
    -->
    <link href="https://surveyjs.azureedge.net/1.7.19/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.7.19/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 creator 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:

Question Editor

Customize question editor

Question Editor Definition

Why We Use Cookies