...

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".

Image Added

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.

Image Added

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.

Image RemovedImage Added

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.

...

Required Components

Application-Level

...

Page Component-Level

Ajax & Events Configuration

The process to set up the Meeting Date Management system is broken down into 3 sets:

...

Before you proceed, please make sure all the required components mentioned in the previous section has been set up.

Event Set 1: Hiding the Form by Default

...

1. (From component 3) Click "Edit Page Components".
   
   Figure 9: The location to find the "Edit Page Component" button.
   Add 2 components to the Design: CRUD and Form.
   Image Removed
   Figure 10: The location to find and add the CRUD and Form component in the Design page.
   
   
2. 
   
   
3. Configure the CRUD component's properties as such:
   

   1. 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.
      
      

   2. 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 Info title *Note 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 (c).
      	Event Name *	reload_table
      	Matched Action	Show and Reload Component
      	Info title 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 Info 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.
      	When Not Match Trigger Event Name	hide_form
      	Info title Explanation When the "Link Clicked" trigger method is activated, it initiates the "load_form" event.

      
      Figure 12: The required configuration in the AJAX & Events property.
      
      

4. Result (with added data) after completing step 4 as shown in the below figure 13.
   

   Info
   title *Note
   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.
   
   

5. Save the new configuration.
6. Add a Form component to the Design.
   
   Figure 14: The outcome after properly configuring the CRUD component.
   
   
7. Configure the Form component's properties as such:

   1. 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.
      
      

   2. Under Redirection:

      Form Label	Value
      URL Redirect on Cancellation	?close=true

      
      Figure 16: The required configuration in the Redirection property.
      
      

   3. 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
      	Info title 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
      	Info title Explanation 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.
      Row 3	Component Object	Main Menu Component
      	Event Name *	page_loaded
      	Matched Action	Hide Component
      	Info title 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 Info title *Note 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 (c).
      	Event Name *	hide_form
      	Matched Action	Hide Component
      	Info title 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 Info title 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.
      	Info title Explanation When the "GET Request" trigger method is activated, it initiates the "hide_form" event.
      Row 2	Event Name *	reload_table
      	Trigger Method *	POST Request
      	Info title Explanation When the "Link Clicked" trigger method is activated, it initiates the "reload_table" event.

      
      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).
      
      

8. Result from completing step 8 as shown in the below figure 20.
   
   Figure 20: The outcome after properly configuring the Form component.
   
   
9. Remember to revisit steps 4 (b) and 8 (c) to change the Component Objects from 'Main Menu Component' to 'Form'.
10. Save the new configuration.
11. You have completed all the required steps to achieve the expected outcome.