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

Compare with Current View Page History

« Previous Version 16 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.

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.

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

2ListManage Meeting

3UI

Steps

  1. Make sure all the required components exist within an application.
  2. (From component 3) Click "Edit Page Components".
  3. Add a CRUD component to the Design.
  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

    2. Under AJAX & Events:

      Form LabelValue
      Handle Component with AJAX?(Checked) - Checking this label will enable the following sub-properties.
      Event Listening
      Component ObjectForm
      Event Name *reload_table
      Matched ActionShow and Reload Component
      Event Triggering
      Event Name *load_form
      Trigger Method *Link Clicked
      Parameters Changed Rules
      Parameter Name_mode
      OperatorEquals To
      Valueedit
      When Not Match Trigger Event Namehide_form

  5. Result (with added data) after completing step 4:
  6. Save the new configuration.
  7. Add a Form component to the Design.
  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)

    2. Under Redirection:

      Form LabelValue
      URL Redirect on Cancellation?close=true

    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



      Row 3Component ObjectForm
      Event Name *reload_table
      Matched ActionShow and Reload Component
      Row 4Component ObjectForm
      Event Name *reload_table
      Matched ActionShow and Reload Component



      Event Triggering

      Event Name *load_form

      Trigger Method *Link Clicked

      Parameters Changed Rules

      Parameter Name_mode

      OperatorEquals To

      Valueedit

      When Not Match Trigger Event Namehide_form



  9. Result from completing step 8:
  • No labels