Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Panel
borderColorpurple
bgColorwhite
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature
English
This is
a
the new feature in Joget DX 8.

Introduction

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 row of data, the table gets updated with the corresponding values.

Image Added

Figure 3: The expected outcome through the proper implementation of a component event.Image Removed


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 4: How to get to the Component Events showcase in the Joget DX Showcase application.


Info
titleNote

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.ComponentNameImage (For Reference)
1FormCalendar - Meeting

Figure 5: The Form component relevant to the Meeting Date Management example from the App Composer.


Figure 6: The Form component relevant to the Meeting Date Management example from the Form Builder.

2ListManage List - Calendar - Meeting

Figure 7: The List component relevant to the Meeting Date Management example from the App Composer.


Figure 8: The List component relevant to the Meeting Date Management example from the List Builder.

3UIJoget DX 8 Showcase

Image Removed

Steps

...

Under Configure CRUD:

Figure 9: The UI component relevant to the Meeting Date Management example from the App Composer.


Image Added

Figure 10: The UI component relevant to the Meeting Date Management example from the UI Builder.

Page Component-Level

Info
titleNote

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.ComponentConfigurationImage (For Reference)
1CRUD
Component PropertyFieldValue
Configure CRUDLabel

...

Manage Meeting
List

...

List - Calendar - Meeting
Form (Add)Calendar - Meeting
Form (Edit)Calendar - Meeting
UI (List)Show Delete Button?(checked)
Delete Associated Grid Data?(checked)
Delete Associated Child Form Data?(checked)

Image Added

Figure 11: The general configuration of the CRUD component.


Image AddedImage Added

Figure 12: The UI (List) configuration of the CRUD component.

2Form
Component PropertyFieldValue
Configure FormLabelManage Meeting
FormCalendar - Meeting
Display Field as Label When Readonly?(unchecked)
RedirectionURL Redirect on Cancellation?close=true

Image Added

Figure 13: The general configuration of the Form component.


Image AddedImage Added

Figure 14: The Redirection configuration of the Form component.


Ajax & Events Configuration

The process to set up the Meeting

...

Image Removed

Date Management system is broken down into 3 sets:

  1. Hiding the Form by default.
  2. The corresponding Form shows when the "Edit" button is clicked.
  3. When the "Save" button is clicked-
    1. The table reloads with the new data.
    2. The Form becomes hidden.

Before you proceed, please make sure all the required components mentioned in the previous section 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

Form

Under AJAX & Events:

...

LabelValue
Handle Component with AJAX?

(Checked)

...

Info
titleNote
Checking this label will enable the following sub-properties.
Event Listening
Row 1Component Object

...

Main Menu Component
Event Name *

...

page_

...

loaded
Matched Action

...

Hide Component
Info
titleExplanation

The Main Menu Component listens for a 'page_loaded' event. When the event is triggered, it hides the Main Menu Component component object.


Image Added

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 LabelValue
Handle Component with AJAX?

(Checked)

Info
titleNote
Checking this label will enable the following sub-properties.
Event Triggering
Row 1
Event Name *load_form
Trigger Method *Link Clicked

Parameters Changed Rules

RowParameter Name *OperatorValue
1_mode

...

Equals To

...

edit

...

 
Info
titleExplanation

When the Edit button is clicked, the "_mode" parameter becomes equal to "edit", which triggers the "load_form" event.


Image Added

Figure 16:The Ajax & Events configuration of the CRUD Component in the Event Triggering section.

Form Component

Image Removed

...

Form LabelValue

...

Image Removed

Event Listening
Row 1Component Object
Manage Meeting
Event Name *load_form
Matched ActionShow and Change Component URL Parameters

Parameters *

RowParameter Name *Parameter Value
1id{id}
2closefalse
3_modeedit
4_actionedit
Info
titleExplanation

Upon receiving a call for this event, the Manage Meeting Component Object will Show and Change its Component URL Parameters to the set values.


Image Added

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 LabelValue
Event Triggering
Row 1
Event Name *reload_table
Trigger Method *POST Request
Info
titleExplanation

The Form triggers a "reload_table" event via a POST Request.


Image Added

Figure 18: The Ajax & Events configuration of the Form Component in the Event Triggering section.


CRUD Component

Form LabelValue
Event Listening
Row 1Component Object
Form
Event Name *reload_table

Under Redirection:

...

Image Removed

Under AJAX & Events:

...

Matched ActionShow and Change

...

Reload Component
Info
titleExplanation

The CRUD component listens for a "reload_table" event from the Form, and then Shows and Reloads the CRUD Component, which in turns reloads the List and includes the newly updated values.


Image Added

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 LabelValue
Event Triggering
Row 1
Event Name *hide_form
Trigger Method *GET Request
Info
titleExplanation

The Form checks the value of the 'close' parameter on any GET Request.

If the value is true, then the 'hide_form' event is triggered.


Image Added

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
Info
titleExplanation

When the "hide_form" event is heard, the Form Component Object is hidden.


Image Added

Figure 21: The Ajax & Events configuration of the Form Component in the Event Listening section.

Row 2Component Object
Manage Meeting

...

Event Name *

...

hide_form

...

Matched ActionHide Component
Info
titleExplanation

When the "hide_form" event is heard, the Manage Meeting Object is hidden.


Image Added

Figure 22: The Ajax & Events configuration of the Form Component in the Event Listening section.


CRUD Component

Form LabelValue
Event Triggering
Row 1
When Not Match Trigger Event Namehide_form
Info
title

Image Removed
Image Removed
Image Removed

Explanation

When the Trigger Event name doesn't match "load_form", then the "hide_form" event is called.


Image Added

Figure 23: The Ajax & Events configuration of the CRUD Component in the Event Triggering section.

...