Versions Compared

Key

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

...

No.ComponentNameImage (For Reference)
1FormCalendar - Meeting

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


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

2ListList - Calendar - Meeting

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


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

3UIJoget DX 8 Showcase

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


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

...

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.

Show Delete Button
No.ComponentConfigurationImage (For Reference)
1CRUD
Component PropertyFieldValue
Configure CRUDLabelManage Meeting
ListList - 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)

Figure 411: The Form component relevant to the Meeting Date Management example from the Form Buildergeneral configuration of the CRUD component.


Figure : sdfsdfsdfsdfds

Figure : sdfsdfsdfsdfds

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

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

Figure : sdfsdfsdfsdfds13: The general configuration of the Form component.


Figure : sdfl;ksdfl;ksdl;k;lskdf14: The Redirection configuration of the Form component.


Ajax & Events Configuration

The process to set up the Meeting 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 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 LabelValue
Handle Component with AJAX?

(Checked)

-

Info
titleNote
Checking this label will enable the following sub-properties.
Event Listening
Row 1Component 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).

Main Menu Component
Event Name *reloadpage_tableloaded
Matched ActionShow and Reload Hide Component
Info
titleExplanation

The application Main Menu Component listens for a 'reloadpage_tableloaded' event. When the event is triggered, it shows and reloads the Form component object 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_modeEquals Toedit
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 Namehide_form
Info
titleExplanation

When the Edit button is clicked, the

"Link Clicked" trigger method is activated, it initiates

"_mode" parameter becomes equal to "edit", which triggers the "load_form" event.

...

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

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.

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


Image Added

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

Form Component

...

Under Configure Form:

...

Under Redirection:

...

Under AJAX & Events:

...

Info
titleExplanation

The application listens for a 'hide_form' event. When the event is triggered, it hides the "Manage Meeting" component object.

...

Form LabelValue
Event Listening
Row 1
Component 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

...

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.

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 16:The Ajax & Events configuration of the CRUD Component in the Event Triggering section.





template

Form LabelValue
Handle Component with AJAX?

(Checked)

...

Info
title

...

Note

This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component.

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

...

Event Name *

...

page_

...

loaded
Matched ActionHide 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 Triggering
Row 1
Event Name *

...

load_form
Trigger Method *

...

Link Clicked

Parameters Changed Rules

RowParameter Name *OperatorValue
1

...

_modeEquals To

...

edit
Info

...

titleNote

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.

...

Info
titleExplanation

When the "GET Request" trigger method is activated, it initiates the "hide_form" event.

 

...

When Not Match Trigger Event Namehide_form
Info
titleExplanation

When the "Link Clicked" trigger method is activated, it initiates the "

...

load_

...

form" event.