Example - Department Dialog
Less than to read
This example demonstrates how to achieve the following:
- How to create child dialog.
- How to use Api methods for collection of items, using prefix to separate redux state
- How to handle events so that dialog updates API independently of parent form.
Pages
Our first step involves specifying the pages where the new feature will be integrated. In this case, we are targeting the “Amend Nominal Account” page.
{
"version": "1.0",
"pages": [
"nominal/amend-nominal-account"
],
...
}
UI Extensions
Next, the UI extensions, which add new visual elements to your app. We’ve included two main UI extensions: “DeptButton” and “DeptDialog”.
- DeptButton: This extension introduces a button labelled “Department” with an onClick action “deptButtonOnClick”.
{
"id": "deptButton",
"component":
{
"Button": {
"id": "deptButton",
"mt": "25px",
"ml": "16px",
"onClick": {
"action": "deptButtonOnClick"
},
"children": [
"Department"
]
}
}
},
- DeptDialog: This extension introduces a dialog box titled “Departments,” encompassing a range of components designed to facilitate the user’s input of department details. At its core, the dialog contains a Form component, a fundamental element responsible for managing the state of various child inputs, including Textbox, Decimal, Button, Checkbox, Number, Date, and Radio Buttons, among others.
The Form within the dialog employs a BaseSelect component and an selection of Textboxes. The pivotal role of the BaseSelect component lies in offering users a selection mechanism. By linking it to the endpoint “v1/departments,” it efficiently retrieves the selection items required. To provide users with contextual information aiding their selection, we specify the field from the endpoint and its corresponding headerName.
Additionally, we incorporate a series of Textboxes, each uniquely identified by an ID associated with a field from the Departments endpoint. This comprehensive setup ensures a seamless and informative experience for users interacting with the “Departments” dialog.
{
"id": "deptDialog",
"component":
{
"Dialog": {
"id": "deptDialog",
"title": "Departments",
"children": [
{
"Form": {
"id": "deptForm",
"isInDialog": true,
"prefix": "myprefix",
"children": [
{
"BaseSelect": {
"id": "myprefix/dept_id",
"label": "Department",
"endpoint": "v1/departments",
"columns": [
{
"field": "code",
"headerName": "Code"
},
{
"field": "name",
"headerName": "Name"
}
]
}
},
{
"Textbox": {
"id": "myprefix/code",
"label": "Code"
}
},
{
"Textbox": {
"id": "myprefix/name",
"label": "Name"
}
},
{
"Textbox": {
"id": "myprefix/contact_name",
"label": "Contact name"
}
},
{
"Textbox": {
"id": "myprefix/contact_details",
"label": "Contact details"
}
}
]
}
}
]
}
}
}
Actions
- deptButtonOnClick: This action is triggered when the “Department” button is clicked. It displays the “Departments” 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.
"deptButtonOnClick": [
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "deptDialog"
}
}
},
{
"set": {
"properties": {
"deptDialog": {
"open": true
}
}
}
}
],
- deptDialogClear: Clears the input fields and closes the “Departments” dialog.
"deptDialogClear": [
{
"resetState": {
"prefix": "myprefix"
}
},
{
"set": {
"properties": {
"deptDialog": {
"open": false
}
}
}
}
],
- deptDialogPut: Initiates a PUT request to update department details. It handles success and failure scenarios.
"deptDialogPut": [
{
"tryCatch": {
"try": [
{
"apiPut": {
"endpoint": "v1/departments",
"prefix": "myprefix",
"id":
{
"get": {
"state": "myprefix/dept_id"
}
}
}
},
{
"resetState": {
"prefix": "myprefix"
}
},
{
"set": {
"properties": {
"deptDialog": {
"open": false
}
}
}
}
],
"catch" : [
{
"set": {
"error_message": {
"title" : "Error updating department",
"message": {
"get": {
"state": "CURRENT_ERROR"
}
}
}
}
}
]
}
}
],
- deptDialogLoad: Fetches metadata for the “Departments” dialog, This action is triggered in in the events section for onLoad. Another approach is to include the following code in the onLoad event directly. This can depend if you require to trigger this action at different points.
"deptDialogLoad": [
{
"apiGetMetadata": {
"endpoint": "v1/departments",
"prefix": "myprefix"
}
}
]
Events
- onLoad: This event is executed when the screen loads. It sets up the “Department” button to appear on the screen to the right of the name field.
{
"onLoad": [
{
"set": {
"pageExtension": {
"componentId": "name",
"panel": "right",
"uiExtension": "deptButton"
}
}
}
]
},
- onStateChange This event is only active on our newly created deptForm Form. This event monitors changes in the “department_code” state. If the code is not empty, it will fetch the department data passing in the dept_id, which will populate the selection of textboxes.
Finally the dialog includes the on onSubmit, onClear and onLoad. As the wording suggests onSubmit is triggered when the save button is pressed, which triggers the deptDialogPut action to update the departments in the dialog. The onClear does the same process but for the deptDialogClear action and finally the onLoad happens then the dialog loads and triggers the deptDialogLoad action.
{
"formIds": [
"deptForm"
],
"onStateChange": [
{
"watchTarget": "myprefix/dept_id",
"onChange": [
{
"if": {
"ne": [
{
"get": {
"state": "myprefix/dept_id"
}
},
{
"string": {
"value": ""
}
}
],
"then": [
{
"apiGet": {
"endpoint": "v1/departments",
"prefix": "myprefix",
"id": {
"get": {
"state": "myprefix/dept_id"
}
},
"queryParams": {
"$expandall": "true"
}
}
}
]
}
}
]
}
],
"onSubmit": [
{
"action": "deptDialogPut"
}
],
"onClear": [
{
"action": "deptDialogClear"
}
],
"onLoad": [
{
"action": "deptDialogLoad"
}
]
}