Dynamic Custom HTML

Introduction

The Dynamic Custom HTML Form Element Plugin serves as an extension of the standard Custom HTML form element. This plugin allows developers to create dynamic HTML content by replacing {tokens} with actual data retrieved from form Load Binders, with optional escape-format suffixes (e.g. {fieldId?html}) for controlling how values are rendered. This eliminates the need to write complex custom JavaScript or BeanShell code to inject database-driven values into raw HTML layouts.

Plugin Information

Plugins Available in the Bundle:

• Dynamic Custom HTML Form Element

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 and applications.

Where to get the plugin

You can obtain the plugin JAR file by downloading the latest release from the JogetOSS HTML GitHub Releases page.

How to install

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

How to use it

Steps for Creating the App from Scratch

1. Begin by creating a new form in the Form Builder and configure a Load Binder to fetch data from your desired database table or data source.
   
2. Add the Dynamic Custom HTML form element to your form canvas from the form builder palette.
   
3. Open the element properties pane. In the Custom HTML field, enter your HTML template with tokens written in the format {fieldName}, where fieldName corresponds directly to columns in your configured Load Binder data.
   
4. Save your form, then navigate to the runtime view of the form to verify that the tokens are successfully replaced with actual, populated data values.
   

Configure Properties

The Dynamic Custom HTML element shares the exact same properties as the standard Custom HTML form element, with the added benefit of token replacement functionality.

For detailed property configurations, refer to the official Custom HTML Properties documentation. When designing layouts, you can use any valid HTML/CSS and insert standard database columns enclosed in brackets (e.g., {username}, {orderNumber}).

Optional Escape Formats

Tokens support an optional ?format suffix to control how the substituted value is escaped before rendering:

{fieldId?nl2br}
{fieldId?html}
{fieldId?nl2br;html}

• Without a format suffix, values are inserted unescaped.
• With a format suffix, the value is passed through Joget's StringUtil.escapeString, the same utility used by Joget's #hashVariable?format# syntax.
• Multiple formats can be chained using ; (e.g. ?nl2br;html applies both in sequence).
• Supported formats match Joget's Hash Variable escape formats, including nl2br, html, xml, json, and parameterized formats like separator(...).

Expected Outcome

When the form runs in the live application UI, the Dynamic Custom HTML form element renders your styled HTML layout. All defined tokens (such as {username} or {orderNumber}), including those with escape-format suffixes like {orderNumber?html}, will be dynamically evaluated and replaced in real-time with the corresponding data retrieved from the form's active Load Binder data source.

Download Plugin

Download the plugin from the official GitHub Releases Page.