Survey.ComponentCollection.Instance.add({
name: "shippingaddress",
title: "Shipping Address",
elementsJSON: [
{
type: "comment",
name: "businessAddress",
title: "Business Address",
isRequired: true,
},
{
type: "boolean",
name: "shippingSameAsBusiness",
title: "Shipping address same as business address",
defaultValue: "true",
},
{
type: "comment",
name: "shippingAddress",
title: "Shipping Address",
//Use composite. prefix to get the "shippingSameAsBusiness" question inside the contentPanel
enableIf: "{composite.shippingSameAsBusiness} <> true",
isRequired: true,
},
],
onInit() {
//Override titleLocation property attributes for "shippingaddress" class by making it invisible in property grid and change its default value
Survey.Serializer.addProperty("shippingaddress", {
name: "titleLocation",
visible: false,
default: "hidden",
});
Survey.Serializer.addProperty("shippingaddress", {
name: "title",
visible: false,
});
Survey.Serializer.addProperty("shippingaddress", {
name: "description",
visible: false,
});
Survey.Serializer.addProperty("shippingaddress", {
name: "hidenumber",
visible: false,
});
},
onCreated(question) {
//Hide the title for component/root location
question.titleLocation = "hidden";
//Change the property value from "off" to "default" to get end-to-end numbering behavior
question.contentPanel.showQuestionNumbers = "default";
var businessAddress = question.contentPanel.getQuestionByName(
"businessAddress"
);
var shippingAddress = question.contentPanel.getQuestionByName(
"shippingAddress"
);
var shippingSameAsBusiness = question.contentPanel.getQuestionByName(
"shippingSameAsBusiness"
);
//On changing business address value
businessAddress.valueChangedCallback = function () {
//If shipping address same as business is choosen then
if (shippingSameAsBusiness.value == true) {
shippingAddress.value = businessAddress.value;
}
};
//On changing address same as business
shippingSameAsBusiness.valueChangedCallback = function () {
// //If shipping address same as business is choosen then copy value from business address, otherwise clear the value
shippingAddress.value =
shippingSameAsBusiness.value == true ? businessAddress.value : "";
};
},
});
const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };
var creator = new SurveyCreator.SurveyCreator(options);
ReactDOM.render(
<React.StrictMode>
<SurveyCreator.SurveyCreatorComponent creator={creator} />
</React.StrictMode>,
document.getElementById("creatorElement")
);
creator.JSON = {
elements: [
{
type: "shippingaddress",
name: "question1"
}
]
};
//Select the order table component
creator.selectedElement = creator.survey.getAllQuestions()[0];
//Show property grid
creator.rightContainerActiveItem("property-grid");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shipping Address component, 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.
Start the SurveyApproximate time to complete: 2 min.