UI Composer

UI Composer Overview

The UI Composer is built into the Joget UI Builder. Instead of manually configuring navigation menus, page components, and dashboards, you can describe what you need, and the composer generates the UI configuration.

Everything created by the composer follows standard Joget UI configuration and remains fully editable. This makes it particularly useful for quickly assembling production-ready application interfaces through conversation rather than drag-and-drop.

The Composer works best when used iteratively, creating a base structure and then refining page components, menus, and dashboards step by step.

Getting Started

Open any UI in the UI Builder.

Two ways to start:

• Describe it: Define navigation menus, dashboard tiles, charts, and page layouts. The composer builds the UI structure.
• Show it: Upload a screenshot or reference layout. The composer recreates it using standard Joget UI components.

Try this prompt:

Build a modern dashboard for project management with an overview page containing a project status chart, a list of active tasks, and quick navigation buttons to 'Create New Project' and 'View All Tasks'.

Two Modes of Composing

Targeted Edit

Select any menu item or page component in the UI Builder.

Use this when you want to:

• Modify a specific component’s properties or label
• Adjust styling for a particular section
• Replace or refine a single menu element

Full Composition

Use the main composer panel to describe the UI or dashboard as a whole.

Use this when you want to:

• Build a full UI layout from scratch
• Add multiple navigation menus and pages
• Restructure the overall navigation flow
• Apply changes across multiple page components

Reviewing Composer Output

After the composer runs, two options appear:

• Apply: Saves changes to the UI configuration
• Cancel: Discards all generated changes

Nothing is applied until confirmed.

What You Can Build

Check out prompt playbooks and the startup guide for detailed instructions.

Navigation Menus

• CRUD, Datalist, and Form menus
• Run Process and Process List menus
• Dashboards, Rich Text, and Link elements

Page Components

• Information tiles and charts for metrics
• Headings, paragraphs, and labels
• Buttons, images, and HTML code
• Containers, accordions, and column layouts

The UI Composer is particularly effective at quickly assembling complex dashboards with various metric tiles and charts.

Layout & Structure

• Define categories and menu organization
• Setup multi-column page layouts
• Configure page spacing and component hierarchy

Advanced Features

• Configure menu and page permissions
• Setup quick navigation menus

Use the Composer to refine access controls by defining which roles can access specific pages and actions.

Prompting Guide

To get the best results, describe the purpose and layout of the UI clearly.

Describe the outcome, not just the component

✗ Bad: Add a chart

✔ Good: Add a Project Status bar chart to the dashboard overview page, using the Project Datalist as the source

Be specific about the layout where it matters

✗ Bad: Make a dashboard

✔ Good: Create a dashboard with three info tiles at the top for Open, In-Progress, and Completed tasks, followed by a pie chart showing task distribution by priority

Provide full navigation context in one prompt

✗ Bad: Add menus

✔ Good: Build categories for Operations, HR, and Reports. Add the Employee Form to HR and the Sales Datalist to Operations

Define role-based visibility clearly

✗ Bad: Fix permissions

✔ Good: Restrict the Admin Dashboard page so that it is only visible to users with the Manager role

Refine instead of restarting

✗ Bad: Redo the layout

✔ Good: Update the dashboard info tiles to use a dark theme background with white icons for a modern look

Current Behaviour & Tips

These are known behaviours and best practices based on development logs.

Baseline Generation First

Use Joget’s built-in CRUD generation to quickly create a working baseline UI and data flow. This ensures standard configurations are applied correctly out of the box.

What to do:
Start with the generated baseline, then use the Composer to “refine and enhance the dashboard layout” or “modernize the navigation menu styles”.

Final Assembly Layer

Using the “Generate App” feature, users can quickly create lists and full CRUD functionality. The UI Composer is then used to design and enhance the application interface by adding navigation and other menu elements, helping deliver a well-structured, modern user experience for business users.

UI navigation should be configured after forms and datalists are defined, as many UI elements (such as menu links and datalist actions like Add/Edit) depend on existing form mappings or URL configurations.

For example, in the Datalist Builder, actions like Add or Edit require a valid form or link URL to be configured. If these are not defined beforehand, the UI Composer may not be able to resolve the navigation correctly, leading to incorrect or non-functional links.

As a recommended approach, first design and finalize your forms and datalists, including their actions and link behaviors (as outlined in the Datalist Builder documentation). Then, proceed to configure the UI Composer to structure navigation, menus, and user experience.

You may refer to the Vibe Composer guide for the recommended development flow, followed by the Datalist Builder section for proper action and link configuration.

Component placement: Prompts should be configured at the top-level UI layer (UI → Pages). If the applied changes are not visible, verify the associated menu category settings, as they may impact how the updates are rendered.

Usage recommendation: This initial version of UI composer is best suited for lightweight use cases. For applications with a large number of existing menus or complex navigation structures, it is not recommended at this stage, as the behavior may be inconsistent. For now, it should be used primarily for simple implementations such as informational tiles and basic UI elements.

Best practice

Finalize your forms and processes first. The Composer can then more effectively connect them into a unified UI.

Permissions

Update navigation permissions based on group/department. Note: Currently limited to Joget Directory groups only.

Complex Dashboards

For dashboards with many interdependent charts and tiles:

• Start with a basic layout
• Then refine component by component

Prompt Playbook

Video Tutorial