...
| Panel | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
Introduction
Component Events enables interactions between page components with event triggering and event listening using AJAX, a technology that allows web pages to communicate with a server behind the scenes. This means that specific parts of a web page can update or exchange data without requiring the entire page to reload, making the user experience more seamless and responsive.
Where to Configure
Component Events are configured in a Page Component Property called "Ajax & Events".
It can be found by first visiting the UI Builder >(your selected page) > "Edit Page Components".
Figure 1: Location of the "Edit Page Components" button to get to the Ajax & Events property menu.
Then, from the Editing Page Components screen, select your Page Component to bring up the Properties menu. The Ajax & Events property menu can be found at the end.
Figure 2: Location of the Ajax & Events property menu.
Example - Meeting Date Management
...
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 row of data, the table gets updated with the corresponding values.
Figure 3: The expected outcome through the proper implementation of a component event.
You may learn more about Component Events by visiting the Joget DX Showcase application in the App Center, then clicking on New In DX 8 > Component Events.
Figure 4: How to get to the Component Events showcase in the Joget DX Showcase application.
| Info | ||
|---|---|---|
| ||
The Joget DX Showcase app is a default app that can be found in every fresh installation of Joget DX 8. |
Required Components
Application-Level
| No. | Component | Name | Image (For Reference) |
|---|---|---|---|
| 1 | Form | Calendar - Meeting |
Figure 5: The Form component relevant to the Meeting Date Management example from the App Composer.
Figure 6: The Form component relevant to the Meeting Date Management example from the Form Builder. |
| 2 | List | Manage List - Calendar - Meeting |
Figure 7: The List component relevant to the Meeting Date Management example from the App Composer.
Figure 8: The List component relevant to the Meeting Date Management example from the List Builder. |
| 3 | UI | Joget DX 8 Showcase |
|
Steps
...
Under Configure CRUD:
Figure 9: The UI component relevant to the Meeting Date Management example from the App Composer.
Figure 10: The UI component relevant to the Meeting Date Management example from the UI Builder. |
Page Component-Level
| Info | ||
|---|---|---|
| ||
This section does not include details on the Ajax & Events property configuration. It can be found in a later section to assist with clarification. |
| No. | Component | Configuration | Image (For Reference) | ||||
|---|---|---|---|---|---|---|---|
| 1 | CRUD |
|
...
|
...
|
Figure 11: The general configuration of the CRUD component.
Figure 12: The UI (List) configuration of the CRUD component. | |||||||||||||||
| 2 | Form |
|
Figure 13: The general configuration of the Form component.
Figure 14: The Redirection configuration of the Form component. |
Ajax & Events Configuration
The process to set up the Meeting
...
Date Management system is broken down into 3 sets:
- Hiding the Form by default.
- The corresponding Form shows when the "Edit" button is clicked.
- When the "Save" button is clicked-
- The table reloads with the new data.
- The Form becomes hidden.
Before you proceed, please make sure all the required components mentioned in the previous section has been set up.
To enable the Component Events feature, check the "Handle Component with AJAX?" field in the AJAX & Events.
| Warning |
|---|
If any of the Ajax & Events configurations do not take effect, please restart Joget. |
Event Set 1: Hiding the Form by Default
Form Component
| Form |
|---|
Under AJAX & Events:
...
| Label | Value | |
|---|---|---|
| Handle Component with AJAX? | (Checked) | |
...
| |||||
| Event Listening | |||||
| Row 1 | Component Object | ||||
...
Main Menu Component |
| Event Name * |
...
| page_ |
...
| loaded |
| Matched Action |
...
| Hide Component | ||||||
Figure 15: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||||||
Event Set 2: The corresponding Form shows when the "Edit" button is clicked.
CRUD Component
| Form Label | Value | ||||||
|---|---|---|---|---|---|---|---|
| Handle Component with AJAX? | (Checked)
| ||||||
| Event Triggering | |||||||
| Row 1 | Event Name * | load_form | |||||
| Trigger Method * | Link Clicked | ||||||
Parameters Changed Rules
| |||||||
...
| ||
...
| |||
...
Figure 16:The Ajax & Events configuration of the CRUD Component in the Event Triggering section. | ||||||
Form Component
...
| Form Label | Value | |
|---|---|---|
...
| Event Listening | ||||||||||||||||
| Row 1 | Component Object | Manage Meeting | ||||||||||||||
| Event Name * | load_form | |||||||||||||||
| Matched Action | Show and Change Component URL Parameters | |||||||||||||||
Parameters *
| ||||||||||||||||
Figure 17: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||||||||||||||||
Event Set 3(a): When the "Save" button is clicked - The table reloads with the new data.
Form Component
| Form Label | Value | |||||
|---|---|---|---|---|---|---|
| Event Triggering | ||||||
| Row 1 | Event Name * | reload_table | ||||
| Trigger Method * | POST Request | |||||
Figure 18: The Ajax & Events configuration of the Form Component in the Event Triggering section. | ||||||
CRUD Component
| Form Label | Value | |
|---|---|---|
| Event Listening | ||
| Row 1 | Component Object | Form |
| Event Name * | reload_table | |
Under Redirection:
...
Under AJAX & Events:
...
| Matched Action | Show and Change |
...
| Reload Component | ||||||
Figure 19: The Ajax & Events configuration of the CRUD Component in the Event Listening section. | ||||||
Event Set 3(b): When the "Save" button is clicked - The Form becomes hidden.
Form Component
| Form Label | Value | |||||
|---|---|---|---|---|---|---|
| Event Triggering | ||||||
| Row 1 | Event Name * | hide_form | ||||
| Trigger Method * | GET Request | |||||
Figure 20: The Ajax & Events configuration of the Form Component in the Event Triggering section. | ||||||
Event Listening | ||||||
| Row 1 | ||||||
...
| Component Object | Form | |
| Event Name * |
...
| hide_ |
...
| form |
| Matched Action |
...
| Hide Component | ||||||
Figure 21: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||||||
| Row 2 | Component Object | Manage Meeting | ||||
...
| Event Name * |
...
| hide_form |
...
| Matched Action | Hide Component | |||||
Figure 22: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||||||
CRUD Component
| Form Label | Value | |||
|---|---|---|---|---|
| Event Triggering | ||||
| Row 1 | When Not Match Trigger Event Name | hide_form | ||
| ||||
Figure 23: The Ajax & Events configuration of the CRUD Component in the Event Triggering section. | ||||
...