Example - Stock Item Supplier Grid Dialog
Less than to read
This example demonstrates how to achieve the following:
- How to create child dialog
- How to use child methods for collection, using prefix to separate redux state.
- How to return data from dialog to parent form.
Coming Soon
{
"version": "1.0",
"pages": [
"stock/amend-stock-item"
],
"uiExtensions": [
{
"id": "dialogButton2",
"component":
{
"Button": {
"id": "dialogButton2",
"mt": "25px",
"ml": "16px",
"disabled": true,
"onClick": {
"action": "dialogButton2OnClick"
},
"children": [
"Supplier Grid"
]
}
}
},
{
"id": "supplierGridDialog",
"component":
{
"Dialog": {
"id": "supplierGridDialog",
"title": "Supplier Grid",
"children": [
{
"Form": {
"id": "supplierGridForm",
"isInDialog": true,
"prefix": "myGridPrefix",
"children": [
{
"Grid": {
"id": "myGridPrefix/suppliers",
"showAddButton": true,
"canDeleteRows": true,
"rowInitialValues" : {},
"columns": [
{
"controlType": "textbox",
"headerName": "Stock Code",
"field": "supplier_stock_code"
},
{
"controlType": "number",
"headerName": "Lead time",
"field": "lead_time"
},
{
"controlType": "decimal",
"headerName": "List price",
"field": "list_price"
}
]
}
}
]
}
}
]
}
}
}
],
"actions":
{
"dialogButton2OnClick": [
{
"set": {
"properties": {
"supplierGridDialog": {
"open": true
}
}
}
}
],
"gridDialogClear": [
{
"resetState": {
"prefix": "myGridPrefix"
}
},
{
"set": {
"properties": {
"supplierGridDialog": {
"open": false
}
}
}
}
],
"gridDialogPut": [
{
"tryCatch": {
"try": [
{
"childPutCollection": {
"target": "suppliers",
"prefix": "myGridPrefix",
"key": "suppliers"
}
},
{
"resetState": {
"prefix": "myGridPrefix"
}
},
{
"set": {
"properties": {
"supplierGridDialog": {
"open": false
}
}
}
}
],
"catch": [
{
"set": {
"error_message": {
"title": "Error updating Department",
"message":
{
"get": {
"state": "CURRENT_ERROR"
}
}
}
}
}
]
}
}
],
"gridDialogLoad": [
{
"childGetMetadata": {
"prefix": "myGridPrefix",
"child": "suppliers",
"key": "suppliers"
}
},
{
"childGetCollection": {
"prefix": "myGridPrefix",
"source": {
"get": {
"state": "suppliers"
}
},
"key": "suppliers"
}
}
]
},
"events": [
{
"onStateChange": [{
"watchTarget": "code",
"onChange": [{
"if": {
"ne": [{
"get": {
"state": "code"
}
},
{
"string": {
"value": ""
}
}
],
"then": [{
"set": {
"properties": {
"dialogButton2": {
"disabled": false
}
}
}
}],
"else": [{
"set": {
"properties": {
"dialogButton2": {
"disabled": true
}
}
}
}]
}
}]
}],
"onLoad": [
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "supplierGridDialog"
}
}
},
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "dialogButton2"
}
}
}
]
},
{
"formIds": [
"supplierGridForm"
],
"onSubmit": [{
"action": "gridDialogPut"
}],
"onClear": [{
"action": "gridDialogClear"
}],
"onLoad": [{
"action": "gridDialogLoad"
}]
}
]
}