Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.44

Modify Designer and Test Surveys


                        

Survey.Serializer.addProperty("question", {name:"popupDescription:text", category: "general", visibleIndex: 1});



const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
function createButtonForPopup(options, showPopup) {
    //Add a button;
    var btn = document.createElement("button");
    //Show button if popupDescription property is not empty
    btn.style.visibility = !options.question.popupDescription ? "hidden": "";
    btn.type = "button";
    btn.className = "sd-btn sd-btn--action";

    btn.style.position = "relative";
    btn.style.marginLeft = "20px";
    btn.style.padding = "0 8px";
    btn.style.border = "none";
    btn.innerHTML = "More Info";
    //Change button visibility on changing the property
    options.question.registerFunctionOnPropertyValueChanged("popupDescription", function(newValue){
        btn.style.visibility = !newValue ? "hidden": "";
    });
    if(showPopup) {
        var popupDescription = options.question.popupDescription;
        btn.onclick = function () {
            alert(popupDescription);
        }
    }
    var header = options
        .htmlElement
        .querySelector("h5");
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
}
function renderQuestionInDesigner(survey, options) {
    createButtonForPopup(options, false);
}
function renderQuestionInTestSurvey(survey, options) {
    createButtonForPopup(options, true);
}
//Calls when creator needs to create a new survey instance.
//In most cases you need to check options.reason for "designer" and "test".
//Survey is created for designer survey or "Test Survey" tab.
//Several properties editors create survey as well. In this case the reason will be: "conditionEditor", "defaultValueEditor", "restfulEditor"
creator.onSurveyInstanceCreated.add(function(sender, options) {
    //If we are creating a surface for designer surface
    if(options.reason == "designer") {
        options.survey.onAfterRenderQuestion.add(renderQuestionInDesigner);
    }
    //If we are creating a surface for "Test Survey" tab
    if(options.reason == "test") {
        options.survey.onAfterRenderQuestion.add(renderQuestionInTestSurvey);
    }
});

//If there is no JSON, then call creator.JSON = {}; to re-create the designer survey and call onSurveyInstanceCreated event.
creator.JSON = {
    title: "Software developer survey.",
    pages: [
        {
            title: "What operating system do you use?",
            elements: [
                {
                    type: "checkbox",
                    name: "opSystem",
                    title: "OS",
                    hasOther: true,
                    isRequired: true,
                    popupDescription: "If you do not use any of the listed operating system, please select 'others' and type your operating system name.",
                    choices: ["Windows", "Linux", "Macintosh OSX"]
                }
            ]
        }, {
            title: "What language(s) are you currently using?",
            elements: [
                {
                    type: "checkbox",
                    name: "langs",
                    title: "Please select from the list",
                    popupDescription: "Select all programming languages you have been using for the last six months.",
                    colCount: 4,
                    isRequired: true,
                    choices: [
                        "Javascript",
                        "Java",
                        "Python",
                        "CSS",
                        "PHP",
                        "Ruby",
                        "C++",
                        "C",
                        "Shell",
                        "C#",
                        "Objective-C",
                        "R",
                        "VimL",
                        "Go",
                        "Perl",
                        "CoffeeScript",
                        "TeX",
                        "Swift",
                        "Scala",
                        "Emacs Lisp",
                        "Haskell",
                        "Lua",
                        "Clojure",
                        "Matlab",
                        "Arduino",
                        "Makefile",
                        "Groovy",
                        "Puppet",
                        "Rust",
                        "PowerShell"
                    ]
                }
            ]
        }, {
            title: "Please enter your name and e-mail",
            elements: [
                {
                    type: "text",
                    name: "name",
                    title: "Name:",
                    popupDescription: "Please, type your name as 'Given Name' 'Family Name'."
                }, {
                    type: "text",
                    name: "email",
                    title: "Your e-mail",
                    popupDescription: "Please, make sure you do not misspell your e-mail."
                }
            ]
        }
    ]
};
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Modify Designer and Test Surveys, 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" />
    <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">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

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

</body>
</html>

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.

Start the Survey

Approximate time to complete: 2 min.