Order Form Template
Survey.ComponentCollection.Instance.add({
name: "ordertable",
title: "Order Table",
questionJSON: {
type: "matrixdropdown",
columns: [
{
name: "price",
title: "Price",
cellType: "expression",
displayStyle: "currency",
},
{
name: "qty",
title: "Qty",
cellType: "dropdown",
placeholder: "0",
choices: [1, 2, 3, 4, 5],
},
{
name: "total",
title: "Total",
cellType: "expression",
displayStyle: "currency",
expression: "{row.qty} * {row.price}",
totalType: "sum",
totalDisplayStyle: "currency",
},
],
},
onInit() {
//Create a new class derived from Survey.ItemValue
//It hides text, visibleIf and enableIf properties
//and it adds a new price number property.
Survey.Serializer.addClass(
"ordertableitem",
[
{ name: "price:number", default: 0 },
{ name: "text", visible: false },
{ name: "visibleIf", visible: false },
{ name: "enableIf", visible: false },
],
//We create a standard Survey.ItemValue instance.
//The third parameter said that the actual type is "ordertableitem"
//SurveyJS will use properties definition from "ordertableitem" class
//and it will define "price" property for every new instance
function () {
return new Survey.ItemValue(null, null, "ordertableitem");
},
"itemvalue"
);
//Add orderItems properties. It is an array of ordertableitem elements
Survey.Serializer.addProperty("ordertable", {
name: "orderItems:ordertableitem[]",
category: "general",
visibleIndex: 3
});
},
onLoaded(question) {
//Create rows and default values on first loading
this.updateRowsAndValues(question);
},
//Calls on property changed in component/root question
onPropertyChanged(question, propertyName, newValue) {
if (propertyName == "orderItems") {
//Calls when orderItems array is changed:
//new item is added or existing removed or elements order changed
//We need to rebuild rows and defaultValues
this.updateRowsAndValues(question);
}
},
//Calls when a property of ItemValue element is changed.
onItemValuePropertyChanged(question, options) {
//If the propertyName of the array is "orderItems"
if (options.propertyName == "orderItems") {
//If property name of ItemValue element is "value" then rebuild rows and defaultValues
if (options.name == "value") {
this.updateRowsAndValues(question);
}
//If property name of ItemValue element is "price" then rebuild defaultValues
if (options.name == "price") {
this.setDefaultValues(question);
}
}
},
//Internal functions: buildRows, setDefaultValues and updateRowsAndValues
//Create matrix rows using orderItems property
buildRows(question) {
var rows = [];
for (var i = 0; i < question.orderItems.length; i++) {
var item = question.orderItems[i];
if (!!item.value) {
rows.push(item.value);
}
}
question.contentQuestion.rows = rows;
},
//Build matrix default value using orderItems property
setDefaultValues(question) {
var defaultValue = {};
for (var i = 0; i < question.orderItems.length; i++) {
var item = question.orderItems[i];
if (!!item.value && !!item.price) {
defaultValue[item.value] = { price: item.price };
}
}
question.contentQuestion.defaultValue = defaultValue;
},
updateRowsAndValues(question) {
this.buildRows(question);
this.setDefaultValues(question);
},
});
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: "ordertable",
name: "question1",
orderItems: [
{
value: "Steak",
price: 27,
},
{
value: "Salmon",
price: 22,
},
{
value: "Beer",
price: 5,
}
]
}
]
};
//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>Order Form Template | Reactjs 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.