Options Template Datalist Formatter

Introduction

Options Template Datalist Formatter is a datalist column formatter plugin. It allows users to customize how multi-value list data is presented to end-users. It transforms a raw, semicolon-separated column value (such as opt1;opt2;opt3) into a custom visual layout defined by an HTML template, resolving each option code to a human-readable label and rendering it as styled badges, chips, links, or any other custom markup.

Plugin Information

Plugins Available in the Bundle:

• Options Template Datalist Formatter (Datalist Column Formatter)

Supported Database: MySQL, PostgreSQL, Oracle, MS SQL Server
License: Apache License, Version 2.0

This plugin is compatible with Joget DX 9.

Prerequisites

• Joget DX 9 Enterprise or Community Edition.
• Developer or administrator access with permissions to manage plugins.

Where to Get the Plugin

You can download the plugin JAR file from the official JogetOSS GitHub Repository.

How to Install

1. Download the latest release .jar file from the repository page.
2. In the Joget Console, navigate to the Admin Bar > Settings > Manage Plugins.
3. Click the Upload Plugins button.
4. Under the Upload Plugin screen, select your downloaded JAR file and click Upload.

How To Use It

1. Open your app in App Composer and go to Form Builder. You can either edit an existing form or create a new one, for example, a form named 'test'.
   
2. Drag a Check Box, Select Box, or Multi Select Box form element from the palette into your form.
   
3. Under the field's Options property, define the options available in the field, e.g., Value: approved, Label: Approved; Value: pending, Label: Pending; Value: rejected, Label: Rejected.
   
4. Click Save, and click Generate App > Generate CRUD > Generate to generate a CRUD (or a Datalist via List Builder) based on this form so the field's values are available as a column.
   
5. Submit a few test records selecting more than one option, so the field stores real semicolon-separated data (e.g. approved;pending) to format.
   
6. Once the field and its data are in place, open your app in the App Composer and go to the list you want to format (or create a new list via List Builder). The column you format must be built on a form field whose value is a semicolon-separated list of codes, such as a Checkbox or a Multi Select Box.
   

7. Click on the column you want to format. Under Formatter, select Options Template Datalist Formatter from the dropdown.
   

8. Under Configure Options Template Datalist Formatter, define your Value-Label pairs in Options (the Value must match the raw code stored in the field), or configure an Options Binder to load Value-Label pairs dynamically instead.
   
9. Write your custom layout in the Template field using HTML, referencing each resolved item with the placeholders {id} (the raw option code) and {label} (the resolved label). Both placeholders are HTML-escaped automatically before substitution.
   

10. Optionally set a Separator to control what's inserted between each rendered item, and a Custom Header for one-time HTML/CSS/JS (e.g., a <style> block for your template's markup) injected once above the column's output, guaranteed not to repeat across rows or across multiple instances of the column on the same page. Click Apply Change > Save.
    

Configure Options Template Datalist Formatter Properties

Fields to configure:

• Options: A static grid of Value-Label pairs. Click Add to add a row. Use this when your option codes and labels are fixed/known ahead of time.
• Options Binder: Instead of (or in addition to) the static grid, load Value-Label pairs dynamically, e.g., from a database via a Form/List Load Binder. If configured, this takes priority over the static Options grid.
• Template: The HTML snippet rendered once per value. Supports two placeholders: {id} (the raw option code) and {label} (the resolved label). Default: a styled <span><a> wrapper linking to view?id={id}.
• Separator: String inserted between each rendered item (e.g. , or a line break). Empty by default, since the default template already has visual spacing via CSS margins.
• Custom Header:  Arbitrary HTML/CSS/JS injected once at the very start of the column's output, typically used for a <style> block styling the template's markup. Guaranteed not to repeat across rows or across multiple instances of the column in the same page load.

Expected Outcome

The list displays the column's raw semicolon-separated codes resolved into human-readable labels, wrapped in your custom template; for example, a raw value like approved; pending rendered as two rounded status badges reading "Approved" and "Pending", instead of the unformatted codes.