Column Template Formatter

Introduction

The Column Template Formatter Plugin allows developers to customize how tabular list data is presented to end-users. It transforms a standard tabular column cell into a custom visual layout defined by HTML, CSS, and FreeMarker templates, making raw data much more intuitive and readable.

Plugin Information

Plugins Available in the Bundle:

• Column Template 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 8.

Get Started

Prerequisites

• Joget DX 8 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

To implement the Column Template Formatter in your list, follow these sequential steps:

1. Create a form in the Form Builder that includes necessary fields, such as a Text Field.
2. Generate a CRUD (Create, Read, Update, Delete) and launch the UI using the Click here option.
3. Navigate to the respective list created by the generator.
4. Open the list in the List Builder and select the column you want to customize.
5. In the column properties pane, navigate to Properties > Formatter and select Column Template Formatter from the dropdown list.
6. Configure the formatting properties as detailed below and save your changes.

Steps for Creating App from Scratch

To implement the Column Template Formatter starting with a new application, follow these sequential steps:

1. Begin by creating a form in the Form Builder that includes the necessary fields, such as a Text Field or other relevant form elements.
   
2. Generate a CRUD (Create, Read, Update, Delete) and launch the application's UI using the Click here option.
   
3. Navigate to the newly created list. In the List Builder, select the column you want to customize and navigate to Properties > Formatter. From the dropdown list, select Column Template Formatter.
   

Edit Template

When configuring the Column Template Formatter properties, you have two flexible options to design your column cell layout:

• Choose Template: Select from pre-defined built-in status styles, such as Success, Warning, or Failed.
  
• Edit Template: After choosing a starting layout, click this option to customize the template with your own custom HTML, CSS, and FreeMarker code in the visual code editor.
  

Conditional Formatting

The Column Template Formatter supports Conditional Formatting, allowing you to automatically swap layouts based on cell data values:

• Toggle Enable Conditional Formatting ON. This reveals a + Add Condition button.
• Click the button to define a target rule based on column row values (for example, setting the rule to Description = 20).
• For each condition, you can either select an existing template or click the pencil icon to directly edit and design that specific condition's template.
• At runtime, the formatter automatically evaluates these rules and applies the correct layout matching the row value.
  

Enable Template Generation Using AI

You can dynamically generate and refine column templates from plain natural-language descriptions using generative AI:

1. Check the Enable Template Generation Using AI box to expose the AI Configurations section.
2. Configure the required AI settings:
   • Model: Enter the target model name (such as gpt-3.5-turbo). Currently, these features work exclusively with OpenAI's ChatGPT models.
   • API Key: Input your private OpenAI developer API key.
   • Proxy Domain: (Optional) Specify a custom proxy or endpoint for your connection.
     
3. Click Choose Template to open the standard template chooser dialog. A new option labeled Add Template Using AI will now appear in the top-right corner of the dialog.
   
4. Click Add Template Using AI to slide open the Generate Template panel.
   
5. Enter a clear prompt describing your design requirements (e.g., describing how the cell should look, its color, or its behavioral logic) and click Submit. The AI will immediately write the code and apply it to your template.

Configure Properties

When configuring the Column Template Formatter properties, you can configure the following settings:

• Template: Header section for template editing.
• Choose Template: Opens the built-in template picker. You can choose from pre-defined styles like Success, Warning, or Failed.
• Edit Template: Opens the code/visual editor for the currently selected template, allowing you to write custom HTML, CSS, and FreeMarker code.
• Sample: Displays a live preview of the current template applied to a sample row of data.
• Enable Conditional Formatting: Turn this setting ON to define rules that apply different templates dynamically based on cell values:
  • Click the + Add Condition button to define a rule.
  • Enter the target cell row value (e.g., Description = 20).
  • Choose or edit the specific template to apply when the condition is met.
• Enable Template Generation Using AI: When turned ON, this feature enables natural-language template generation powered by OpenAI's ChatGPT (e.g., gpt-3.5-turbo). AI Configurations:
  • Model: Enter the name of the AI model to use (e.g., gpt-3.5-turbo).
  • API Key: Input your private OpenAI API key.
  • Proxy Domain: (Optional) Specify a custom proxy or service endpoint for the AI provider.

Expected Outcome

When the list runs in your application UI, the standard plain-text column values will render as visually-formatted cells. The Column Template Formatter parses your custom HTML, CSS, and conditional rules in real-time, displaying styled status badges, icons, or custom typography dynamically based on your row values.

Download Plugin

Download the plugin from the official JogetOSS GitHub Repository.