Forem: Explorer

🎨 Dynamic Dashboard Colors: Mapping Pie Chart Slices to Workflow Status in Joget

Explorer — Sun, 16 Nov 2025 11:24:01 +0000

1. Overview

Dashboards are only effective when they communicate information clearly. When using Joget's Report Builder (which uses ECharts) to create a Status Pie Chart, the default colors are meaningless. We need Green for "Authorized," Red for "Rejected," and Yellow for "Pending."

This client-side JavaScript solution, placed in a Custom HTML element on your Userview page, allows you to hijack the chart after it loads and programmatically apply meaningful colors based on the data label (the workflow status).

2. How It Works

This script performs two main actions: Color Customization and Interactive Filtering.

Action 1: Applying Status Colors 🌈

Chart Initialization: The script waits for the page to load, then targets the specific ECharts instance using its unique HTML ID (e.g., echarts_XYZ).
Data Grab: It pulls the raw data (series[0].data) from the chart.
Color Loop: It loops through every slice. For each slice, it checks the slice's name (the status, like "Authorized") and manually injects a custom itemStyle property with a specific Hex color.
Redraw: Finally, it uses aChart.setOption(option) to force ECharts to redraw the chart with the new color mappings.

Action 2: Interactive Filtering 🖱️

The second part of the script uses the ECharts built-in on('click', ...) event listener to turn each pie slice into a functional link, routing users to specific, pre-filtered Userview dashboards.

3. Full Code

Paste this code into a Custom HTML element (placed after the Report Grid element) in your Joget Userview.

Security Note: The unique ECharts ID (echarts_CHART_ID_HERE) and the Userview paths have been made generic. You must replace these placeholders with your actual values.

<script>
    $(document).ready(function () {
        // IMPORTANT: Replace 'echarts_CHART_ID_HERE' with the actual ID of your chart element.
        var aChart = echarts.init(document.getElementById('echarts_CHART_ID_HERE'));
        var option = aChart.getOption();

        var pieData = aChart.getOption().series[0].data;

        // --- DYNAMIC COLOR MAPPING LOGIC ---
        for (var i = 0; i < pieData.length; i++) {
            var status = pieData[i].name;

            // Set color based on status (Use Hex codes for consistency)
            if (status === 'Approval Pending') {
                option.series[0].data[i].itemStyle = { color: '#FFDD7D' }; // Yellow/Amber
            } else if (status === 'Authorized') {
                option.series[0].data[i].itemStyle = { color: '#9AC4A1' }; // Green
            } else if (status === 'Draft') {
                option.series[0].data[i].itemStyle = { color: '#EEA94E' }; // Orange
            } else if (status === 'Escalated') {
                option.series[0].data[i].itemStyle = { color: 'red' }; // Red Flag
            } else if (status === 'Rejected' || status === 'Request Rejected') {
                option.series[0].data[i].itemStyle = { color: '#DC143C' }; // Crimson (Strong Red)
            } else {
                // Default color for any unexpected or unmapped values
                option.series[0].data[i].itemStyle = { color: 'gray' };
            }
        }

        // Apply the new colors to the chart
        aChart.setOption(option);

        // --- INTERACTIVE CLICK LOGIC ---
        aChart.on('click', function (params) {

            // IMPORTANT: Replace the generic Userview links with your actual paths.

            if (params.name == 'Approval Pending') {
                window.open(`/jw/web/userview/app_name/v/_/pending_dashboard`, "_blank");
            } else if (params.name == 'Authorized') {
                window.open(`/jw/web/userview/app_name/v/_/authorized_dashboard`, "_blank");
            } else if (params.name == 'Rejected') {
                window.open(`/jw/web/userview/app_name/v/_/rejected_dashboard`, "_blank");
            } else if (params.name == 'Escalated') {
                window.open(`/jw/web/userview/app_name/v/_/escalated_dashboard`, "_blank");
            }
            // Generic fall-through: For all other statuses, open the main list filtered by the clicked status name
            else {
                // The hash variable used here (d-6985709-fn_Status) is a Report Grid filter hash.
                window.open(`/jw/web/userview/app_name/v/_/all_document_list?d-GRID_HASH-fn_Status=${params.name}`);
            }
        });
    });
</script>

4. Example Use Cases

✅ Compliance Dashboards: Instantly highlight records that are "Expired" (Red) or "Compliant" (Green).
✅ Service Desk: Show tickets based on priority: "High" (Red), "Medium" (Orange), "Low" (Blue).
✅ Financial Approvals: Use strong, clear colors to represent the stage of the approval process: "Submitted" (Yellow), "Finance Approved" (Light Green), "CEO Approved" (Dark Green).

5. Customization Tips

💡 Using Lookup Objects: For cleaner code, consider replacing the long if/else if chain with a simple JavaScript lookup object (or map). This is easier to update when new statuses are added.
💡 Userview Pathing: The click logic uses window.open(...) to direct users. Ensure you replace app_name and the specific Userview categories (_) with your application's actual URLs.
💡 ECharts ID Safety: If you modify and save your Report Grid element, Joget sometimes changes the unique ECharts ID. If your colors disappear, this is the first place to check!

6. Key Benefits

🚀 Enhanced Clarity: Makes dashboards instantly readable by associating colors with conventional meanings (red=bad, green=good).
🚀 Improved UX: Turns a static visualization into an interactive filter, drastically reducing the clicks needed for users to drill down into data.
🚀 Maintainability: All coloring rules are contained in one simple, client-side script, separate from the core reporting configuration.

7. Security Note

🔒 Userview Security: The click logic exposes Userview URLs. Ensure that the target dashboard pages (/pending_dashboard, /rejected_dashboard, etc.) are protected with appropriate Userview Permission settings so unauthorized users cannot access the underlying data lists directly.

8. Final Thoughts

By using client-side scripting to customize the ECharts object, you transform a generic Joget dashboard into a highly intuitive and interactive data visualization tool. This simple technique is fundamental for professional-grade reporting in Joget.

💾 Custom Approval History in Joget: Direct SQL Insertion via BeanShell Tool

Explorer — Sun, 16 Nov 2025 11:19:31 +0000

1. Overview

While Joget's Form Binders and built-in audit trails handle standard data storage, complex enterprise applications often require specialized auditing and history tracking. This is particularly true when you need a dedicated, sequentially numbered Approval History table that links to multiple main processes for easy reporting.

This post details an advanced, expert technique using a Java/BeanShell Process Tool to perform a direct SQL INSERT into a custom database table (app_fd_approval_history). This method grants granular control over the primary key (id) sequence and allows you to log specific metadata (user, status, date) mid-workflow, decoupled from the main form's binder.

2. How It Works

The script operates as a robust, transactional database logger configured as a workflow tool.

⚙️ Database Connection: It securely retrieves the Joget application's main database connection via the setupDataSource Spring bean using AppUtil.getApplicationContext().getBean("setupDataSource").
⚙️ Manual ID Generation: It executes SELECT MAX(CAST(id AS SIGNED)) to find the highest existing sequential ID. Crucially, it casts the id (often stored as a string in Joget forms) to a signed integer to ensure correct numerical ordering, and then calculates the nextId.
⚙️ Dynamic Data Capture: It utilizes Joget Hash Variables (e.g., #form.new_request.createdByName#) to dynamically capture real-time form data, user information, and timestamps directly from the workflow instance before preparing the data for insertion.
⚙️ Execution & Cleanup: It uses a PreparedStatement to safely execute the INSERT query. The finally block is critical, ensuring the database connection is closed (conn.close()) even if an exception occurs, preventing connection leaks.

3. Full Code

This code is configured as a BeanShell within a Joget workflow, typically placed immediately after a submission or approval step where the status transition occurs.

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.sql.DataSource;
import org.joget.apps.app.service.AppUtil;
import org.joget.commons.util.LogUtil;

public void insertNewData() {
    Connection conn = null;
    try {
        LogUtil.info("ApprovalHistoryTool", "Starting Approval History Creation Tool");

        // 1. Get the primary application data source
        DataSource ds = (DataSource) AppUtil.getApplicationContext().getBean("setupDataSource");
        conn = ds.getConnection();

        // 2. Determine the next sequential ID manually
        String maxIdQuery = "SELECT MAX(CAST(id AS SIGNED)) FROM app_fd_approval_history";
        PreparedStatement maxIdStmt = conn.prepareStatement(maxIdQuery);
        ResultSet resultSet = maxIdStmt.executeQuery();

        int nextId = 1; 
        if (resultSet.next()) {
            nextId = resultSet.getInt(1) + 1;
            LogUtil.info("ApprovalHistoryTool", "Next ID to be inserted: " + nextId);
        }
        maxIdStmt.close();

        // 3. Prepare the INSERT statement
        String insertQuery = "INSERT INTO app_fd_approval_history" +
                "(id, c_name, c_status, c_date, c_remark, c_request_for, c_parent_id)" +
                "VALUES (?, ?, ?, ?, ?, ?, ?)";

        // 4. Capture dynamic data using Joget Hash Variables
        // IMPORTANT: Replace the placeholder values (#form.new_request...) with your actual form IDs.
        String name = "";
        String status = "";
        String date = "";

        // Conditional logic based on a form field value (Request Type)
        if ("New".equals("#form.new_request.request_type#")) {
            name = "#form.new_request.createdByName#";
            status = "Request Submitted";
            date = "#form.new_request.dateCreated#";
        } else if ("Update".equals("#form.new_request.request_type#")) {
            name = "#form.new_request.modifiedByName#";
            status = "Update Request";
            date = "#form.new_request.dateModified#";
        }

        String remark = "#form.new_request.reason#";
        String requestFor = ""; 
        String foreignKey = "#form.new_request.id#"; // Links to the main form record

        PreparedStatement insertStmt = conn.prepareStatement(insertQuery);

        // Set values using the PreparedStatement (prevents SQL injection)
        insertStmt.setInt(1, nextId);
        insertStmt.setString(2, name);
        insertStmt.setString(3, status);
        insertStmt.setString(4, date);
        insertStmt.setString(5, remark);
        insertStmt.setString(6, requestFor);
        insertStmt.setString(7, foreignKey);
        LogUtil.info("ApprovalHistoryTool", "Linking history to parent ID: " + foreignKey);

        // 5. Execute and close
        insertStmt.executeUpdate();
        insertStmt.close();

        LogUtil.info("ApprovalHistoryTool", "Data inserted successfully in Approval History Table.");
    } catch (Exception e) {
        LogUtil.error("ApprovalHistoryTool", "Error inserting data: " + e.getMessage(), e);
    } finally {
        // 6. Ensure connection is always closed
        try {
            if (conn != null && !conn.isClosed()) {
                conn.close();
            }
        } catch (SQLException e) {
            LogUtil.error("ApprovalHistoryTool", "Error closing connection: " + e.getMessage(), e);
        }
    }
}

insertNewData();

4. Example Use Cases

✅ Complete Audit Trail: Creating a persistent, uneditable log of every approval, rejection, and modification action for compliance or security auditing.
✅ Custom Reporting: Facilitating streamlined reporting on approval cycle times, user actions, and status changes using a normalized, dedicated history table structure.
✅ Sequential Primary Keys: Implementing simple, strictly sequential, numeric ids for history records, which are far easier for end-users and reports to reference than default UUIDs.

5. Customization Tips

💡 Hash Variable Validation: Always verify that your Joget Hash Variables are correctly returning the required values (e.g., using LogUtil.info()) before trusting them in a database insertion.
💡 Error Logging: Expand the catch block to include logic that notifies an administrator (e.g., sends an email) if the database insertion fails, rather than just logging the error.
💡 Time Zone Control: Dates retrieved via Hash Variables may require explicit formatting. Use Java's SimpleDateFormat inside the script to format the date string before insertion, ensuring consistency across different geographic locations.

6. Key Benefits

🚀 Granular Control: Provides developers with complete control over SQL execution, allowing for custom data structures and transactional integrity.
🚀 Decoupled Logging: Separates the audit trail from the main form data, making both the main table and the history table cleaner and more performant.
🚀 Security & Consistency: Use of PreparedStatement protects against basic SQL injection and guarantees the field values are treated as data, not code.

7. Security Note

🔒 SQL Injection Prevention: The use of PreparedStatement with placeholder ? marks is the most critical security feature in this script. It prevents external data (even malicious data from a form field) from altering the structure of the SQL command.
🔒 Resource Leaks: The meticulous implementation of the finally block to close the Connection is non-negotiable. Failing to close connections will lead to resource exhaustion and potential database failure under load.

8. Final Thoughts

Mastering direct database interaction via BeanShell Tools gives you expert-level control over your Joget application's data layer. This technique is indispensable for building robust, compliance-ready solutions that require custom, sequential auditing and complex data relationships.

🚨 Resuming Stuck Joget Workflow Tools with API

Explorer — Sun, 16 Nov 2025 10:45:20 +0000

1. Overview

A critical issue in production environments is a workflow process halting when the Joget server unexpectedly goes down. While user activities are often easy to "Complete" manually via the Process Monitor, processes stuck specifically on a Tool Plugin (like an Email Tool or integration script) often resist normal completion attempts. The "Complete" button in the Process Monitor UI has no effect because a Tool is a server-side action, not a user-driven workflow task.

This post reveals the expert method, recommended by the Joget support team, to reliably force-resume or restart a stuck tool using the built-in JSON Monitoring API.

2. How It Works

When a tool element is stuck, the workflow engine typically believes the tool is still running or failed to complete its transaction. The solution is to issue a direct command to the workflow engine using the API endpoint specifically designed to manage activity states:

API Endpoint: The /monitoring/activity/start endpoint is used to push the activity back into the "ready" or "running" state, effectively forcing a re-execution of the tool's logic.
Authentication: The API requires administrative credentials (Basic Authentication or URL parameters) to ensure only authorized users can manipulate the workflow state.
Parameters: You must provide the specific Process Instance ID and the Activity Definition ID (the unique ID of the tool element in the workflow designer) to target the exact stuck step.

3. Full API Command

The API call uses the POST method and the /monitoring/activity/start/ endpoint.

POST /jw/web/json/monitoring/activity/start/(*:processId)/(*:activityDefId)

Example Request (Using URL Authentication)

http://localhost:8080/jw/web/json/monitoring/activity/start/24002_sampleApp_requestForm_approver_process/email_on_received?j_username=admin&j_password=admin

Parameter	Description	Example Value
Method	Must be used to change state.	`POST`
`processId`	The specific instance ID of the stalled workflow.	`24002_sampleApp_requestForm_approver_process`
`activityDefId`	The unique ID of the stuck Tool Plugin.	`email_on_received`
`j_username`/`j_password`	Admin credentials for authorization.	`admin`/`admin`

4. Example Use Cases

✅ Integration Failure Recovery: A process is stuck on an API Tool Plugin because the external service was temporarily unavailable during a server interruption. Restarting the tool allows the integration to run again.
✅ Notification Retries: An Email Tool failed to send due to a mail server timeout. The API call forces the email tool to re-execute and notify users correctly.
✅ Data Sync Issues: A Script Tool responsible for data synchronization failed mid-execution and left the process in an ambiguous state. The API forces the engine to resolve the tool's status and advance the flow.

5. Customization Tips

💡 Postman Environment: Create an environment variable in Postman for your base Joget URL (e.g., http://localhost:8080/jw) and your admin credentials to quickly execute these recovery calls without re-typing.
💡 Basic Auth: For better security, use the Basic Auth tab in Postman or similar tools instead of passing credentials in the URL parameters, especially in non-local environments.
💡 Logging: Before using this method, always consult the Joget server logs (wflow.log, catalina.out, etc.) to understand why the tool failed initially. Addressing the root cause is crucial to prevent recurrence.

6. Key Benefits

🚀 Immediate Process Continuity: Quickly recovers stalled business processes without requiring manual data intervention or lengthy server restarts.
🚀 High Data Integrity: By utilizing the official Monitoring API, you maintain the integrity of the workflow state within the Joget engine.
🚀 Targeted Fix: Allows administrators to precisely fix specific process instances without affecting other running processes.

7. Security Note

🔒 API Exposure: This API grants the power to manipulate live workflow states. Never expose this endpoint publicly. Ensure that any system making calls to this API uses strong administrative credentials and operates exclusively within a secure network environment.

8. Final Thoughts

Understanding how to directly interface with the Joget workflow engine via the Monitoring JSON API is a critical skill for any advanced Joget administrator. It provides the necessary surgical precision to handle edge cases like stuck Tool Plugins, ensuring your production workflows remain resilient and functional even after unexpected interruptions.

🛠️ Dynamic Joget Form Generation Using BeanShell Scripting

Explorer — Sun, 16 Nov 2025 10:02:36 +0000

1. Overview

While Joget's Form Builder is excellent for visual design, there are advanced scenarios where you need to generate form definitions programmatically. This is typically done when a form's structure is dynamic or based on an external metadata source (e.g., a database table, a configuration list, or another Joget list).

This blog post analyzes a powerful BeanShell/Groovy script designed to run within Joget's server-side tools. It reads form field definitions from a FormRowSet (or similar data source) and constructs a complete Joget Form Definition JSON, finally saving it to the App Definition.

2. How It Works

The script operates by constructing the complete JSON object that defines a Joget Form, adhering strictly to the internal schema used by the platform.

⚙️ Data Source: The script assumes field metadata (ID, Label, Class Name) is available in the rows variable (a FormRowSet).
⚙️ Field Construction: It iterates over the rows. For each entry, it creates a string representation of a JSON object for a single form element, ensuring the className (field type) and properties (ID and Label) are correctly inserted.
⚙️ JSON Aggregation: All individual field JSONs are placed into a JSONArray (fields). This array is then inserted as the content of the Form's main Column element.
⚙️ Form Saving: Finally, the fully assembled JSON is wrapped in a FormDefinition object. The script uses the AppService bean to call createFormDefinition, making the new form instantly available in the App Designer.

3. Full Code

This code is typically executed within a Process Tool using the BeanShell/Groovy language or in a Form/Datalist Binder script where the rows variable is populated.

import java.util.Collection;
import org.joget.apps.app.model.AppDefinition;
import org.joget.apps.app.model.FormDefinition;
import org.joget.apps.app.service.AppService;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.model.FormRow;
import org.joget.apps.form.model.FormRowSet;
import org.joget.commons.util.LogUtil;
import org.json.JSONArray;
import org.json.JSONObject;

// Get form metadata from request or script tool properties
String formDefId      = formData.getRequestParameter("form_def_id");
String formName       = formData.getRequestParameter("form_name");
String formTableName  = formData.getRequestParameter("form_table_name");

// Example: Assume 'rows' is a FormRowSet containing field configurations
// FormRowSet rows = ... 

try {
    JSONArray fields = new JSONArray();

    // Loop through the source data (e.g., field definitions)
    for (FormRow row : rows) {
        String fieldId = row.getProperty("field_id");
        String fieldLabel = row.getProperty("field_label");
        // Must be a valid Joget Form Element class name (e.g., org.joget.apps.form.lib.TextField)
        String className = row.getProperty("field_type");

        JSONObject formElement;

        // Build the JSON structure for a single form element
        formElement = new JSONObject("{\n" +
                                        "    \"className\" : \"" + className + "\",\n" +
                                        "    \"properties\": {\n" +
                                        "        \"controlField\": \"\",\n" +
                                        "        \"id\": \"" + fieldId + "\",\n" +
                                        "        \"label\": \"" + fieldLabel + "\",\n" +
                                        "        \"permissionHidden\": \"\",\n" +
                                        "        \"readonly\": \"\",\n" +
                                        "        \"readonlyLabel\": \"\",\n  " +
                                        "        \"size\": \"\",\n" +
                                        "        \"validator\": {\n" +
                                        "            \"className\": \"\",\n" +
                                        "            \"properties\": {}\n" +
                                        "        },\n" +
                                        "        \"value\": \"\",\n" +
                                        "        \"workflowVariable\": \"\"\n" +
                                        "    }\n" +
                                        "}");

        fields.put(formElement);
    }

    // Embed all generated fields into the main Form structure
    JSONObject form = new JSONObject("{\n" +
    "    \"className\": \"org.joget.apps.form.model.Form\",\n" +
    "    \"elements\": [{\n" +
    "        \"className\": \"org.joget.apps.form.model.Section\",\n" +
    "        \"elements\": [{\n" +
    "            \"className\": \"org.joget.apps.form.model.Column\",\n" +
    "            \"elements\":" + fields.toString() + ",\n" +
    "            \"properties\": {\"width\": \"100%\"}\n" +
    "        }],\n" +
    "        \"properties\": {\n" +
    "            \"id\": \"section1\",\n" +
    "            \"label\": \"Dynamic Fields Section\"\n" +
    "        }\n" +
    "    }],\n" +
    "    \"properties\": {\n" +
    "        \"description\": \"Dynamically generated form.\",\n" +
    "        \"id\": \"" + formDefId + "\",\n" +
    "        \"loadBinder\": {\n" +
    "            \"className\": \"org.joget.apps.form.lib.WorkflowFormBinder\",\n" +
    "            \"properties\": {}\n" +
    "        },\n" +
    "        \"name\": \"" + formName + "\",\n" +
    "        \"noPermissionMessage\": \"\",\n" +
    "        \"permission\": {\n" +
    "            \"className\": \"\",\n" +
    "            \"properties\": {}\n" +
    "        },\n" +
    "        \"postProcessor\": null,\n" +
    "        \"postProcessorRunOn\": \"create\",\n" +
    "        \"storeBinder\": {\n" +
    "            \"className\": \"org.joget.apps.form.lib.WorkflowFormBinder\",\n" +
    "            \"properties\": {}\n" +
    "        },\n" +
    "        \"tableName\": \"" + formTableName + "\"\n" +
    "    }\n" +
    "}");

    // Save the new Form Definition to the current App
    FormDefinition formDefinition = new FormDefinition();
    formDefinition.setJson(form.toString());
    formDefinition.setId(formDefId);
    formDefinition.setName(formName);
    formDefinition.setTableName(formTableName);

    AppService appService = (AppService) AppUtil.getApplicationContext().getBean("appService");
    AppDefinition appDef = AppUtil.getCurrentAppDefinition();
    Collection errors = appService.createFormDefinition(appDef, formDefinition);

    // Optional: Log errors if form creation failed
    if (errors != null && !errors.isEmpty()) {
        LogUtil.warn("FormCreator", "Errors encountered while creating form: " + errors.toString());
    }
} catch (Exception ex) {
    LogUtil.error("FormCreator", ex, "Cannot Create Form");
}

4. Example Use Cases

✅ Dynamic Survey Generation: Create different forms instantly based on survey questions stored in a master configuration list.
✅ Automated Integrations: Automatically generate forms that mirror the structure of an external API or third-party database table, minimizing manual development work.
✅ User-Defined Forms: Allow specific power-users to define the fields they need in a secondary Joget list, then use this script to generate the final functional form.

5. Customization Tips

💡 Field Type Mapping: Use a map structure in your BeanShell script to translate simple data types (e.g., "TEXT") from your source rows into the necessary full Java Class Names (e.g., "org.joget.apps.form.lib.TextField").
💡 Adding Complex Properties: For field types like Select Boxes, dynamically add the options or optionsBinder properties to the formElement JSON to ensure the new field is fully functional upon creation.
💡 Metadata Refresh: If you use this script to update a form, use appService.updateFormDefinition instead of createFormDefinition.

6. Key Benefits

🚀 Metadata-Driven Design: Decouples form structure from application code, making forms easier to manage and update.
🚀 Consistency: Ensures all generated forms follow a consistent structure (e.g., using the same default binders and field properties).
🚀 Extensibility: Enables the creation of complex applications where form fields are determined by business rules or configuration, not just static design.

7. Security Note

🔒 Access Control: Since this script can alter the core application definition, it must be carefully permissioned. It is best used in a workflow process tool that runs under the secure system user account or is triggered only by application administrators. Avoid exposing this logic directly in front-end form validation or client-side scripts.

8. Final Thoughts

Leveraging BeanShell to dynamically manipulate Joget's JSON configurations is the pinnacle of advanced Joget development. It unlocks the ability to build flexible, configuration-driven solutions that are resilient to changes in business requirements.

Mastering BeanShell Hash Variables in Joget: The Most Basic & Practical Guide

Explorer — Sun, 16 Nov 2025 07:49:01 +0000

1.Create an App Variable

2.call it

Points to Note Down:

It only Return String.
You can pass Dynamic Values to it.

How To Pass dynamic values to Beanshell hash.

Call it by passing the dynamic value.

🌍 Auto-Load Multilingual Dropdown Labels in Joget Using Platform Locale

Explorer — Tue, 11 Nov 2025 06:17:11 +0000

🧩 Overview

When building multilingual Joget apps, it’s important for dropdowns (Select Boxes) to automatically display values in the user’s active language — whether that’s English, Arabic, or any other supported locale.

In this guide, you’ll learn how to configure a Joget Select Box to automatically load the localized label based on the platform’s current language setting.

This approach ensures that users see the same data, but with labels translated according to their locale — all without extra scripting.

⚙️ How It Works

💡 The solution uses:

A SQL query as the Select Box’s options source.
Joget’s variable #platform.currentLanguage# to detect the logged-in user’s interface language.
A CASE statement in SQL to conditionally choose between Arabic and English column names.

Whenever the user changes the platform locale (via User Profile or /web/userview language toggle), the dropdown automatically displays the correct labels.

💻 Full Code

Use the following SQL query in your Select Box’s “Options Binder → JDBC Binder → SQL Query”:

SELECT 
    c_code AS value, 
    CASE '#platform.currentLanguage#'
        WHEN 'ar' THEN c_name_ar
        ELSE c_name_en
    END AS label
FROM app_fd_governate_mst
ORDER BY label

✅ Explanation:

c_code → The stored value in Joget (e.g., 001, 002, etc.)
c_name_en → English name of the location
c_name_ar → Arabic name of the location
#platform.currentLanguage# → Joget’s built-in variable that returns "ar", "en", or another locale code depending on the user’s active language

🧠 Example Use Cases

🌍 Government or Region Dropdowns — show English or Arabic names dynamically.
🏢 Branch Selector — display localized branch names based on user locale.
🏫 School / University Lists — handle multilingual labels seamlessly.
📦 Product Category Selector — automatically adjust category names to the interface language.

🛠️ Customization Tips

💡 Add more languages:
You can extend the CASE statement to support multiple locales:

CASE '#platform.currentLanguage#'
    WHEN 'ar' THEN c_name_ar
    WHEN 'fr' THEN c_name_fr
    ELSE c_name_en
END

⚙️ Default language fallback:
ELSE c_name_en ensures that English labels appear when no match is found.

🗂️ Table naming convention:
Keep your table name generic — e.g., app_fd_location_mst — to avoid exposing project-specific data.

🌟 Key Benefits

✅ Fully automatic localization — no extra scripting or filters required.
⚙️ Simple SQL-only setup — works directly in Select Box configuration.
💬 Consistent user experience — respects platform locale settings.
📱 Multilingual scalability — add new columns and locales easily.

🔒 Security Note

⚠️ Always ensure that:

The SQL query only reads from safe, authorized tables.
No sensitive information is exposed via the label column.
Use parameterized queries if dynamic filtering is added later.

🗑️ Add Delete Button and Add Row Feature in Joget Spreadsheet using JS

Explorer — Tue, 11 Nov 2025 05:44:52 +0000

🧩 Overview

In Joget, the Spreadsheet form element (powered by Handsontable) is perfect for managing tabular data inside forms.
However, it doesn’t natively provide built-in row-level delete buttons or a convenient add row feature.

In this guide, we’ll learn how to:
✅ Add a delete button to each row in a Joget Spreadsheet.
✅ Create a separate “Add Row” button that dynamically inserts new rows.
✅ Keep the entire implementation simple, secure, and fully functional.

⚙️ How It Works

💡 The approach uses a custom column renderer and a jQuery button event:

The custom renderer injects a Delete button in a column cell.
The button calls hot.alter("remove_row", row) to delete that row.
A separate Add Row button triggers hot.alter("insert_row_below") to insert a new row at the bottom.
Both actions are performed dynamically without reloading the form.

🧠 Important:

Set the spreadsheet column format type to Custom.
Paste the renderer script directly in the custom field configuration.
Avoid adding any extra comments inside the renderer function (to prevent Joget parser issues).

💻 Full Code

<!-- 🔹 Place this inside your Spreadsheet column (Format Type: Custom) -->
{ { 
  renderer: function (instance, td, row, col, prop, value, cellProperties) { 
    td.innerHTML = "<button type='button' class='eaction'>#i18n.ocs_delete_btn#</button>"; 
    td.style.textAlign = "center"; 
    $(document).ready(function () { 
      let hot = FormUtil.getField("appointments_spreadSheet").data("hot"); 
      let btn = td.querySelector(".eaction"); 
      btn.onclick = function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        hot.alter("remove_row", row); 
      }; 
    }); 
  } 
} }

// 🔹 Add this script in a Custom HTML element below your Spreadsheet

$("#addRowBtn").on("click", function(e) {
    e.preventDefault();
    let hot = FormUtil.getField("appointments_spreadSheet").data("hot");
    console.log({hot: hot});
    if (!hot) {
        console.error("Handsontable not initialized");
        return;
    }

    try {
        let lastRow = hot.countRows();
        hot.alter("insert_row_below", lastRow);
    } catch (err) {
        console.error("Failed to add row", err);
    }
});

<!-- 🔹 Add Row Button -->
<button id="addRowBtn" class="btn btn-primary">
  ➕ Add Row
</button>

🧠 Example Use Cases

✅ Employee Shift Planner – Quickly add or remove shift rows.
✅ Project Task Tracker – Manage task entries dynamically.
✅ Material Request Form – Add/remove item rows on demand.
✅ Appointment List – Delete canceled appointments instantly.

🛠️ Customization Tips

💡 To change the delete button label:
Replace

#i18n.ocs_delete_btn#

with plain text (e.g., "Delete" or "Remove").

⚙️ To use a custom Spreadsheet ID:
Update this line:

FormUtil.getField("appointments_spreadSheet")

to match your spreadsheet’s field ID.

🎨 To style buttons:
Apply CSS in a Custom HTML element:

<style>
  .eaction {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
  }
  #addRowBtn {
    margin-top: 10px;
  }
</style>

🌟 Key Benefits

✅ User-friendly: Adds clear visual controls to manage rows.
⚙️ Lightweight: Uses only jQuery and built-in Joget APIs.
🚀 Instant updates: No form reload needed.
🧩 Reusable: Works in any spreadsheet-based form.
🔧 Customizable: Easily adjust button text, color, or logic.

🔒 Security Note

⚠️ Ensure that delete actions are contextually safe —

Only use this feature for client-side data entry (not for record deletion in the database).
If connected to backend records, validate all deletion logic on the server side before applying changes.

🧭 Final Thoughts

By adding these small enhancements, your Joget Spreadsheet becomes much more interactive and user-friendly.

🌐Locale Message Updates in Joget Using Beanshell and REST API

Explorer — Thu, 06 Nov 2025 05:27:22 +0000

🧩 Overview

Managing multiple language packs in Joget can become tedious when you frequently update UI text or labels.
This blog demonstrates how to automate locale message updates by fetching localized entries from a database table and submitting them to the Joget message API — all within a Beanshell script.

✅ Goal: Automatically sync custom message entries (key–value–locale) into Joget’s system locale messages.
⚙️ Technology Used: Beanshell, Joget REST API, CSRF-secured POST request.

⚙️ How It Works

🗄️ Fetch data from a custom table (app_fd_locale_msg_update) containing message keys, values, and locales.
🧠 Construct a JSON payload dynamically for each record.
🔐 Retrieve CSRF token securely from the Joget runtime.
🌍 POST the data to Joget’s internal message submission API endpoint.
🧹 Clean up by deleting the processed record from the table.

This makes localization updates dynamic, safe, and fully automated — without manual form submissions.

💻 Full Code

import java.net.URL;
import java.net.HttpURLConnection;
import java.io.OutputStream;
import java.io.InputStreamReader;
import java.io.BufferedReader;
import java.net.URLEncoder;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.sql.DataSource;
import org.joget.apps.app.service.AppUtil;
import org.joget.commons.util.LogUtil;
import org.joget.commons.util.SecurityUtil;

public static String escapeJson(String value) {
    if (value == null) return "";
    return value.replace("\\", "\\\\")
                .replace("\"", "\\\"")
                .replace("\n", "\\n")
                .replace("\r", "\\r")
                .replace("\t", "\\t");
}

try {
    // 1️⃣ Fetch current record ID
    String currentId = "#form.locale_msg_update.id#";  

    // 2️⃣ Prepare database connection
    String appId = "", locale = "", messageKey = "", messageValue = "", app_version = "";
    DataSource ds = (DataSource) AppUtil.getApplicationContext().getBean("setupDataSource");
    Connection con = ds.getConnection();

    try {
        String sql = "SELECT * FROM app_fd_locale_msg_update WHERE id = ?";
        PreparedStatement ps = con.prepareStatement(sql);
        ps.setString(1, currentId);
        ResultSet rs = ps.executeQuery();

        if (rs.next()) {
            appId = rs.getString("c_app_id");
            locale = rs.getString("c_locale");
            messageKey = rs.getString("c_messageKey");
            messageValue = rs.getString("c_message");
            app_version = rs.getString("c_app_version");
        }

        rs.close();
        ps.close();
    } finally {
        if (con != null) con.close();
    }

    LogUtil.info("DB Values", "appId=" + appId + ", locale=" + locale + ", key=" + messageKey);

    // 3️⃣ Build API request
    String appVersion = "#appDef.version#";
    String apiUrl = "#request.baseURL#/web/json/console/app/" + appId + "/" + app_version + "/message/submit";

    String messageId = messageKey + "_" + locale;
    String jsonPayload = "[{\"id\":\"" + escapeJson(messageId) + 
                        "\",\"key\":\"" + escapeJson(messageKey) + 
                        "\",\"value\":\"" + escapeJson(messageValue) + "\"}]";

    // 4️⃣ Include CSRF token
    String csrfParam = SecurityUtil.getCsrfTokenName();
    String csrfValue = SecurityUtil.getCsrfTokenValue(request);

    String postData = "appId=" + URLEncoder.encode(appId, "UTF-8")
                    + "&appVersion=" + URLEncoder.encode(appVersion, "UTF-8")
                    + "&locale=" + URLEncoder.encode(locale, "UTF-8")
                    + "&data=" + URLEncoder.encode(jsonPayload, "UTF-8")
                    + "&" + csrfParam + "=" + URLEncoder.encode(csrfValue, "UTF-8");

    // 5️⃣ Send POST request
    HttpURLConnection conn = null;
    BufferedReader reader = null;

    try {
        URL url = new URL(apiUrl);
        conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("POST");
        conn.setDoOutput(true);
        conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
        conn.setRequestProperty("Cookie", "JSESSIONID=" + request.getSession().getId());
        conn.setRequestProperty(csrfParam, csrfValue);
        conn.setRequestProperty("X-Requested-With", "XMLHttpRequest");

        OutputStream os = conn.getOutputStream();
        os.write(postData.getBytes("UTF-8"));
        os.flush();
        os.close();

        InputStreamReader isr = conn.getResponseCode() >= 400
            ? new InputStreamReader(conn.getErrorStream(), "UTF-8")
            : new InputStreamReader(conn.getInputStream(), "UTF-8");

        reader = new BufferedReader(isr);
        String line;
        StringBuilder response = new StringBuilder();
        while ((line = reader.readLine()) != null) response.append(line);

        LogUtil.info("LocaleUpdater", "API Response: " + response.toString());

        // 6️⃣ Delete processed record
        try {
            con = ds.getConnection();
            String deleteSql = "DELETE FROM app_fd_locale_msg_update WHERE id = ?";
            PreparedStatement deletePs = con.prepareStatement(deleteSql);
            deletePs.setString(1, currentId);
            int deletedRows = deletePs.executeUpdate();
            LogUtil.info("LocaleUpdater", "Deleted rows: " + deletedRows);
            deletePs.close();
        } finally {
            if (con != null) con.close();
        }

    } finally {
        try { if (reader != null) reader.close(); } catch(Exception e) {}
        if (conn != null) conn.disconnect();
    }

} catch(Exception e) {
    LogUtil.error("LocaleUpdater", e, "Error in locale message update script");
}

💡 Example Use Cases

🌍 Multilingual UI Management: Automatically add or modify translated strings without opening the message manager.
⚙️ Bulk Localization Sync: Use this script in a scheduled process or post-form submission trigger.
🧾 Translation Review Workflow: Integrate it with a form where translators submit updates that get pushed into Joget once approved.

🧰 Customization Tips

✅ Modify the source table name if your schema differs.
✅ Add WHERE clauses or filters to handle batch updates.
✅ If used with multiple locales, consider looping through a list of pending records.
✅ You can return a JSON status to display on form submission (optional).

🚀 Key Benefits

⚙️ Automation: Removes manual locale message maintenance.
🧠 Accuracy: Ensures translation entries stay consistent across versions.
🔄 Integration: Works with internal Joget CSRF-secured APIs.
📦 Reusability: Plug this into any app that maintains localized text data.

🔒 Security Note

Always use SecurityUtil.getCsrfTokenValue(request) to include the valid CSRF token.
Avoid exposing internal API URLs publicly.
Validate messageKey and locale before submission to prevent injection attacks.

🏁 Final Thoughts

This automation provides a robust way to manage dynamic language updates directly from your form data into the Joget platform — no manual clicks required.
By coupling Beanshell with Joget’s secure internal API, you gain a powerful extension point for localization and continuous deployment of translated UI assets.

🧩 Track Workflow Activities by Name in Joget Using SQL and DataList Configuration

Explorer — Wed, 05 Nov 2025 07:37:51 +0000

🧭 Overview

In Joget, workflow tracking is essential for monitoring running or pending activities within business processes.

This implementation allows you to track workflow activities by their activity names (e.g., those containing "validate request") by joining Joget’s workflow tables.

The combination of SQL and DataList configuration provides an easy way to display:

🔢 Process IDs
🧾 Record IDs
👤 Pending Users
⚙️ Activity Details

⚙️ How It Works

Here’s the breakdown of how the query and DataList integration work together:

🧩 SHKAssignmentsTable stores assignment-level workflow information.
🔗 wf_process_link maps workflow process instances to their originating form records.
⚙️ The SQL JOIN retrieves both workflow instance and record identifiers.
🔍 WHERE ActivityId LIKE '%validate%request%' filters workflow activities by name pattern.
💡 DataList columns map the query results for display within Joget’s UI.

🧠 Full Code

📘 SQL Query

SELECT 
    shk.*, 
    wfl.originProcessId AS recordId
FROM 
    SHKAssignmentsTable AS shk
INNER JOIN 
    wf_process_link AS wfl
    ON shk.ActivityProcessId = wfl.processId
WHERE 
    ActivityId LIKE '%validate%request%';

This query returns all workflow assignments for activities whose IDs or names contain "validate" and "request" — allowing you to trace specific approval or validation tasks.

🧱 DataList JSON Columns

"columns": [ { "id": "column_9", "name": "ResourceId", "label": "Pending With", "filterable": true, "hidden": "false", "sortable": "false" }, { "id": "column_1", "name": "ActivityProcessId", "label": "Process ID", "filterable": true, "hidden": "false", "sortable": "false" }, { "id": "column_0", "name": "recordId", "label": "Record ID", "filterable": true, "hidden": "false", "sortable": "false" }, { "id": "column_7", "name": "ActivityId", "label": "Activity ID", "filterable": true, "hidden": "false", "sortable": "false" }, { "id": "column_6", "name": "ActivityProcessDefName", "label": "Activity Process Definition Name", "filterable": true, "hidden": "false", "sortable": "false" } ]

💼 Example Use Cases

✅ Identify all pending “validation” tasks across multiple running workflows.
✅ Quickly locate which users are holding specific process steps.
✅ Monitor validation-related approvals for auditing or SLA tracking.
✅ Build a Workflow Tracker Dashboard within Joget using a DataList and this query.

🎨 Customization Tips

💡 Modify the LIKE condition to match any keyword (e.g., %approval% or %review%).
⚙️ Add date filters (shk.DateCreated) for recent activity monitoring.
🔁 Join with SHKActivitiesTable to include activity names or durations.
📊 Use Datalist Formatter Plugins for color-coded task states (e.g., Overdue, Pending).

🚀 Key Benefits

✅ Provides full visibility into active workflow states.
⚡ Reduces dependency on manual process tracking.
📈 Enables performance dashboards for process bottlenecks.
🔎 Easy to extend with filters and user-based views.

🔐 Security Note

⚠️ Ensure that only authorized users (e.g., administrators or process owners) have access to this DataList.
⚠️ Avoid exposing sensitive ResourceId or ProcessId fields to public users.
⚠️ Apply Joget permission controls (e.g., Userview Permission) on the DataList page.

🧩 Final Thoughts

This workflow tracking implementation helps administrators and managers gain real-time insights into active Joget processes by activity name.
It’s a powerful tool for auditing, debugging, and reporting in large workflow environments.

🔄 Process Migration Between App Versions in Joget

Explorer — Wed, 05 Nov 2025 07:27:29 +0000

🧭 Overview

When upgrading an app in Joget from one version to another, existing running workflow instances might still be tied to the old version.

This BeanShell script automates the migration of running workflow processes from a previous app version (from_version) to a new version (to_version), ensuring smooth continuity without manually aborting or recreating processes.

⚙️ How It Works

Here’s how this BeanShell script operates inside a Form Store Binder:

⚙️ Fetches the submitted data (App ID, From Version, To Version, Process ID).
🔍 Retrieves all running workflow processes for the specified app_id and from_version.
📦 Loads all available process definitions from the new version (to_version).
🔁 Compares process definitions between old and new versions.
🧩 For matching process definitions:
- Migrates the workflow instance to the new version.
🚫 For unmatched processes:
- Aborts them safely to maintain workflow consistency.
🧾 Logs every action and updates a num_migrated field with the total migrated count.
💾 Finally, uses the WorkflowFormBinder to store the updated record.

🧠 Full Code

import java.util.Collection;
import java.util.ArrayList;
import org.joget.commons.util.LogUtil;
import org.joget.apps.form.model.Element;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormRow;
import org.joget.apps.form.model.FormRowSet;
import org.joget.apps.form.service.FormUtil;
import org.joget.apps.form.model.FormStoreBinder;
import org.joget.plugin.base.PluginManager;
import org.joget.apps.app.model.AppDefinition;
import org.joget.apps.app.model.PackageDefinition;
import org.joget.apps.app.service.AppUtil;
import org.joget.workflow.model.WorkflowProcess;
import org.joget.workflow.model.service.WorkflowManager;
import org.joget.workflow.util.WorkflowUtil;

public FormRowSet execute(element, rows, formData) {

    if (rows != null && !rows.isEmpty()) {
        WorkflowManager workflowManager = (WorkflowManager) AppUtil.getApplicationContext().getBean("workflowManager");

        FormRow row = rows.get(0);
        String appId = row.getProperty("app_id");
        String fromVersion = row.getProperty("from_version");
        String toVersion = row.getProperty("to_version");
        String single_processId = row.getProperty("single_processId");

        Collection runningProcessList = workflowManager.getRunningProcessList(appId, null, null, fromVersion, null, null, 0, null);
        Collection processes = workflowManager.getProcessList(appId, toVersion);

        LogUtil.info("BeanShell", "Updating running processes for " + appId + " from " + fromVersion + " to " + toVersion);

        if (!runningProcessList.isEmpty() && !processes.isEmpty()) {
            Collection newProcessDefIds = new ArrayList();
            for (WorkflowProcess process : processes) {
                newProcessDefIds.add(process.getId());
            }

            for (WorkflowProcess process : runningProcessList) {
                String processId = null;
                try {
                    processId = process.getInstanceId();
                    String processDefId = process.getId();
                    processDefId = processDefId.replace("#" + fromVersion.toString() + "#", "#" + toVersion.toString() + "#");

                    if (newProcessDefIds.contains(processDefId)) {
                        workflowManager.processCopyFromInstanceId(processId, processDefId, true);
                        LogUtil.info("BeanShell", "Migrated process " + processId + ".");
                    } else {
                        workflowManager.processAbort(processId);
                        LogUtil.info("BeanShell", "Process Def ID " + processDefId + " does not exist. Aborted process " + processId + ".");
                    }
                } catch (Exception e) {
                    LogUtil.error(getClass().getName(), e, "Error updating process " + processId);
                }
            }

            row.setProperty("num_migrated", runningProcessList.size().toString());
            LogUtil.info("BeanShell", "Completed updating running processes for " + appId + " from " + fromVersion + " to " + toVersion);
        } else {
            LogUtil.info("BeanShell", "No running processes to update for " + appId + " from " + fromVersion + " to " + toVersion);
        }

        PluginManager pluginManager = (PluginManager) AppUtil.getApplicationContext().getBean("pluginManager");
        FormStoreBinder binder = (FormStoreBinder) pluginManager.getPlugin("org.joget.apps.form.lib.WorkflowFormBinder");
        binder.store(element, rows, formData);
    }

    return rows;
}

return execute(element, rows, formData);

💼 Example Use Cases

✅ Migrating all running workflow instances when deploying a new app version.
✅ Keeping workflow states consistent between staging and production environments.
✅ Automating process transitions during app upgrades or refactoring.

🎨 Customization Tips

💡 Add filtering logic to migrate only specific processes by ID or status.
⚙️ Log more detailed migration statistics (e.g., per-process-type counts).
🔁 Replace the manual from_version / to_version fields with auto-detected app versions using AppDefinition.

🚀 Key Benefits

✅ Saves hours of manual migration work.
⚡ Ensures version continuity without breaking process logic.
🧩 Automatically cleans up invalid or outdated process instances.
🔒 Prevents version mismatches during deployment.

🔐 Security Note

⚠️ Always validate the app_id and version inputs to prevent accidental cross-app migrations.
⚠️ Avoid exposing internal process IDs in UI or logs in production.
⚠️ Consider restricting this script’s execution to admin roles only.

🧩 Final Thoughts

This script provides a robust way to keep your workflow processes synchronized between Joget app versions — perfect for continuous delivery environments or versioned deployments.

💾 Custom "Save as Draft Without Validation" Button with Auto-Redirect in Joget Forms

Explorer — Tue, 04 Nov 2025 06:13:00 +0000

🧩 Overview

In many Joget applications, users want the flexibility to save their form progress as a draft and return later to complete it.

This guide shows how to create a custom "Save as Draft" button in Joget using a BeanShell script that:

Adds a Save as Draft button dynamically.
Automatically updates workflow status fields (status and wf_status).
Redirects users to the Inbox (or another page) after saving.

⚙️ How It Works

✅ The script dynamically inserts a SaveAsDraftButton inside a section’s layout.

✅ It then injects a small JavaScript snippet using a CustomHTML element to handle:

Status updates to "Draft"
Conditional redirection to a custom Userview page (your_menu_id)

💻 Full Code

Paste this BeanShell script into your Form → Section → Data → Load Binder → BeanShell:



import org.joget.apps.form.lib.SaveAsDraftButton;
import org.joget.apps.form.lib.SubmitButton;
import org.joget.apps.form.lib.CustomHTML;
import org.joget.apps.form.model.Column;
import org.joget.apps.form.model.Element;
import org.joget.apps.form.model.FormAction;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.Section;
import org.joget.apps.form.service.FormUtil;
import java.util.ArrayList;
import java.util.Collection;

// Create a collection for form actions
Collection formActions = new ArrayList();
String saveButtonLabel = "Save As Draft"; 
Element saveButton = new SaveAsDraftButton();
saveButton.setProperty(FormUtil.PROPERTY_ID, "customSaveAsDraft");
saveButton.setProperty("label", saveButtonLabel);
formActions.add(saveButton);

// Get the form section and its first column
Section section = element;
ArrayList columns = (ArrayList) section.getChildren();
Column column = columns.get(0);
column.setProperty("horizontal", "true");
column.setChildren(formActions);

// Add layout fix and script logic
Element html = new CustomHTML();
String script = "<script>$(document).ready(function(){ ";

// Move the button layout into section-actions
script += "$('#" + section.getPropertyString("id") + "').find('.form-cell').prependTo('#section-actions .form-column');";
script += "$('#" + section.getPropertyString("id") + "').remove();";

// Set workflow status to Draft
script += "$('#status').val('Draft').trigger('change');";
script += "$('#wf_status').val('Draft').trigger('change');";

// Check if Save As Draft button was clicked and redirect
FormData fd = formData;
if (fd.getRequestParameter("customSaveAsDraft") != null) {
    script += "window.location.href='your_menu_id';"; // Redirect to Inbox or another page
}

script += "});</script>";

// Apply the custom HTML script
html.setProperty("id", "button_layout_fixes");
html.setProperty("label", "");
html.setProperty("value", script);
formActions.add(html);

return null;

💱 Automate Currency Conversion in Joget Using JavaScript and External API

Explorer — Mon, 03 Nov 2025 07:42:56 +0000

🧩 Overview

In many Joget applications, users enter transaction amounts in different currencies. To maintain financial consistency, it’s crucial to automatically convert these values into a standard base currency (like AED or USD).

This guide shows how to automate currency conversion inside a Joget form using JavaScript, Fetch API, and jQuery Autocomplete — all without writing any backend plugin code.

⚙️ How It Works

✅ On form load:

The script sets the AED amount field to zero.
Fetches live currency symbols from a safe exchange rate API.
Activates autocomplete on the currency input field.

⚙️ Whenever a user changes:

The currency,
The amount, or
The product name,

the script recalculates the AED value dynamically and updates the related fields (amountInAed, BalanceAmount, and exchangeRate).

💻 Full Code

<script>
  $(document).ready(function () {
    // Initialize amount field
    $('#amountInAed').val("0");
    let currency = "";

    // Fetch all currency symbols from a safe API endpoint
    fetch(`https://your-safe-api-endpoint/v4/latest/AED`)
      .then((data) => data.json())
      .then((data) => {
        currency = Object.keys(data.rates);

        // Enable autocomplete for currency input field
        $('#CURRENCY').autocomplete({
          source: currency
        });

        // (Optional) Populate dropdown instead of autocomplete
        // currency.forEach((data) => {
        //   $("select[name='CURRENCY']").append(`<option value=${data}>${data}</option>`);
        // });
      });

    // Trigger conversion whenever key fields change
    $("input[name='CURRENCY'], input[id='AMOUNT'], select[name=productName]").on("change keyup click", function () {
      JogetgetResults();
    });

    // Fetch conversion rates and update results
    function JogetgetResults() {
      fetch(`https://your-safe-api-endpoint/v4/latest/USD`)
        .then(currency => currency.json())
        .then(JogetdisplayResults);
    }

    // Perform conversion and update fields
    function JogetdisplayResults(currency) {
      var fromRateValue = $('input[name="CURRENCY"]').val();
      let total = 0;
      let fromRate = currency.rates[fromRateValue];
      let toRate = currency.rates['AED'];

      total += toRate / fromRate * $("input[id='AMOUNT']").val();
      total = Number.isNaN(total) ? 0 : total;

      // Update converted amount fields
      $("input[id='amountInAed']").val(total);
      $("input[id='amountInAed1']").val(total.toLocaleString('en-IN'));

      // Update balance fields
      $('#BalanceAmount').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total));
      $('#BalanceAmount1').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total).toLocaleString('en-IN'));

      // Display exchange rate information
      let DividedValue = Number.isNaN(toRate / fromRate) ? 0 : (toRate / fromRate).toFixed(3);
      $('#exchangeRate').val(`1 ${fromRateValue} = ${DividedValue} AED`);
      $('#exchangeRate1').val(`1 ${fromRateValue} = ${DividedValue} AED`);
    }
  });
</script>

🧠 Example Use Cases

✅ Expense Forms — Automatically convert foreign expenses into AED.

✅ Quotation Requests — Display AED equivalent of multi-currency offers.

✅ Budget Management — Show live exchange rate for spending insights.

🛠 Customization Tips

💡 Replace "AED" and "USD" with your preferred base and target currencies.

💡 You can use a dropdown instead of autocomplete by uncommenting the related lines.

💡 Adjust toLocaleString('en-IN') for your region (e.g., 'en-US' for US format).

🚀 Key Benefits

✅ Fully client-side — no backend logic needed.

✅ Reduces human error in currency entry.

✅ Provides real-time and transparent conversion.

✅ Easy to extend or modify for multiple targets.

🔒 Security Note

Always use a trusted and HTTPS-secured API endpoint to fetch exchange rates.

Avoid exposing sensitive API keys directly in client-side code.

🏁 Final Thoughts

This lightweight JavaScript solution empowers Joget users to manage real-time currency conversion directly in forms — boosting both usability and data accuracy.