New Feature
This is a new feature in Joget DX 8.
Introduction
Component Events enables interactions between page components with event triggering and event listening.
Example - Meeting Date Management
Expected Outcome
When a user clicks on the "Edit" button, a "Edit Meeting Details" form appears below the table without reloading the entire webpage.
Figure 1: A GIF illustrating 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 2: A photo showcasing how to get to the Component Events showcase in the Joget DX Showcase application.
Note
The Joget DX Showcase app is a default app that can be found in every fresh installation of Joget DX 8.
Required Components
| No. | Component | Name | Image (For Reference) |
|---|---|---|---|
| 1 | Form | Calendar - Meeting |
Figure 3: A photo displaying the Form component relevant to the Meeting Date Management example from the App Composer.
Figure 4: A photo displaying the Form component relevant to the Meeting Date Management example from the Form Builder. |
| 2 | List | List - Calendar - Meeting |
Figure 5: A photo displaying the List component relevant to the Meeting Date Management example from the App Composer.
Figure 6: A photo displaying the List component relevant to the Meeting Date Management example from the List Builder. |
| 3 | UI | Joget DX 8 Showcase |
Figure 7: A photo displaying the UI component relevant to the Meeting Date Management example from the App Composer.
Figure 8: A photo displaying the UI component relevant to the Meeting Date Management example from the UI Builder. |
Steps
- Make sure all the required components exist within an application.
- (From component 3) Click "Edit Page Components".
Figure 9: A photo displaying where to find the "Edit Page Component" button. - Add a CRUD component to the Design.
Figure 10: A photo displaying where to find and add the CRUD component in the Design page. - Configure the CRUD component's properties as such:
Under Configure CRUD:
Form Label Value Label * Manage Meeting List * List - Calendar - Meeting Form (Edit) Calendar - Meeting 
Figure 11: A photo displaying 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 Explanation
The application listens for a 'reload_table' event. When the event is triggered, it shows and reloads the Form component object.
Event Triggering Row 1 Event Name * load_form Trigger Method * Link Clicked Parameters Changed Rules
Row Parameter Name * Operator Value 1 _mode Equals To edit These parameters are required to trigger the "Link Clicked" Trigger Method.
For instance, in this context, when the parameter name "_mode" is equals to "edit", then the "Link Clicked" Trigger Method is triggered.
Explanation
When the "Link Clicked" Trigger Method is triggered, the "load_form" event is triggered.
When Not Match Trigger Event Name hide_form 
Figure 12: A photo displaying the required configuration in the AJAX & Events property.
- Result (with added data) after completing step 4 as shown in the below figure 13.
Figure 13: A photo showcasing the outcome after properly configuring the CRUD component. - Save the new configuration.
- Add a Form component to the Design.
Figure 14: A photo showcasing the outcome after properly configuring the CRUD component. - Configure the Form component's properties as such:
Under Configure Form:
Form Label Value Label * Form Form * Calendar - Meeting Display Field as Label When Readonly? (unchecked) 
Figure 15: A photo displaying the required configuration in the Configure Form property.Under Redirection:
Form Label Value URL Redirect on Cancellation ?close=true 
Figure 16: A photo displaying 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 Explanation
The application listens for a 'hide_form' event. When the event is triggered, it hides the "Manage Meeting" component object.
Row 2 Component Object Manage Meeting Event Name * load_form Matched Action Show and Change Component URL Parameters Parameters *
Row Parameter Name * Parameter Value 1 id (id) 2 close false 3 _action edit 4 _mode edit Explanation
The application listens for a 'load_form' event. When the event is triggered, it shows and changes component URL parameters in the "Manage Meeting" component object.
Row 3 Component Object Main Menu Component Event Name * page_loaded Matched Action Hide Component Explanation
The application listens for a 'page_loaded' event. When the event is triggered, it hides the Main Menu Component component object.
Row 4 Component Object Form Event Name * hide_form Matched Action Hide Component Explanation
The application listens for a 'hide_form' event. When the event is triggered, it hides the Form component object.
Event Triggering Row 1 Event Name * hide_form Trigger Method * GET Request Parameters Changed Rules
Row Parameter Name * Operator Value 1 close Equals To true Note
These parameters are required to trigger the "GET Request" Trigger Method.
For instance, in this context, when the parameter name "close" is equals to "true", then the "GET Request" Trigger Method is triggered.
Explanation
When the "GET Request" Trigger Method is triggered, the "hide_form" event is triggered.
Row 2 Event Name * reload_table Trigger Method * POST Request Explanation
When the "POST Request" Trigger Method is triggered, the "reload_table" event is triggered.
Figure 17: A photo partially displaying the required configuration in the AJAX & Events property.
Figure 18: A photo partially displaying the required configuration in the AJAX & Events property.
Figure 19: A photo partially displaying the required configuration in the AJAX & Events property.
- Result from completing step 8 as shown in the below figure 20.
Figure 20: A photo showcasing the outcome after properly configuring the Form component. - Save the new configuration.
- You have completed all the required steps to achieve the expected outcome.