Total amount in live demo example (see https://www.dlite.io) #66
-
|
Hi Renaud, the total amount is now a fixed 500€. I would like to use array.reduce to make a sum of all the values in tle Lines-iterator. Can you show me how to do that? I could not find an array.reduce example in any of the current example projects. kind regard |
Beta Was this translation helpful? Give feedback.
Answered by
renaudpawlak
Sep 7, 2022
Replies: 4 comments 2 replies
-
|
First solution: create an event on data-model-changed and update the totalAmountField with a reduce. (copy-paste the following in your project to see it in action). {
"cid": "container-2",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "datepicker-0",
"type": "DatepickerView",
"dataType": "datetime",
"label": "Due date",
"disabled": false,
"eventHandlers": [],
"field": "dueDate",
"dataSource": "$parent"
},
{
"cid": "card-0",
"type": "CardView",
"title": "",
"subTitle": "",
"imgSrc": "",
"imgPosition": "top",
"imgWidth": "",
"imgHeight": "",
"text": "",
"headerEnabled": true,
"header": {
"cid": "text-0",
"type": "TextView",
"dataType": "string",
"tag": "b",
"text": "Line",
"eventHandlers": []
},
"body": {
"cid": "container-1",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "button-3",
"type": "ButtonView",
"dataSource": "$parent",
"label": "Add",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "$self",
"name": "addData",
"description": "Add instance",
"argument": "{}"
}
]
}
],
"size": "sm",
"icon": "plus",
"variant": "primary"
},
{
"cid": "iterator-0",
"type": "IteratorView",
"dataType": "array",
"defaultValue": "=[]",
"body": {
"cid": "container-0",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "input-0",
"type": "InputView",
"dataType": "text",
"label": "Description",
"inputType": "text",
"description": "",
"field": "description",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "input-1",
"type": "InputView",
"dataType": "number",
"label": "Amount",
"inputType": "number",
"description": "",
"field": "amount",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "button-0",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move up",
"argument": "iteratorIndex, iteratorIndex - 1"
}
]
}
],
"size": "sm",
"icon": "arrow-up",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === 0)"
},
{
"cid": "button-1",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move down",
"argument": "iteratorIndex, iteratorIndex + 1"
}
]
}
],
"size": "sm",
"icon": "arrow-down",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === $d('iterator-0').length - 1)"
},
{
"cid": "button-2",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "removeDataAt",
"description": "Remove",
"argument": "iteratorIndex"
}
]
}
],
"size": "sm",
"icon": "trash",
"layoutClass": "align-self-end",
"variant": "danger"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"direction": "row"
},
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"field": "line"
},
"footer": {},
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-2",
"type": "InputView",
"dataType": "text",
"label": "Vendor",
"inputType": "text",
"description": "",
"field": "vendor",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-3",
"type": "InputView",
"dataType": "number",
"label": "Total amount",
"inputType": "number",
"description": "",
"field": "totalAmount",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={\n \"dueDate\": \"2013-02-15\",\n \"line\": [\n {\n \"description\": \"Sample Expense\",\n \"amount\": 500\n }\n ],\n \"vendor\": \"Sample Bank\",\n \"totalAmount\": 500\n}",
"eventHandlers": [
{
"global": false,
"name": "@data-model-changed",
"actions": [
{
"targetId": "$self",
"name": "eval",
"description": "Default action",
"argument": "$d(this).totalAmount = $d(this).line.reduce((sum, line) => sum + line.amount, 0)"
}
]
}
]
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Solution 2: you replace the total amount input with a text field. It kind of makes more sense because it is a calculated value and should probably not be part of the data. {
"cid": "container-2",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "datepicker-0",
"type": "DatepickerView",
"dataType": "datetime",
"label": "Due date",
"disabled": false,
"eventHandlers": [],
"field": "dueDate",
"dataSource": "$parent"
},
{
"cid": "card-0",
"type": "CardView",
"title": "",
"subTitle": "",
"imgSrc": "",
"imgPosition": "top",
"imgWidth": "",
"imgHeight": "",
"text": "",
"headerEnabled": true,
"header": {
"cid": "text-0",
"type": "TextView",
"dataType": "string",
"tag": "b",
"text": "Line",
"eventHandlers": []
},
"body": {
"cid": "container-1",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "button-3",
"type": "ButtonView",
"dataSource": "$parent",
"label": "Add",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "$self",
"name": "addData",
"description": "Add instance",
"argument": "{}"
}
]
}
],
"size": "sm",
"icon": "plus",
"variant": "primary"
},
{
"cid": "iterator-0",
"type": "IteratorView",
"dataType": "array",
"defaultValue": "=[]",
"body": {
"cid": "container-0",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "input-0",
"type": "InputView",
"dataType": "text",
"label": "Description",
"inputType": "text",
"description": "",
"field": "description",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "input-1",
"type": "InputView",
"dataType": "number",
"label": "Amount",
"inputType": "number",
"description": "",
"field": "amount",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"dataSource": "$parent"
},
{
"cid": "button-0",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move up",
"argument": "iteratorIndex, iteratorIndex - 1"
}
]
}
],
"size": "sm",
"icon": "arrow-up",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === 0)"
},
{
"cid": "button-1",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move down",
"argument": "iteratorIndex, iteratorIndex + 1"
}
]
}
],
"size": "sm",
"icon": "arrow-down",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === $d('iterator-0').length - 1)"
},
{
"cid": "button-2",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "removeDataAt",
"description": "Remove",
"argument": "iteratorIndex"
}
]
}
],
"size": "sm",
"icon": "trash",
"layoutClass": "align-self-end",
"variant": "danger"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"direction": "row"
},
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"field": "line"
},
"footer": {},
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-2",
"type": "InputView",
"dataType": "text",
"label": "Vendor",
"inputType": "text",
"description": "",
"field": "vendor",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "text-1",
"type": "TextView",
"dataType": "string",
"tag": "div",
"text": "='Total amount: ' + $d(this).line.reduce((sum, line) => sum + line.amount, 0)",
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={\n \"dueDate\": \"2013-02-15\",\n \"line\": [\n {\n \"description\": \"Sample Expense\",\n \"amount\": 500\n }\n ],\n \"vendor\": \"Sample Bank\",\n \"totalAmount\": 500\n}",
"eventHandlers": []
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Here is a probably better solution (variant of solution 1) where you directly set the data of the totalAmount input. {
"cid": "container-2",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "datepicker-0",
"type": "DatepickerView",
"dataType": "datetime",
"label": "Due date",
"disabled": false,
"eventHandlers": [],
"field": "dueDate",
"dataSource": "$parent"
},
{
"cid": "card-0",
"type": "CardView",
"title": "",
"subTitle": "",
"imgSrc": "",
"imgPosition": "top",
"imgWidth": "",
"imgHeight": "",
"text": "",
"headerEnabled": true,
"header": {
"cid": "text-0",
"type": "TextView",
"dataType": "string",
"tag": "b",
"text": "Line",
"eventHandlers": []
},
"body": {
"cid": "container-1",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "button-3",
"type": "ButtonView",
"dataSource": "$parent",
"label": "Add",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "$self",
"name": "addData",
"description": "Add instance",
"argument": "{}"
}
]
}
],
"size": "sm",
"icon": "plus",
"variant": "primary"
},
{
"cid": "iterator-0",
"type": "IteratorView",
"dataType": "array",
"defaultValue": "=[]",
"body": {
"cid": "container-0",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "input-0",
"type": "InputView",
"dataType": "text",
"label": "Description",
"inputType": "text",
"description": "",
"field": "description",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "input-1",
"type": "InputView",
"dataType": "number",
"label": "Amount",
"inputType": "number",
"description": "",
"field": "amount",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "button-0",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move up",
"argument": "iteratorIndex, iteratorIndex - 1"
}
]
}
],
"size": "sm",
"icon": "arrow-up",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === 0)"
},
{
"cid": "button-1",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move down",
"argument": "iteratorIndex, iteratorIndex + 1"
}
]
}
],
"size": "sm",
"icon": "arrow-down",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === $d('iterator-0').length - 1)"
},
{
"cid": "button-2",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "removeDataAt",
"description": "Remove",
"argument": "iteratorIndex"
}
]
}
],
"size": "sm",
"icon": "trash",
"layoutClass": "align-self-end",
"variant": "danger"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"direction": "row"
},
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"field": "line"
},
"footer": {},
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-2",
"type": "InputView",
"dataType": "text",
"label": "Vendor",
"inputType": "text",
"description": "",
"field": "vendor",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-3",
"type": "InputView",
"dataType": "number",
"label": "Total amount",
"inputType": "number",
"description": "",
"field": "totalAmount",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={\n \"dueDate\": \"2013-02-15\",\n \"line\": [\n ],\n \"vendor\": \"Sample Bank\",\n \"totalAmount\": 0\n}",
"eventHandlers": [
{
"global": false,
"name": "@data-model-changed",
"actions": [
{
"targetId": "input-3",
"name": "setData",
"description": "Default action",
"argument": "$d(this).line.reduce((sum, line) => sum + line.amount, 0)"
}
]
}
]
} |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Wow! Many thanks for your extensive answer perhaps add the calculation to the live form? kind regards |
Beta Was this translation helpful? Give feedback.
-
|
Well, from the initial invoice data written in JSON, it would be tricky to infer automatically that the total amount should be the sum of all the line amounts. I understand that most people would expect that DLite should be able to infer and propose such features to the users. Also, it should be able to automatically add sums, filters, counts, averages, etc. At some point, DLite will be able to do all this automatically and it will become a powerful no-code tool :) However, at this point, DLite is still low-code oriented and it is quite easy to achieve what you want if you understand the logic (that's the main difficulty). At this point, I still need to make sure that the core engine works well and is robust/scalable enough to start thinking about too advanced no-code feature. So, I guess we need to be a little patient :) |
Beta Was this translation helpful? Give feedback.
Answer selected by
renaudpawlak
-
|
Last but not least, another solution, which binds the total amount input to a formula that does the reduce. It works to and does not require any event. Much simpler. However, the sum is not saved in the data object, since the input is not bound to it anymore. It probably does not matter for most cases. {
"cid": "container-2",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "datepicker-0",
"type": "DatepickerView",
"dataType": "datetime",
"label": "Due date",
"disabled": false,
"eventHandlers": [],
"field": "dueDate",
"dataSource": "$parent"
},
{
"cid": "card-0",
"type": "CardView",
"title": "",
"subTitle": "",
"imgSrc": "",
"imgPosition": "top",
"imgWidth": "",
"imgHeight": "",
"text": "",
"headerEnabled": true,
"header": {
"cid": "text-0",
"type": "TextView",
"dataType": "string",
"tag": "b",
"text": "Line",
"eventHandlers": []
},
"body": {
"cid": "container-1",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "button-3",
"type": "ButtonView",
"dataSource": "$parent",
"label": "Add",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "$self",
"name": "addData",
"description": "Add instance",
"argument": "{}"
}
]
}
],
"size": "sm",
"icon": "plus",
"variant": "primary"
},
{
"cid": "iterator-0",
"type": "IteratorView",
"dataType": "array",
"defaultValue": "=[]",
"body": {
"cid": "container-0",
"type": "ContainerView",
"dataType": "object",
"layout": "block",
"components": [
{
"cid": "input-0",
"type": "InputView",
"dataType": "text",
"label": "Description",
"inputType": "text",
"description": "",
"field": "description",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "input-1",
"type": "InputView",
"dataType": "number",
"label": "Amount",
"inputType": "number",
"description": "",
"field": "amount",
"size": "sm",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent"
},
{
"cid": "button-0",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move up",
"argument": "iteratorIndex, iteratorIndex - 1"
}
]
}
],
"size": "sm",
"icon": "arrow-up",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === 0)"
},
{
"cid": "button-1",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "moveDataFromTo",
"description": "Move down",
"argument": "iteratorIndex, iteratorIndex + 1"
}
]
}
],
"size": "sm",
"icon": "arrow-down",
"layoutClass": "align-self-end",
"disabled": "=(iteratorIndex === $d('iterator-0').length - 1)"
},
{
"cid": "button-2",
"type": "ButtonView",
"dataSource": "$parent",
"label": "",
"buttonType": "button",
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "iterator-0",
"name": "removeDataAt",
"description": "Remove",
"argument": "iteratorIndex"
}
]
}
],
"size": "sm",
"icon": "trash",
"layoutClass": "align-self-end",
"variant": "danger"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"direction": "row"
},
"eventHandlers": [],
"dataSource": "$parent"
}
],
"defaultValue": "={}",
"eventHandlers": [],
"dataSource": "$parent",
"field": "line"
},
"footer": {},
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-2",
"type": "InputView",
"dataType": "text",
"label": "Vendor",
"inputType": "text",
"description": "",
"field": "vendor",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "$parent"
},
{
"cid": "input-3",
"type": "InputView",
"dataType": "number",
"label": "Total amount",
"inputType": "number",
"description": "",
"field": "",
"size": "default",
"disabled": false,
"placeholder": "",
"eventHandlers": [],
"dataSource": "=$d('container-2').line.reduce((sum, line) => sum += line.amount, 0)"
}
],
"defaultValue": "={\n \"dueDate\": \"2013-02-15\",\n \"line\": [\n {\n \"description\": \"Sample Expense\",\n \"amount\": 500.00\n }\n ],\n \"vendor\": \"Sample Bank\",\n \"totalAmount\": 500.00\n}",
"eventHandlers": []
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here is a probably better solution (variant of solution 1) where you directly set the data of the totalAmount input.
{ "cid": "container-2", "type": "ContainerView", "dataType": "object", "layout": "block", "components": [ { "cid": "datepicker-0", "type": "DatepickerView", "dataType": "datetime", "label": "Due date", "disabled": false, "eventHandlers": [], "field": "dueDate", "dataSource": "$parent" }, { "cid": "card-0", "type": "CardView", "title": "", "subTitle": "", "imgSrc": "", "imgPosition": "top", "imgWidth": "", "imgHeight": "", "text": "", "headerEnabled"