...
| 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 the Ajax & Events Configuration sectiona later section to assist with clarification. |
| No. | Component | Configuration | Image (For Reference) | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | CRUD |
|
Figure |
11: The |
general configuration of the CRUD component.
Figure 12: The UI (List) configuration of the CRUD component. | |
| 2 | Form |
|
|
Figure 5: The List component relevant to the Meeting Date Management example from the App Composer.
|
Figure 13: The general configuration of the Form component.
Figure 14: 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.
Event Set 1: Hiding the Form by Default
...
Under Configure CRUD:
...
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
...
Under AJAX & Events:
| Form Label | Value | |
|---|---|---|
| Handle Component with AJAX? | (Checked) | |
...
| |||||
| Event Listening | |||||
| Row 1 | Component Object | ||||
*Form
...
| title | *Note |
|---|
This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component.
Main Menu Component |
| Event Name * |
...
| page_ |
...
| loaded |
| Matched Action |
...
| Hide Component | ||||||
| ||||||
...
| ||
...
| ||
...
| ||
...
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)
| ||||||||
| Event Triggering | |||||||||
| Row 1 | Event Name * | load_form | |||||||
| Trigger Method * | Link Clicked | ||||||||
Parameters Changed Rules
| |||||||||
| |||||||||
...
These parameters are required to trigger the "Link Clicked" Trigger Method.
| ||||||
...
| ||
...
| ||
...
| title | Explanation |
|---|
...
| ||
...
Figure |
...
16:The |
...
Result (with added data) after completing step 4 as shown in the below figure 13.
| 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. |
Ajax & Events configuration of the CRUD Component in the Event Triggering section. |
Form Component
| Form Label | Value | |
|---|---|---|
| Event Listening | ||
| Row 1 | ||
...
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. |
...
| Component Object | Manage Meeting | |||||||||||
| Event Name * | load_form | |||||||||||
| Matched Action | Show and Change Component URL Parameters | |||||||||||
Parameters *
| ||||||||||||
...
| |||||
...
| |||||
| |||||
...
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.
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 | ||
| Event Name * |
...
| reload_ |
...
| table | ||||||
| Trigger Method * | POST Request | |||||
| ||||||
...
*Form
...
| title | *Note |
|---|
This Form Component Object can only be properly configured after configuring the Event Triggering sub-property of the Form component.
Figure 18: The Ajax & Events configuration of the Form Component in the Event Triggering section. | ||
CRUD Component
| Form Label | Value | |
|---|---|---|
| Event Listening | ||
| Row 1 | Component Object | Form |
...
| Event Name * |
...
| reload_ |
...
| table |
| Matched Action |
...
| Show and Change Reload Component | ||||||
| ||||||
...
| ||
...
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 Label | Value | |
|---|---|---|
| Event Triggering | ||
| Row 1 | Event Name * | hide_form |
| Trigger Method * | GET Request | |
...
Parameters Changed Rules
...
...
| ||||
...
These parameters are required to trigger the "GET Request" Trigger Method.
For instance, in this context, when the parameter name "close" is equals to "true", then the "GET Request" Trigger Method is triggered.
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 | |||||
| ||||||
...
| ||
...
| ||
...
Figure 21: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||
...
| Row 2 | Component Object | Manage Meeting |
| Event Name * | ||
...
| hide_ |
...
| form | ||||||
| Matched Action | Hide Component | |||||
| ||||||
...
Figure 22: The Ajax & Events configuration of the Form Component in the Event Listening section. | ||
CRUD Component
| Form Label | Value | |||||
|---|---|---|---|---|---|---|
| Event Triggering | ||||||
| Row 1 | When Not Match Trigger Event Name | hide_form | ||||
Figure 23: The Ajax & Events configuration of the CRUD Component in the Event Triggering section | ||||||
...
. |