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);
function createButtonForPopup(options, showPopup) {
    //Add a button;
    var btn = document.createElement("button");
    //Show button if popupDescription property is not empty = !options.question.popupDescription ? "hidden": "";
    btn.type = "button";
    btn.className = "sd-btn sd-btn--action"; = "relative"; = "20px"; = "0 8px"; = "none";
    btn.innerHTML = "More Info";
    //Change button visibility on changing the property
    options.question.registerPropertyChangedHandlers([ "popupDescription" ], function(newValue){ = !newValue ? "hidden": "";
    if(showPopup) {
        var popupDescription = options.question.popupDescription;
        btn.onclick = function () {
    var header = options
    var span = document.createElement("span");
    span.innerHTML = "  ";
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") {
    //If we are creating a surface for "Test Survey" tab
    if(options.reason == "test") {

//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",
                    showOtherItem: 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: [
                        "Emacs Lisp",
        }, {
            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">
    <title>Modify Designer and Test Surveys, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></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-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></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-knockout/survey-creator-knockout.min.js"></script>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

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

Sorry, we can't retrieve the data from server. Please comeback later.

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.