Datalist Composer

Datalist Composer Overview

The Datalist Composer is built into the Joget Datalist Builder. Instead of manually configuring columns, filters, actions, and layout, you can describe what you need, and the composer generates the datalist configuration.

Everything created by the composer follows the standard Joget datalist configuration and remains fully editable. This makes it especially useful for quickly building or refining datalists without navigating multiple configuration screens.

The Composer works best when used iteratively, creating a base structure and then refining columns, filters, actions, and layout step by step.

Getting Started

Open any datalist in the Datalist Builder. The composer panel is available on the right.

Two ways to start:

• Describe it: Define columns, filters, actions, or layout. The composer builds the datalist structure.
• Show it: Upload a screenshot or reference layout. The composer recreates it using Joget datalist components.

Try this prompt:

Build a datalist for employee records with columns for Name, Department, Status, and Date Joined. Add a search filter, enable sorting, and include an edit row action. Use a clean table layout with proper formatting.

Two Modes of Composing

Targeted Edit

Select any column, filter, or action in the datalist. An inline composer prompt appears on that element.

Use this when you want to:

• Modify a specific column or formatter
• Adjust one filter or action
• Rename or reorder a column
• Update sorting or visibility

Full Composition

Use the main composer panel to describe the datalist as a whole.

Use this when you want to:

• Build a datalist from scratch
• Add multiple columns, filters, or actions
• Change layout (table, card, list)
• Configure joins, binders, or structure 

Reviewing Composer Output

After the composer runs, two options appear:

• Apply: Saves changes to the datalist
• Cancel: Discards all changes

Nothing is applied until confirmed.

What You Can Build

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

Columns & Structure

• Add, remove, rename, and reorder columns
• Quickly refine column visibility and ordering
• Apply sorting and default ordering

Display & Layout

• Table (default)
• Card layouts 
• List layouts
• Improve spacing, alignment, and readability

Filters & Search

• Full-text search
• Date range filters
• Custom filters
• Add, update, or remove filters

Actions (Key Strength)

• Row actions (edit, view, custom actions)
• Toolbar actions
• Modify or refine existing actions

Data & Configuration

• Configure data binders
• Apply joins (e.g., LEFT JOIN)
• Set pagination and page size

Prompting Guide

To get the best results, describe both structure and behavior clearly.

Describe the outcome, not just the column:

✗ Bad: Add a date column

✔ Good: Add a Date Joined column with the MMM dd yyyy format, sortable, and visible by default

Be specific where it matters:

✗ Bad: Add filters

✔ Good: Add a full-text search filter and a date range filter for Date Joined 

Provide full context in one prompt:

✗ Bad: Add employee datalist

✔ Good: Build an employee datalist with columns Name, Department, Status, and Date Joined. Add search, sorting, and an edit row action

Define data relationships clearly:

✗ Bad: Join department data

✔ Good: Join department table using LEFT JOIN using department_id and display department_name in the column

Refine instead of restarting:

✗ Bad: Redo everything

✔ Good: Update the Date Joined column to use the MMM dd yyyy format and enable sorting

Current Behaviour & Tips

These are known behaviours based on testing.

Column Mapping & Lookup Fields

In some cases, columns based on lookup or select box fields may require refinement to ensure correct display values.

What to do:
Use Refine to adjust column mapping by explicitly asking “Apply OptionsFormatter using form data (replace with relevant datasource to be used) for the column_name” or update formatter configuration if needed.

Actions & URLs

Row actions can be generated automatically, but in some cases, URLs may need adjustment depending on your app structure.

Best practice:
If your forms and UI are already configured, the Composer can reuse existing patterns more effectively. Otherwise, review generated URLs to ensure they match your app context. Read more at Vibe composition – Development flow.

Formatters

Standard formatters such as date formatting work reliably. More advanced formatter configurations may require manual adjustment.

Complex Configurations

For joins, advanced formatters, or custom configurations:

• Start with a basic structure
• Then refine step by step

Advanced configurations require detail
Complex setups like joins, formatters, and filters work best when explicitly defined

Prompt Playbook

Video Tutorial