...
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 columnrow of data, the table gets updated with the corresponding values.
Figure 13: 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 24: 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 35: The Form component relevant to the Meeting Date Management example from the App Composer.
Figure 46: The Form component relevant to the Meeting Date Management example from the Form Builder. |
| 2 | List | List - Calendar - Meeting |
Figure 57: The List component relevant to the Meeting Date Management example from the App Composer.
Figure 68: The List component relevant to the Meeting Date Management example from the List Builder. |
| 3 | UI | Joget DX 8 Showcase |
Figure 79: The UI component relevant to the Meeting Date Management example from the App Composer.
Figure 810: 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
Event Set 1: Hiding the Form by Default
...
Under Configure CRUD:
...
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
...
Under AJAX & Events:
| Form Label | Value | |
|---|---|---|
| Handle Component with AJAX? | (Checked) | |
...
| |||||
| Event Listening | |||||
| Row 1 | Component Object | ||||
*Form
...
| title | *Note |
|---|
This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component.
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
| |||||||||
| |||||||||
...
These parameters are required to trigger the "Link Clicked" Trigger Method.
| ||||||
...
| ||
...
| ||
...
| title | Explanation |
|---|
...
| ||
...
Figure |
...
16:The |
...
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. |
Ajax & Events configuration of the CRUD Component in the Event Triggering section. |
Form Component
...
Under Configure Form:
...
Under Redirection:
...
Under AJAX & Events:
...
| Form Label | Value | |
|---|---|---|
| Event Listening | ||
| Row 1 | Component Object | Manage Meeting |
| Event Name * | ||
...
...
| Info | ||
|---|---|---|
| ||
The application listens for a 'hide_form' event. When the event is triggered, it hides the "Manage Meeting" component object. |
...
| load_form | ||||||||||||
| Matched Action | Show and Change Component URL Parameters | |||||||||||
Parameters *
| ||||||||||||
...
| |||||
...
| |||||
| |||||
...
The application listens for a 'load_form' event. When the event is triggered, it shows and changes the component URL parameters in the "Manage Meeting" component object.
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 | |||||
| ||||||
...
*Form
...
| title | *Note |
|---|
This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component.
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 |
| 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 | |
Parameters Changed Rules
| ||||
...
These parameters are required to trigger the "GET Request" Trigger Method.
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. | ||||||
