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
      Row 1	Component Object	Form
      	Event Name *	reload_table
      	Matched Action	Show and Reload Component
      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
      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
      	Parameters * Row Parameter Name * Parameter Value 1 id (id) 2 close false 3 _action edit 4 _mode edit
      Row 3	Component Object	Main Menu Component
      	Event Name *	page_loaded
      	Matched Action	Hide Component
      Row 4	Component Object	Form
      	Event Name *	hide_form
      	Matched Action	Hide Component
      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
      Row 2	Event Name *	reload_table
      	Trigger Method *	POST Request

      
      
      

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