Example - Department Tab/Grid Tab
Less than to read
This example demonstrates how to achieve the following:
- How to add tabs, make conditionally visible
- How to use API methods for single item/collections, with prefix to separate redux state.
- How to handle events so that tab is updated along with the parent form.
- Downside: how to handle error from extension even though core form was successful.
In this guide, we’ll explore two examples that showcase the capabilities of tabs and API methods for efficient data management in your application. Each example focuses on different aspects of data manipulation using UI extensions.
Example 1: Department Tab/Pod
In this example, we’ll create a tab that allows users to input and modify department details. The tab’s visibility is controlled by specific conditions, and it contains a Pod component for data entry.
- The
DeptTabUI extension builds the required “Departments” tab, which is initially hidden but becomes visible under certain conditions. Users can input details through Textbox components, these link to the department endpoint fields for Code, Name, Contact Name and Contact Details.
"uiExtensions": [
{
"id": "DeptTab",
"component": {
"Tab": {
"id": "newTab1",
"tabId": "newTab1",
"title": "Departments",
"visible": false,
"children": [
{
"Pod": {
"title": "Department Pod",
"children": [
{
"Textbox": {
"id": "tabprefix/code",
"label": "Code"
}
},
{
"Textbox": {
"id": "tabprefix/name",
"label": "Name"
}
},
{
"Textbox": {
"id": "tabprefix/contact_name",
"label": "Contact name"
}
},
{
"Textbox": {
"id": "tabprefix/contact_details",
"label": "Contact details"
}
}
]
}
}
]
}
}
}
],
- The onStateChange controls when the tab will appear and the certain conditions that are required. In this case we are watching the “name” field and if its not blank it will display the department tab, this can be set to an field or condition that you desire.
"events": [
"onStateChange": [
{
"watchTarget": "name",
"onChange": [
{
"if": {
"ne": [
{
"get": {
"state": "name"
}
},
{
"string": {
"value": ""
}
}
],
"then": [
{
"set": {
"properties": {
"newTab1": {
"visible": true
}
}
}
},
// Other events
}
}
]
}
],
]
- The tabDialogPut action updates department data via an API PUT request. This entails utilising the apiPut method in a try block to send a PUT request to the endpoint “v1/departments,” with data held under the Redux state prefix “tabprefix” and the id parameter fetched from “department_id.” The catch block serves error handling, setting an error message with a title (“Error updating Department”) and a message from Redux state’s “CURRENT_ERROR.”.
"actions": {
"tabDialogPut": [
{
"tryCatch": {
"try": [
{
"apiPut": {
"endpoint": "v1/departments",
"prefix": "tabprefix",
"id": {
"get": {
"state": "department_id"
}
}
}
}
],
"catch": [
{
"set": {
"error_message": {
"title": "Error updating Department",
"message": {
"get": {
"state": "CURRENT_ERROR"
}
}
}
}
}
]
}
}
],
}
Example 2: Department Grid Tab
This example introduces a tab that displays department data in a grid format. Users can seamlessly add, edit, and delete rows within the grid.
- The
DeptGridTabUI extension represents the “Department Grid” tab. It includes a Grid component for managing department data effectively.
For additional information on Grids please review Grid and GridContainer in the component Library.
"uiExtensions": [
{
"id": "DeptGridTab",
"component": {
"Tab": {
"id": "newTab2",
"tabId": "newTab2",
"title": "Department Grid",
"visible": true,
"children": [
{
"Pod": {
"title": "Dept Pod",
"children": [
{
"Grid": {
"id": "tab2Prefix/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"
}
]
}
}
]
}
}
]
}
}
}
],
The tabDeptGridPut action utilises the apiPutCollection method to handle bulk updates of department data through an API endpoint.
{
"actions": {
"tabDeptGridPut": [
{
"tryCatch": {
"try": [
{
"apiPutCollection": {
"endpoint": "v1/departments",
"prefix": "tab2Prefix",
"key": "departments"
}
}
],
"catch": [
{
"set": {
"error_message": {
"title": "Error updating Department",
"message": {
"get": {
"state": "CURRENT_ERROR"
}
}
}
}
}
]
}
}
],
},
}