Example - Department Grid Dialog
Less than to read
This example demonstrates how to achieve the following:
- Creating a child dialog.
- How to use Api methods for collection of items, using prefix to separate redux state
- Handling events to ensure that the dialog updates the API independently of the parent screen.
This guide showcases creating child dialogs, utilising API methods for item collections with data separation, and effective event handling for independent API updates. The schema enables users to manage department details through a grid-based dialog interface, allowing additions, updates, and deletions.
Pages
The amendments are implemented into a single page: “nominal/amend-nominal-account”.
{
"version": "1.0",
"pages": ["nominal/amend-nominal-account"],
...
}
UI Extensions
Two UI extensions are defined to create the Department Grid interface.
- “deptButton2” Button: This UI extension adds a button labelled “Department Grid” to the UI. Upon clicking this button, the onClick event will trigger the action “deptButton2OnClick” which will result in the Department Grid dialog appearing. This will be covered in more detail in the actions section.
{
...
"uiExtensions": [
{
"id": "deptButton2",
"component": {
"Button": {
"id": "deptButton2",
"mt": 3,
"ml": 2,
"onClick": {
"action": "deptButton2OnClick"
},
"children": [
"Department Grid"
]
}
}
},
...
],
...
}
- “deptGridDialog” Dialog/Form/Grid: This UI extension defines the Department Grid Dialog, providing users with a Form to manage department details through a grid interface.
For additional information on Grids please review Grid and GridContainer in the component Library.
{
...
"uiExtensions": [
...
{
"id": "deptGridDialog",
"component": {
"Dialog": {
"id": "deptGridDialog",
"title": "Department Grid",
"children": [
{
"Form": {
"id": "deptGridForm",
"isInDialog": true,
"prefix": "myGridPrefix",
"children": [
{
"Grid": {
"id": "myGridPrefix/departments",
"showAddButton": true,
"canDeleteRows": true,
"rowInitialValues": {},
"columns": [
{
"controlType": "textbox",
"headerName": "Code",
"field": "code"
},
{
"controlType": "textbox",
"headerName": "Name",
"field": "name"
},
{
"controlType": "textbox",
"headerName": "Contact",
"field": "contact_name"
},
{
"controlType": "textbox",
"headerName": "Details",
"field": "contact_details"
},
{
"controlType": "textbox",
"headerName": "Email",
"field": "contact_email_address"
}
]
}
}
]
}
}
]
}
}
}
],
...
}
Actions
The system includes actions to facilitate various interactions with the Department Grid dialog.
- “deptButton2OnClick”: This action is triggered when the “Department Grid” button is clicked. It displays the “Departments Grid” dialog by adding the component to the page to the right of the name component then setting the open property of the dialog component to true.
{
...
"actions": {
"deptButton2OnClick": [
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "deptGridDialog"
}
}
},
{
"set": {
"properties": {
"deptGridDialog": {
"open": true
}
}
}
}
],
...
},
...
}
- “deptGridDialogClear”: This action clears the state of the Department Grid dialog and closes it.
{
...
"actions": {
...
"deptGridDialogClear": [
{
"resetState": {
"prefix": "myGridPrefix"
}
},
{
"set": {
"properties": {
"deptGridDialog": {
"open": false
}
}
}
}
],
...
},
...
}
- “deptGridDialogPut”: This action attempts to update department data within the grid. It uses the “apiPutCollection” function and handles both success and error scenarios.
{
...
"actions": {
...
"deptGridDialogPut": [
{
"tryCatch": {
"try": [
{
"apiPutCollection": {
"endpoint": "v1/departments",
"prefix": "myGridPrefix",
"key": "departments"
}
},
{
"set": {
"success_message": "Department updated successfully"
}
},
{
"resetState": {
"prefix": "myGridPrefix"
}
},
{
"set": {
"properties": {
"deptGridDialog": {
"open": false
}
}
}
}
],
"catch": [
{
"set": {
"error_message": {
"title": "Error updating Department",
"message": {
"get": {
"state": "CURRENT_ERROR"
}
}
}
}
}
]
}
}
],
...
},
...
}
- “deptGridDialogLoad”: This action fetches metadata and data from the “v1/departments” endpoint and loads it into the Department Grid dialog.
{
...
"actions": {
...
"deptGridDialogLoad": [
{
"apiGetMetadata": {
"endpoint": "v1/departments",
"prefix": "myGridPrefix",
"key": "departments"
}
},
{
"apiGetCollection": {
"endpoint": "v1/departments",
"prefix": "myGridPrefix",
"key": "departments"
}
}
]
},
...
}
Events
The events are designed to handle different interactions and scenarios related to the Department Grid dialog.
- “onLoad” Event: This event adds the “Department Grid” button to the UI.
{
...
"events": [
{
"onLoad": [
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "deptButton2"
}
}
}
]
},
...
]
}
- “deptGridForm” Events: These events are triggered within the Department Grid dialog’s form. They handle form submissions, clearing, and loading data.
{
...
"events": [
...
{
"formIds": [
"deptGridForm"
],
"onSubmit": [
{
"action": "deptGridDialogPut"
}
],
"onClear": [
{
"action": "deptGridDialogClear"
}
],
"onLoad": [
{
"action": "deptGridDialogLoad"
}
]
}
]
}