Property Dependencies


                        

Survey.Serializer.addProperty("survey", {
  name: "region",
  category: "Geo Location",
  categoryIndex: 1,
  choices: ["Africa", "Americas", "Asia", "Europe", "Oceania"],
});

Survey.Serializer.addProperty("survey", {
  name: "country",
  category: "Geo Location",
  dependsOn: [ "region" ],
  // Populate countries depending on the selected region
  choices: function (obj, choicesCallback) {
    if (!choicesCallback)
      return;
    const xhr = new XMLHttpRequest();
    const 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");
    xhr.onload = function () {
      if (xhr.status === 200) {
        const response = JSON.parse(xhr.response);
        const result = [];
        result.push({ value: null });
        for (let i = 0; i < response.length; i++) {
          const item = response[i];
          const val = item.cioc;
          result.push({ value: val, text: item.name });
        }
        choicesCallback(result);
      }
    };
    xhr.send();
  }
});

Survey.Serializer.addProperty("text", {
  name: "dateFormat",
  dependsOn: [ "inputType" ],
  // Display "Date format" only if `inputType` is one of date types
  visibleIf: function(obj) {
    return (
      obj.inputType === "date" ||
      obj.inputType === "datetime" ||
      obj.inputType === "datetime-local"
    );
  },
  category: "general",
  visibleIndex: 7
});

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "question1"
    }
   ]
  }
 ]
}
//Check that we use Creator V2
if(creator.collapseAllPropertyGridCategories) {
    creator.collapseAllPropertyGridCategories();
    creator.expandPropertyGridCategory("Geo Location");
}
creator.showSidebar = true;
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Configure Property Dependencies | 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>
        <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>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Survey Creator allows survey element properties to change their behavior and visibility depending on the values of other properties. This demo illustrates how this functionality enables you to fill choices and control property visibility based on certain conditions.

To see this functionality in action, do the following:

  • Conditional choices
    In the Property Grid, ensure that Survey is selected in the element selector and expand the Geo Location section. Change the "Region" property value and open the "Country" property editor. You should see that its choice list is filtered based on the selected region.

  • Conditional visibility
    In the Property Grid, select question1 from the element selector. Change the "Input type" property value to date, datetime, or datetime-local. You should see that the "Date format" property becomes visible. If you select another input type, "Date format" will be hidden.

To establish a dependency between properties, specify the dependsOn option for a dependent property. This option accepts an array of property names upon which the current property depends. When one of the listed properties changes, the dependent property reevaluates its visibleIf and choices functions. This behavior allows you to control the property visibility and fill choices conditionally. Refer to the following help topic for more information on how to configure custom survey element properties: Add Custom Properties to the Property Grid.

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.