Back to overview

Javascript in HELPTEXT fields (QR Codes on the fly)

Developer Tutorials Published on 20.02.2026

Developer Tutorial

Generating Dynamic QR Codes via Help Text Fields

Introduction

This tutorial demonstrates how to generate ad-hoc QR codes directly within your record forms using the Help Text field type. By leveraging client-side JavaScript and the system's placeholder replacement feature, you can create dynamic QR codes that encode the current record's URL or specific data fields without any backend modifications.

Prerequisite: When configuring the Help Text field, you must enable the option "Process Placeholders". This setting authorizes the rendering of HTML tags and the execution of the JavaScript code required for this technique.

Implementation Guide

1Create Field

Navigate to Admin > Manage Tables, edit your table's fields, and add a new field of type Help Text.

2Configure & Paste

Open the field options. Paste the code snippet below into the "Text" area and check Process Placeholders.

Code Snippet HTML / JavaScript

<!-- 1. Container for the QR Code -->
<div id="record-url-qrcode" style="width: 128px; height: 128px; margin-top: 15px;"></div>

<!-- 2. Script to generate the QR Code -->
<script>
// Ensure the QR code library is loaded only once to prevent conflicts
if (typeof QRCode === 'undefined') {
    let script = document.createElement('script');
    // Load qrcode.js from a reliable CDN
    script.src = "https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js";
    script.onload = function () {
        generateQRCodeForRecord();
    };
    document.head.appendChild(script);
} else {
    // If already loaded, execute directly
    generateQRCodeForRecord();
}

function generateQRCodeForRecord() {
    const container = document.getElementById("record-url-qrcode");
    // Only generate if the container exists and is empty
    if (container && !container.hasChildNodes()) { 
        new QRCode(container, {
            text: window.location.href, // Encodes the current page URL
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    }
}
</script>

Customization: Using Record Data

Instead of encoding the current URL (window.location.href), you can inject data from the current record using placeholders. The system replaces these placeholders before the JavaScript executes.

Example: Encode a tracking URL with the record's ID.

text: "https://mysystem.com/track/{id}",

Outlook & Use Cases

This technique of embedding dynamic JS-generated content via Help Text fields opens up numerous possibilities beyond simple URL sharing:

Inventory Management

Generate asset tags for equipment. Scanning the code on a device instantly opens the corresponding record in the inventory app for maintenance or status updates.

Digital vCards

In a CRM or Employee directory, generate a QR code containing vCard data. Scanning it allows users to instantly add the contact to their phone's address book.

Event Ticketing & Check-In

Encode a unique ticket ID or validation hash. Staff can scan the code at the entrance to verify validity and check in attendees.

WiFi Access

Store WiFi credentials in a "Locations" table and display a "Connect" QR code, allowing guests to join the network without typing passwords.