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

Properties that depends on other properties


//This property is depends on date format property of text question
//It is invisible if inputFormat property doesn't equal to "date*" values
Survey.Serializer.addProperty("text", {
name: "dateFormat",
dependsOn: ["inputType"],
visibleIf: function(obj) {
    return (
    obj.inputType == "date" ||
    obj.inputType == "datetime" ||
    obj.inputType == "datetime-local"
category: "general",
visibleIndex: 7
Survey.Serializer.addProperty("question", {
    name: "targetEntity",
    choices: ["", "Account", "Developement"],
    category: "Entity",
    categoryIndex: 1
//This property depends from targetEntity property.
//If targetEntity property is empty then choices for targetField are empty as well.
Survey.Serializer.addProperty("question", {
    name: "targetField",
    dependsOn: "targetEntity",
    category: "Entity",
    choices: function(obj) {
        var choices = [];
        var entity = !!obj ? obj.targetEntity : null;
        //If targetEntity is empty then return the empty array
        if (!entity) return choices;
        //The correct way to set the nullable value
        choices.push({ value: null });
        choices.push(entity + " 1");
        choices.push(entity + " 2");
        choices.push(entity + " 3");
        return choices;
Survey.Serializer.addProperty("survey", {
    name: "region",
    choices: ["Africa", "Americas", "Asia", "Europe", "Oceania"],
    category: "Geo Location",
    categoryIndex: 1
//This property country depends on the selected region.
//It allow to select all countries if region is empty or if it is not empty, only countries from this region
//It uses rest full service and choicesCallback function to tell Survey Creator property editor that choices are loaded from the web
Survey.Serializer.addProperty("survey", {
name: "country",
dependsOn: "region",
category: "Geo Location",
choices: function(obj, choicesCallback) {
    if(!choicesCallback) return;
    //We are going to use choicesCallback here
    var xhr = new XMLHttpRequest();
    //if region is empty then get all countries, otherwise get coutries by region.
    var url =
    !!obj && !!obj.region
        ? "" + obj.region
        : "";"GET", url);
    //on load event set results into array of ItemValue and tell the Survey Creator that choices are loaded.
    xhr.onload = function() {
    if (xhr.status === 200) {
        var serverRes = JSON.parse(xhr.response);
        var res = [];
        //We will use ItemValue array here, since we want to have value different from display text
        res.push({ value: null });
        for (var i = 0; i < serverRes.length; i++) {
        var item = serverRes[i];
        res.push({ value: item.alpha2Code, text: });
        //return the result into Survey Creator property editor

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />

<!DOCTYPE html>
<html lang="en">
    <title>Properties that depends on other properties, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <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-react-ui/survey-react-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>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></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>
            :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/babel" src="./index.js"></script>


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.