Add properties

Open in new window

Result
JavaScript
HTML
Documentation


                        

//add a property to the survey object
Survey.Serializer.addProperty("survey", {name: "tag:number", category: "general"});
//add a property to the page object
Survey.Serializer.addProperty("page", {name: "tag:number", default: 1, category: "general"});
//add a property to the base question class and as result to all questions 
Survey.Serializer.addProperty("question", {name: "tag:number", default: 0, category: "general"});

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                creator.toolboxLocation = "right";
            
                
                    creator.render("creatorElement");

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add properties, 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="/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="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-knockout/survey-creator-knockout.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>

Property definition specification

Short definition

"propertyName[:propertyType]"

Full definition

{name: "propertyName[:propertyType]" [, default: defaultValue][, choices: Array of values]
[, onGetValue: function (obj) { return yourValueFromObject; }]
[, onSetValue: function (obj: any, value: any) {/*perform an action on setting value */ }]}

propertyName

A property name. If a property name begins with '!', it means the property is required. If the property is not set, the json parser will raise an error. For example, "name" and "type" properties of the question object are required: "!type" - it means that string property "type" is required.

propertyType

It is an optional attribute. If the value is not set then the library treats it as a string property.

string - it is the default value type. Property editor is a text input. "myProperty" and "myProperty:string" - give the same result.
boolean - a Boolean type. Property editor is a checkbox.
number - a numeric type. Property editor is a text input.
text - string type. Property editor is text input with an optional modal window for entering large text.
html - string type. Property editor is text input with an optional modal window for entering large text. In the future modal window becomes a very simple html editor.
itemvalues - the array of ItemValue object. ItemValue object has two properties {value: any, text: string}. Dropdown, checkbox and radiogroup questions has choices property with itemvalues type.
matrixdropdowncolumns -for matrixdropdown and matrixdynamic columns have this type.
texitems - items property of multiple text question has this type
triggers - survey triggers property has this type.
validators - question validators property has this type.

You are able to introduce your own type and register a new property editor for this new type.

default

It is an optional attribute. The library do not serialize the default value into JSON. By default, the empty text is default for string value, 0 is for numeric and false for boolean. You may change it by using this attribute.

{ name: "mode", default: "edit"}

{ name: "showTitle:boolean", default: true }

choices

It is an optional attribute. It makes sense for string and numeric property types only. If the choices attribute is set, the property editor for the property becomes dropdown. You may assign the array of values to this attribute or a function that will return the array of strings or numbers.

{ name: "showProgressBar", default: "off", choices: ["off", "top", "bottom"] }

//returns the supported languages in the surveyjs library.
{ name: "locale", choices: function() { return Survey.surveyLocalization.getLocales(); } }

onGetValue

It is an optional attribute. You may assign a function to return a value different from the property value.

// get title property returns a title with question number and so on "5) My super title.", 
//but we want to serialize only a "pure" question title "My super title".
{ name: "title:text", onGetValue: function (obj: any) { return obj.titleValue; } }

// the function always returns null. It means that the library will never serialize the property in JSON.
{ name: "calcProperty", onGetValue: function (obj: any) { return null; } }

onSetValue

It is an optional attribute. You may assign a function to set a different object property and/or perform some actions.


{ name: "myValue", onSetValue: function (obj, value, jsonConverter) {obj.myValue = value; /* Perform some actions */ }}