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.

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.

Required Components

Steps

1. Make sure all the required components exist within an application.
2. (From component 3) Click "Edit Page Components".
   
3. Add a CRUD component to the Design.
   
4. 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

      

   2. Under AJAX & Events:

      Form Label	Value
      Handle Component with AJAX?	(Checked) - Checking this label will enable the following sub-properties.
      Event Listening
      Component Object	Form
      Event Name *	reload_table
      Matched Action	Show and Reload Component
      Event Triggering
      Event Name *	load_form
      Trigger Method *	Link Clicked
      Parameters Changed Rules
      Parameter Name	_mode
      Operator	Equals To
      Value	edit
      When Not Match Trigger Event Name	hide_form

      

5. Result (with added data) after completing step 4:
   
6. Save the new configuration.
7. Add a Form component to the Design.
   
8. 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)

      

   2. Under Redirection:

      Form Label	Value
      URL Redirect on Cancellation	?close=true

      

   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
      Row 2	Component Object	Manage Meeting
      	Event Name *	load_form
      	Matched Action	Show and Change Component URL Parameters
      Row 3	Component Object	Form
      	Event Name *	reload_table
      	Matched Action	Show and Reload Component
      Row 4	Component Object	Form
      	Event Name *	reload_table
      	Matched Action	Show and Reload Component
      Event Triggering
      	Event Name *	load_form
      	Trigger Method *	Link Clicked
      	Parameters Changed Rules
      	Parameter Name	_mode
      	Operator	Equals To
      	Value	edit
      	When Not Match Trigger Event Name	hide_form

      
      
      

9. Result from completing step 8:
10. Save the new configuration.
11. You have completed all the required steps to achieve the expected outcome.