Component Interaction in a Joget App

In a Joget application, the seamless interaction between User Interfaces (UIs), Forms, Lists, and Processes creates a dynamic and functional application. Understanding how these components work together helps you appreciate the application's workflow and capabilities. Learn how to create and use them on the Create an App page.

User interfaces (UIs)

At the heart of every app lies the UI - the gateway through which users access its features. An app can comprise one or more UIs, each with its unique theme. These UIs consist of menu pages housing an array of elements, such as forms, lists, reports, graphs, and even HTML content. The UI is your canvas to deliver an outstanding user experience.

UIs provide the visual layer at which users interact with the app. They determine how information and functionalities are presented to the user.​

Interaction:

• UIs host other components like forms, lists, and visual representations (like graphs and reports).
• They can be themed or customized to maintain consistency with the organization's branding or user preferences.
  
  

  

  

Forms​

Forms are essential tools for collecting and presenting data. They come in various formats, from basic text fields to advanced form grids, making it easy to gather information efficiently. The selection of form elements provides you with the appropriate tool for any task, whether it's a simple text entry or a complex data arrangement.

Forms are integral for data input and interaction within the app. They capture user input that can be stored, processed, or used within other components.

Interaction:

• Forms are embedded within UIs and are the primary data entry into the system.
• The data collected through forms can be displayed in lists or used in processes.
• Forms can initiate processes, such as submitting an expense claim and triggering a workflow process.
  
  

Lists​

Lists are organized spreadsheets with superpowers that make data consumption delightful. These tables bring forth a wealth of features, including paging, sorting, filtering, and exporting. They transform raw data into meaningful insights while maintaining a structured appearance.

Interaction:

• Lists can display data collected from forms.
• They serve as a data management tool where users can view and interact with the aggregated data.
• Lists can be linked to processes; an approver might use a list to see all pending approvals.
  

Processes​

When using Joget, a process is a series of connected steps that work together to achieve a specific goal or task within an application. Processes are essential in determining the flow of tasks, data, and interactions within the application. This can include routing and working with external systems, such as sending emails or updating databases.

Interaction:

• Processes utilize data entered through forms to route tasks and make decisions.
• They can automate interactions between forms and lists, such as routing a filled-out claim form to an appropriate manager's list for approval.
• Processes may also integrate with external systems, further automating the app’s functionality, such as sending notifications via email or updating external databases.
  
  

Expense claim app workflow

1. UI Display: The user logs in and navigates to the expense claim section through the UI.
2. Form Usage: The user fills out and submits the expense claim form.
3. Process Trigger: The submission triggers a process that routes the claim to the relevant manager for approval.
4. List Update: The manager reviews the claim through a list in their approver inbox.
5. Process Completion: Upon approval, the process may update the status in the list and possibly integrate with an external finance system to process the payment.