Show specific properties in Survey Creator SurveyJS

SurveyJS is a new library which allow to create surveys and stylist form with different lot of options for take input and many other things. Survey Creator is allow to create a stylist forms. You can show specific properties in Survey Creator/Form Builder – SurveyJS

Add the feature-rich and customizable online Survey Creator and Form Builder into your Web Application.

Follow below steps one by one for SurveyJS survey creator and form builder and you can choose specific properties in Survey allow to show.

Take one survey.php or survey.html file and put below code in it.


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Show specific properties in Survey Creator SurveyJS
, Survey Creator Example</title><meta name="viewport" content="width=device-width"/>
        <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
        <script src="https://unpkg.com/survey-knockout@1.9.6/survey.ko.min.js"></script>
        <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="https://unpkg.com/survey-creator@1.9.6/survey-creator.min.js"></script>
        <link href="https://unpkg.com/survey-creator@1.9.6/survey-creator.min.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="./index.css"></head>
    <body>
        <div id="surveyContainer">
            <div id="creatorElement"></div>
        </div>
        <script type="text/javascript" src="./script.js"></script>
    </body>
</html>

Read Also: jQuery FormBuilder Tutorial

Take a new file script.js and put below code in it.

var creatorOptions = {
    showLogicTab: true
};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
creator.showToolbox = "right";
creator.showPropertyGrid = "right";
creator.rightContainerActiveItem("toolbox");

creator
    .onCanShowProperty
    .add(function (sender, options) {
            var myWhitePropertiesList = ["name", "description","isRequired","visible","startWithNewLine","visibleIf","enableIf"]; //the list of properties you want to show
. Remove properties which you don't want to show.
            options.canShow = myWhitePropertiesList.indexOf(options.property.name) > -1;   
        });

Leave a Reply Cancel reply