Minimalistic configuration


                        

Survey.settings.allowShowEmptyTitleInDesignMode = false;

// Hide some properties of the itemvalue object
// Design itemvalue[] property editor
// Hide visbileIf, enableIf and text properties
Survey.Serializer.findProperty("itemvalue", "visibleIf").visible = false;
Survey.Serializer.findProperty("itemvalue", "enableIf").visible = false;
Survey.Serializer.findProperty("itemvalue", "text").visible = false;
// Make the detail editor for itemvalue invisible, hide Edit button
//SurveyCreatorCore.SurveyQuestionEditorDefinition.definition["itemvalue[]@choices"].tabs = [
//    { name: "general", visible: false }
//  ];


const options = {
    showLogicTab: true, showJSONEditorTab: false,
    questionTypes: ["text", "checkbox", "radiogroup", "dropdown", "comment",
          "rating", "imagepicker", "boolean", "html", "file", "expression"],
    pageEditMode: "single",
    showTitlesInExpressions: true,
    allowEditExpressionsInTextEditor: false,
    showSurveyTitle: "always"
};
            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
//Remove default properties layout in property grid and have only one "general" category.
SurveyCreatorCore.SurveyQuestionEditorDefinition.definition = {};

//Define visibleIndex for properties we want to show and set attribute that marks we want to show this property
var maxVisibleIndex = 0;
function showTheProperty(className, propertyName, visibleIndex) {
    if(!visibleIndex) visibleIndex = ++maxVisibleIndex;
    else {
        if(visibleIndex > maxVisibleIndex) maxVisibleIndex = visibleIndex;
    }
    //Use Survey Serializer to find the property, it looks for property in the class and all it's parents
    var property = Survey.Serializer.findProperty(className, propertyName)
    if(!property) return;
    property.visibleIndex = visibleIndex;
    //Custom JavaScript attribute that we will use in onShowingProperty event
    property.showProperty = true;
}

showTheProperty("question", "name");
showTheProperty("question", "title");
showTheProperty("question", "description");
showTheProperty("question", "visible");
showTheProperty("question", "required");
showTheProperty("checkbox", "choices");
showTheProperty("checkbox", "hasOther");
showTheProperty("checkbox", "hasSelectAll");
showTheProperty("checkbox", "hasNone");
showTheProperty("text", "inputType");
showTheProperty("text", "placeHolder");
showTheProperty("comment", "placeHolder");
showTheProperty("comment", "rows");

//Use it to show properties that has our showProperty custom attribute equals to true
creator.onShowingProperty.add(function(sender, options){
  options.canShow = options.property.showProperty === true;
});

// Remove toolbar items except undo/redo buttons
for(var i = creator.toolbarItems.length - 1; i >= 0; i --) {
    var item = creator.toolbarItems[i];
    if(item.id === "undo" || item.id === "redo") continue;
    creator.toolbarItems.splice(i, 1);
}
// Adorners for item inplace editing edit itemvalue.value and not itemvalue.text
creator.inplaceEditForValues = true;
// Hide Fast Entry option for ItemValue[] editor
creator.onSetPropertyEditorOptions.add(function(sender, options){
  options.editorOptions.showTextView = false;
});

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Minimalistic configuration, 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" />
    <link href="/DevBuilds/survey-core/survey.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">
    
<svg style="display:none;">
    <symbol viewBox="0 0 20 20" id="icon-custom-drag">
        <g>
            <rect x="5" y="0" width="4" height="4" />
            <rect x="11" y="0" width="4" height="4" />
            <rect x="5" y="6" width="4" height="4" />
            <rect x="11" y="6" width="4" height="4" />
            <rect x="5" y="12" width="4" height="4" />
            <rect x="11" y="12" width="4" height="4" />
        </g>
    </symbol>
    <symbol viewBox="0 0 20 20" id="icon-custom-delete">
        <polygon points="15,3 14,2 8.5,7.5 3,2 2,3 7.5,8.5 2,14 3,15 8.5,9.5 14,15 15,14 9.5,8.5 " />
    </symbol>
</svg>
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

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

</body>
</html>

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.