Versions Compared

Key

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

...

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

Image RemovedImage Added

Figure 13: The expected outcome through the proper implementation of a component event.

...

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 24: 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 3: The Form component relevant to the Meeting Date Management example from the App Composer.


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

2ListList - Calendar - Meeting

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


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

3UIJoget DX 8 Showcase

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


Figure 8: 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 the Ajax & Events Configuration section.

No.ComponentConfigurationImage (For Reference)
1CRUD
Component PropertyFieldValue
Configure CRUDLabelManage Meeting

ListList - Calendar - Meeting

Form (Add)Calendar - Meeting

Form (Edit)Calendar - Meeting

Image Added

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





2FormList - Calendar - Meeting

Image Added

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


Image Added

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



Ajax & Events Configuration

The process to set up the Meeting Date Management system is broken down into 3 sets:

...

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

...

  1. (From component 3) Click "Edit Page Components".

    Figure 9: The location to find the "Edit Page Component" button.
    Add 2 components to the Design: CRUD and Form.
    Image Removed
    Figure 10: The location to find and add the CRUD and Form component in the Design page.



  2. Configure the CRUD component's properties as such:
    1. Under Configure CRUD:

      Form LabelValue
      Label *Manage Meeting
      List *List - Calendar - Meeting
      Form (Edit)Calendar - Meeting


      Figure 11: The required configuration in the Configure CRUD property.

    2. Under AJAX & Events:

      Form LabelValue
      Handle Component with AJAX?(Checked) - 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).

      Event Name *reload_table
      Matched ActionShow and Reload Component
      Info
      titleExplanation

      The application listens for a 'reload_table' event. When the event is triggered, it shows and reloads the Form component object.



      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 "Link Clicked" trigger method is activated, it initiates the "load_form" event.


      Figure 12: The required configuration in the AJAX & Events property.

  3. 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.

  4. Save the new configuration.
  5. Add a Form component to the Design.

    Figure 14: The outcome after properly configuring the CRUD component.

  6. Configure the Form component's properties as such:
    1. Under Configure Form:

      Form LabelValue
      Label *Form
      Form *Calendar - Meeting
      Display Field as Label When Readonly?(unchecked)


      Figure 15: The required configuration in the Configure Form property.

    2. Under Redirection:

      Form LabelValue
      URL Redirect on Cancellation?close=true


      Figure 16: The required configuration in the Redirection property.

    3. Under AJAX & Events:

      Form LabelValue
      Handle Component with AJAX?(Checked) - Checking this label will enable the following sub-properties.
      Event Listening
      Row 1Component ObjectManage Meeting
      Event Name *hide_form
      Matched ActionHide Component
      Info
      titleExplanation

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

      Row 2Component ObjectManage Meeting
      Event Name *load_form
      Matched ActionShow and Change Component URL Parameters

      Parameters *

      RowParameter Name *Parameter Value
      1id{id}
      2closefalse
      3_actionedit
      4_modeedit
      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.

      Row 3Component ObjectMain Menu Component
      Event Name *page_loaded
      Matched ActionHide Component
      Info
      titleExplanation

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

      Row 4Component 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 ActionHide Component
      Info
      titleExplanation

      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

      RowParameter Name *OperatorValue
      1closeEquals Totrue
      Info
      titleNote

      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
      titleExplanation

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

       

      Row 2Event Name *reload_table
      Trigger Method *POST Request
      Info
      titleExplanation

      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).

  7. Result from completing step 8 as shown in the below figure 20.

    Figure 20: The outcome after properly configuring the Form component.

  8. Remember to revisit steps 4 (b) and 8 (c) to change the Component Objects from 'Main Menu Component' to 'Form'.
  9. Save the new configuration.
  10. You have completed all the required steps to achieve the expected outcome.