Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
When a user clicks on the "Edit" button, a "Edit Meeting Details" form appears below the table without reloading the entire webpage.
Then, when the user clicks on the "Save" button after updating a column, the table gets updated with the corresponding values.
Figure 1: The expected outcome through the proper implementation of a component event.
...
No. | Component | Name | Image (For Reference) |
---|---|---|---|
1 | Form | Calendar - Meeting | Figure 3: The Form component relevant to the Meeting Date Management example from the App Composer. Figure 4: The Form component relevant to the Meeting Date Management example from the Form Builder. |
2 | List | List - Calendar - Meeting | Figure 5: The List component relevant to the Meeting Date Management example from the App Composer. Figure 6: The List component relevant to the Meeting Date Management example from the List Builder. |
3 | UI | Joget DX 8 Showcase | Figure 7: The UI component relevant to the Meeting Date Management example from the App Composer. Figure 8: The UI component relevant to the Meeting Date Management example from the UI Builder. |
The process to set up the Meeting Date Management system is broken down into 3 sets:
Under Configure CRUD:
Form Label | Value |
---|---|
Label * | Manage Meeting |
List * | List - Calendar - Meeting |
Form (Edit) | Calendar - Meeting |
Figure 11: The required configuration in the Configure CRUD property.
Under AJAX & Events:
Form Label | Value | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Handle Component with AJAX? | (Checked) - Checking this label will enable the following sub-properties. | ||||||||||
Event Listening | |||||||||||
Row 1 | Component Object | *Form
| |||||||||
Event Name * | reload_table | ||||||||||
Matched Action | Show and Reload Component | ||||||||||
| |||||||||||
Event Triggering | |||||||||||
Row 1 | Event Name * | load_form | |||||||||
Trigger Method * | Link Clicked | ||||||||||
Parameters Changed Rules
| |||||||||||
When Not Match Trigger Event Name | hide_form | ||||||||||
|
Figure 12: The required configuration in the AJAX & Events property.
Result (with added data) after completing step 4 as shown in the below figure 13.
Info | ||
---|---|---|
| ||
This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component. This instruction can be found in step 8. |
Figure 13: The outcome after properly configuring the CRUD component.
Under Configure Form:
Form Label | Value |
---|---|
Label * | Form |
Form * | Calendar - Meeting |
Display Field as Label When Readonly? | (unchecked) |
Figure 15: The required configuration in the Configure Form property.
Under Redirection:
Form Label | Value |
---|---|
URL Redirect on Cancellation | ?close=true |
Figure 16: The required configuration in the Redirection property.
Under AJAX & Events:
Form Label | Value | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Handle Component with AJAX? | (Checked) - Checking this label will enable the following sub-properties. | |||||||||||||||
Event Listening | ||||||||||||||||
Row 1 | Component Object | Manage Meeting | ||||||||||||||
Event Name * | hide_form | |||||||||||||||
Matched Action | Hide Component | |||||||||||||||
| ||||||||||||||||
Row 2 | Component Object | Manage Meeting | ||||||||||||||
Event Name * | load_form | |||||||||||||||
Matched Action | Show and Change Component URL Parameters | |||||||||||||||
Parameters *
| ||||||||||||||||
| ||||||||||||||||
Row 3 | Component Object | Main Menu Component | ||||||||||||||
Event Name * | page_loaded | |||||||||||||||
Matched Action | Hide Component | |||||||||||||||
| ||||||||||||||||
Row 4 | Component Object | *Form
| ||||||||||||||
Event Name * | hide_form | |||||||||||||||
Matched Action | Hide Component | |||||||||||||||
| ||||||||||||||||
Event Triggering | ||||||||||||||||
Row 1 | Event Name * | hide_form | ||||||||||||||
Trigger Method * | GET Request | |||||||||||||||
Parameters Changed Rules
| ||||||||||||||||
| ||||||||||||||||
Row 2 | Event Name * | reload_table | ||||||||||||||
Trigger Method * | POST Request | |||||||||||||||
|
Figure 17: The required configuration in the AJAX & Events property (partial).
Figure 18: The required configuration in the AJAX & Events property (partial).
Figure 19: The required configuration in the AJAX & Events property (partial).