Knowledge Base
  • Select Role
  • English
  • Login

Page Components

Page Components in Joget allow users to configure the UI of an app's page with ease. They provide flexibility and customization to design pages that meet specific user requirements. The UI Builder now suggests an ID for a Page Component based on the Label you enter for that element, enhancing usability and consistency.

AJAX & events

AJAX & Events functionality is available at the Page Component level, allowing for dynamic interactions and event-driven updates within the app.

Event listening

Event listening allows components to react to specific events dynamically. 

When you enable, Handle Component With AJAX? you will see the following properties available for configuration:

  • Component Object: The object that will listen for an event, dynamically showing options based on the page components used.
  • Event Name: Custom name for the event.
  • Matched Action: Actions to be executed when the event is triggered, such as:
    • Hide Component
    • Show Component
    • Show and Reload Component
    • Show and Change URL Component Parameters
    • Reload Page
    • Redirect Page
    • Show and Redirect Component
  • Add row:  Adds another row for another event

Event triggering

Event triggering enables the dynamic initiation of events. 

When you enable it, can you handle the component with AJAX? You will see the following properties available for configuration:

  • Event Name: Custom name for the event to be triggered.
  • Trigger Method: The method used to trigger an event.
    • GET request
    • POST request
    • Link Clicked
  • Parameter Name: Custom parameter name for evaluation.
  • Operator: Logical operators are used to evaluate the parameter against a value.
    • Equals To
    • Not Equals To
    • Greater Than 
    • Greater Than
    • Greater Than or Equals To
    • Less than
    • Less than or equal to
    • Is True
    • Is False
    • Is Empty
    • Is Not Empty
    • Contains
    • In
    • Regex Match
  • Value: The value to which the parameter will be compared.
  • When Not Match Trigger Event Name: Event name to trigger when the logical operation is unsatisfied.
  • Add row: Add another row for another event.

List of page components

Page components are categorized into two main types: exclusive page components and UI elements that are available as page components.

Exclusive page components

Exclusive page components are specialized elements that provide unique functionalities for building app pages. These include:

UI elements available as page components

UI elements available as page components are versatile tools for creating interactive and visually appealing app pages. These include:

These components provide a robust toolkit for building and customizing app pages in Joget, enabling users to create interactive, dynamic, and visually appealing interfaces.

Download the demo app for Page Components:
Created by Julieth Last modified by Aadrian on Dec 13, 2024
Tags:
Previous UI Builder NextAccordion