Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.38

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>

Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey