...
No. | Component | Name | Image (For Reference) |
---|
1 | Form | Calendar - 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. |
2 | List | List - 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. |
3 | UI | Joget 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 |
---|
|
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. | Component | Configuration | Image (For Reference) |
---|
1 | CRUD | Component Property | Field | Value |
---|
Configure CRUD | Label | 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) |
|
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. |
2 | Form | Component Property | Field | Value |
---|
Configure Form | Label | Manage Meeting | Form | Calendar - Meeting |
Redirection | Show Delete ButtonDisplay Field as Label When Readonly? | ( | checked)unchecked) | Redirection | URL 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:
- Hiding the Form by default.
- The corresponding Form shows when the "Edit" button is clicked.
- When the "Save" button is clicked-
- The table reloads with the new data.
- 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 Label | Value |
---|
Handle Component with AJAX? | - Info |
---|
| Checking this label will enable the following sub-properties. |
|
Event Listening |
Row 1 | Component Object | *Form Info |
---|
| 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 Action | Show and Reload Hide Component |
Info |
---|
| 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 Label | Value |
---|
Handle Component with AJAX? | (Checked) Info |
---|
| Checking this label will enable the following sub-properties. |
|
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 |
---|
| 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 |
---|
|
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 |
---|
|
The application listens for a 'hide_form' event. When the event is triggered, it hides the "Manage Meeting" component object. |
...
Form Label | Value |
---|
Event Listening |
Row 1 |
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 | _ |
|
...
...
...
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 Label | Value |
---|
Event Triggering |
Row 1 |
...
...
table |
Trigger Method * | POST Request |
|
...
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 Label | Value |
---|
Handle Component with AJAX? | |
...
...
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 1 | Component Object | Main Menu Component |
...
...
...
loaded |
Matched Action | Hide Component |
|
...
Main Menu Component listens for a ' |
|
...
...
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 Row | Parameter Name * | Operator | Value |
---|
1 |
|
...
...
...
These parameters are required to trigger the " |
|
...
Link Clicked" Trigger Method. For instance, in this context, when the parameter name " |
|
...
...
...
Link Clicked" Trigger Method is triggered. |
|
...
Info |
---|
|
When the "GET Request" trigger method is activated, it initiates the "hide_form" event. |
...
When Not Match Trigger Event Name | hide_form |
Info |
---|
| When the "Link Clicked" trigger method is activated, it initiates the " |
|
...
...