Custom Render of Survey Elements


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

//Add a custom 'popupdescription' property to questions of all types and to pages
Survey.Serializer.addProperty("question", "popupdescription:text");
Survey.Serializer.addProperty("page", "popupdescription:text");
function showDescription(element) {
    document.getElementById("questionDescriptionText").innerHTML = element.popupdescription;
    $("#questionDescriptionPopup").modal();
}


                
                    var json = { 
    title: "Software developer survey.", 
    pages: [
      {
        "title": "What operating system do you use?",
        "popupdescription": "Select the operating system you are currently using.",
        "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?",
        "popupdescription": "Select all programming languages you have been using for the last six months.",
        "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",
        "popupdescription": "We will not share this information with any third-party organization.",
        "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."
          }
        ]
      }]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.onAfterRenderQuestion.add(function(survey, options){
    //Do nothing if a question contains no description to show in a modal popup
    if(!options.question.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";
    btn.innerHTML = "More Info";
    var question = options.question;
    btn.onclick = function() { showDescription(question); }
    //Insert the created 'More Info' button into the rendered question's header
    var header = options.htmlElement.querySelector("h5");
    if(!header) header = options.htmlElement;
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});

survey.onAfterRenderPage.add(function(survey, options){
    //Do nothing if a page contains no description to show in a modal popup
    if(!options.page.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";
    btn.innerHTML = "More Info";
    btn.onclick = function() { showDescription(survey.currentPage); }
    //Insert the created 'More Info' button into the rendered page's header
    var header = options.htmlElement.querySelector("h4");
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Render of Survey Elements, Vue Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.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-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin: 0">
    
<!-- Modal -->
<div id="questionDescriptionPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <!-- An element that displays a survey element's 'popupdescription' property value-->
                <p><div id="questionDescriptionText"></div></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>            <div id="surveyElement" style="display:inline-block;width:100%;">
                <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

The Survey object (the SurveModel class) implements a set of after-render events allowing you to customize the appearance and functionality of survey elements.

API demonstrated in the example:

Related API:

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.