Custom DataList Template Pack

Introduction

Custom DataList Template Pack for Joget that adds multiple ready-made DataList layouts (card/grid/table styles) with configurable options, including expandable rows and protected row selection. Each layout comes with its own configuration options. 

Plugin Information

Plugins available in the bundle:

1. Custom DataList Template Pack

This plugin bundle is compatible with Joget DX 8 and Joget DX 9.

Get Started

Where To Get The Plugin

1. You can obtain the .jar file from Source Code and Plugin Repository.
2. Upload the plugin .jar file in Joget via Settings > Manage Plugins.

How To Use It

Step 1: Open the List Builder and select the template

Open the list you want to style in the List Builder, go to the Settings tab and open Basic Properties. In the Template dropdown, select List – Custom DataList Template Pack.

Step 2: Choose a layout

Click Next to open Custom DataList Template Configuration, then choose the layout you want from the Select Template property. Each option is shown as a visual preview, so you can see how the list will be rendered before applying it.

Step 3: Configure the layout properties

Each layout exposes its own set of properties — for example, how row actions are displayed, or how metadata fields are separated. Configure them to suit your list. See Configure template properties for the full list per layout.

Four of the six layouts include a Row Actions Type property, which controls how the row actions defined in the Data tab are presented on each record:

• Dropdown Menu – All actions are collapsed into a single menu on each row.
• Normal Buttons – Each action is rendered inline as its own button.
• Bottom of Row – Actions are placed on a separate line at the bottom of the card or row.
• Normal Buttons with Swipe Left on Mobile – Buttons on desktop; on mobile, the actions stay hidden until the user swipes the row to the left.

Step 4: Arrange the columns in the Design tab

Go to the Design tab and drag the columns you want to display into the row, arranging them in the order they should appear. The layout you selected in Step 2 determines how those columns are rendered (as a card, a grid, an expandable row, and so on).

Step 5: Save and preview

Click Save, then use Preview to confirm the layout renders as expected. At runtime, each record is displayed using the selected layout together with its configured row actions — depending on the layout, users can expand a row to reveal additional fields, select rows using the checkbox column for bulk actions, or trigger row actions directly from the card.

Configure Template Properties

Each layout has its own configuration screen, reached by clicking Next from Custom DataList Template Configuration. For example Basic Properties > Custom DataList Template Configuration > Pricing Card Template Configuration.

Pricing Card

Renders each record as a standalone card in a grid, with a heading area, a highlighted value, a list of check-marked detail lines, and the row actions inside the card by default.

Fields to configure:

• Row Actions Type – Determines how row actions are displayed inside each card.
• Cards Per Row – Sets how many cards are placed side by side before wrapping onto the next line. Choose 1 Card for a single full-width card per record, or a higher value such as 4 Cards for a denser grid. Cards reflow automatically on smaller screens.
• Conditional Card Colors – A grid of rules that change a card's colour based on the value of a column, so records can be colour-coded by status, type, or priority. Click Add Row to add a rule, and Expand All Rows to open every rule at once for editing.
• Default Card Color – The colour applied to any card that does not match a conditional rule. Accepts a hex value such as #DBEAFE. Leave blank to keep the theme's default card styling.

Multi Columns

Arranges multiple columns horizontally within a single row, with the ability to designate specific columns as headings, descriptions, or supporting metadata.

Fields to configure:

• Row Actions Type – Determines how row actions are displayed.
• Separator – The character or text placed between metadata fields that appear on the same line, for example -, |, or •. Leave blank to fall back to plain spacing.

Profile Grid

Displays each record as a profile-style block: an avatar or image on the left, a prominent title with a subtitle beneath it, and a labelled field grid underneath showing supporting values such as created by, date created, due date, job title, or department. Row actions sit at the bottom right of each block.

Fields to configure:

• Row Actions Type – Determines how row actions are displayed. This is the only configurable property for this layout; everything else is driven by the column order you set in the Design tab.

Ribbon Row

Renders each record as a wide, full-width ribbon: avatar and title on the left, status or tag values on the right, and description lines running along the bottom of the strip.

Fields to configure:

• Row Actions Type – Determines how row actions are displayed.
• Separator – The character or text placed between metadata fields shown on the same line, for example -.
• Conditional Card Colors – A grid of rules that change the ribbon's colour based on the value of a column, letting you colour-code records by status or category. Click Add Row to add a rule, and Expand All Rows to open every rule at once.
• Default Card Color – The colour applied to any ribbon that does not match a conditional rule. Accepts a hex value such as #DBEAFE. Leave blank to keep the theme's default styling.

Expand Row

Keeps a compact table layout but adds a toggle to each row. Clicking the toggle expands the row in place to reveal additional field values as labelled rows, so secondary information stays available without widening the table or opening a form.

Fields to configure:

• Expand Icon – The icon shown on a collapsed row, which the user clicks to expand it. Leave blank to use the default icon.
• Collapse Icon – The icon shown on an expanded row, which the user clicks to collapse it again. Leave blank to use the default icon.
• Layout – Controls how the revealed fields are arranged inside the expanded area. Horizontal places them side by side; Vertical stacks them one per line.
• Number of Expandable Fields – Sets how many of the row's columns are moved into the expanded area instead of being shown in the collapsed row. Increase this value to keep more fields hidden until the user expands the record.

Sticky Actions & Protected Rows

A table layout where the actions column stays pinned in place as the table scrolls horizontally, and selected records can be protected — their selection checkbox is hidden so those rows cannot be included in bulk actions such as Delete.

Fields to configure:

• Protected Rows (Disable Selection) – A grid of rules identifying which records are protected. Click Add Row to add a rule, then set:
  • Column ID – The column whose value is evaluated for each row, selected from the columns available in the list (for example Account).
  • Value – The value that marks a row as protected. Any row whose chosen column matches this value has its selection checkbox hidden and is excluded from bulk list actions.
  Add multiple rows to protect records on more than one condition, and use Expand All Rows to open every rule at once.
• Hide List Actions When No Row Selected – When ticked, bulk list action buttons such as Delete stay hidden until at least one row is selected. This keeps the list header clean and prevents accidental clicks on an empty selection.

Expected Outcome

Example — Pricing Card

Download Plugin

Download the demo app for Custom DataList Template Pack from the Source Code and Plugin Repository.