...
| Info | ||
|---|---|---|
| ||
This section does not include details on the Ajax & Events property configuration. It can be found in the Ajax & Events Configuration a later section. |
| No. | Component | Configuration | Image (For Reference) | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | CRUD |
|
Figure 4: The Form component relevant to the Meeting Date Management example from the Form Builder.
Figure : sdfsdfsdfsdfds Figure : sdfsdfsdfsdfds | |||||||||||||||||||
| 2 | Form |
|
|
|
Figure |
: sdfsdfsdfsdfds
Figure: sdfl;ksdfl;ksdl;k;lskdf |
Ajax & Events Configuration
...
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
...
To enable the Component Events feature, check the "Handle Component with AJAX?" field in the AJAX & Events
Event Set 1: Hiding the Form by Default
Under Configure CRUD:
...
| 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
| |||||||||||
| When Not Match Trigger Event Name | hide_form | ||||||||||
| |||||||||||
Figure 12: The required configuration in the AJAX & Events property.
Result (with added data) after completing step 4 as shown in the below figure 13.
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.
Figure 13: The outcome after properly configuring the CRUD component.- Save the new configuration.
- Add a Form component to the Design.
Figure 14: The outcome after properly configuring the CRUD component. - Configure the Form component's properties as such:
Under Configure Form:
Form Label Value Label * Form Form * Calendar - Meeting Display Field as Label When Readonly? (unchecked) 
Figure 15: The required configuration in the Configure Form property.Under Redirection:
Form Label Value URL Redirect on Cancellation ?close=true 
Figure 16: The required configuration in the Redirection property.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 Info title Explanation The application listens for a 'hide_form' event. When the event is triggered, it hides the "Manage Meeting" component object.
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 Info title Explanation 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.
Row 3 Component Object Main Menu Component Event Name * page_loaded Matched Action Hide Component Info title Explanation The application listens for a 'page_loaded' event. When the event is triggered, it hides the Main Menu Component component object.
Row 4 Component 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).
Event Name * hide_form Matched Action Hide Component Info title Explanation The application listens for a 'hide_form' event. When the event is triggered, it hides the Form component object.
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 Info title Note 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.
Info title Explanation When the "GET Request" trigger method is activated, it initiates the "hide_form" event.
Row 2 Event Name * reload_table Trigger Method * POST Request Info title Explanation When the "Link Clicked" trigger method is activated, it initiates the "reload_table" event.
Figure 17: The required configuration in the AJAX & Events property (partial).
Figure 18: The required configuration in the AJAX & Events property (partial).
Figure 19: The required configuration in the AJAX & Events property (partial).
- Result from completing step 8 as shown in the below figure 20.
Figure 20: The outcome after properly configuring the Form component. - Remember to revisit steps 4 (b) and 8 (c) to change the Component Objects from 'Main Menu Component' to 'Form'.
- Save the new configuration.
- You have completed all the required steps to achieve the expected outcome.