You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

New Feature

This is a new feature in Joget DX 8.

Introduction

Component Events enables interactions between page components with event triggering and event listening.

Example - Meeting Date Management

Expected Outcome

When a user clicks on the "Edit" button, a "Edit Meeting Details" form appears below the table without reloading the entire webpage.

Figure 1: A GIF illustrating 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 2: A photo showcasing how to get to the Component Events showcase in the Joget DX Showcase application.

Note

The Joget DX Showcase app is a default app that can be found in every fresh installation of Joget DX 8.

Required Components

No.ComponentNameImage (For Reference)
1FormCalendar - Meeting

Figure 3: A photo displaying the Form component relevant to the Meeting Date Management example from the App Composer.

Figure 4: A photo displaying the Form component relevant to the Meeting Date Management example from the Form Builder.

2ListList - Calendar - Meeting

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

Figure 6: A photo displaying the List component relevant to the Meeting Date Management example from the List Builder.

3UIJoget DX 8 Showcase

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

Figure 8: A photo displaying the UI component relevant to the Meeting Date Management example from the UI Builder.

Steps

  1. Make sure all the required components exist within an application.
  2. (From component 3) Click "Edit Page Components".

    Figure 9: A photo displaying where to find the "Edit Page Component" button.
  3. Add a CRUD component to the Design.

    Figure 10: A photo displaying where to find and add the CRUD component in the Design page.
  4. 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: A photo displaying 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 ObjectForm
      Event Name *reload_table
      Matched ActionShow and Reload Component
      Event Triggering
      Row 1
      Event Name *load_form
      Trigger Method *Link Clicked

      Parameters Changed Rules

      RowParameter Name *OperatorValue
      1_modeEquals Toedit

      Note

      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


      Figure 12: A photo displaying the required configuration in the AJAX & Events property.

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

    Figure 13: A photo showcasing the outcome after properly configuring the CRUD component.
  6. Save the new configuration.
  7. Add a Form component to the Design.

    Figure 14: A photo showcasing the outcome after properly configuring the CRUD component.
  8. 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: A photo displaying the required configuration in the Configure Form property.

    2. Under Redirection:

      Form LabelValue
      URL Redirect on Cancellation?close=true


      Figure 16: A photo displaying 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
      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
      Row 3Component ObjectMain Menu Component
      Event Name *page_loaded
      Matched ActionHide Component
      Row 4Component ObjectForm
      Event Name *hide_form
      Matched ActionHide Component
      Event Triggering
      Row 1
      Event Name *hide_form
      Trigger Method *GET Request

      Parameters Changed Rules

      RowParameter Name *OperatorValue
      1closeEquals Totrue

      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.

      Row 2Event Name *reload_table
      Trigger Method *POST Request


      Figure 17: A photo partially displaying the required configuration in the AJAX & Events property.

      Figure 18: A photo partially displaying the required configuration in the AJAX & Events property.

      Figure 19: A photo partially displaying the required configuration in the AJAX & Events property.

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

    Figure 20: A photo showcasing the outcome after properly configuring the Form component.
  10. Save the new configuration.
  11. You have completed all the required steps to achieve the expected outcome.
  • No labels