//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>
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.
Approximate time to complete: 2 min.
Start the survey