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
        ? "https://surveyjs.io/api/CountriesExample?region=" + obj.region
        : "https://surveyjs.io/api/CountriesExample";
    xhr.open("GET", url);
    xhr.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded"
    );
    //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: item.name });
        }
        //return the result into Survey Creator property editor
        choicesCallback(res);
    }
    };
    xhr.send();
}
});

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Properties that depends on other properties, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.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-react-ui/survey-react-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-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>

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.