Show Character Counter for Form Fields in ServiceNow Without Risky DOM Manipulation

 📝 Summary:

When entering names or descriptions in fields like Client Scripts, Business Rules, or Scheduled Jobs, users often hit the maximum character limit unexpectedly. This results in rewriting and poor user experience.

This article provides a simple and safe solution that shows remaining characters for specific fields, improving form usability—without using unsafe DOM manipulation techniques.

---

💡 Use Case:

You're creating or editing records in tables like:

• sys_script (Business Rules)

• sys_client_script (Client Scripts)

• sys_trigger (Scheduled Jobs)

You try typing in the Name or Short description fields, and suddenly you hit a max character limit without any warning. This script shows the remaining characters live, just below the field, to avoid surprises.

---

✅ Key Features:

• Works on standard forms (not just Service Portal)

• No risky HTML DOM manipulation

• Displays live character counter

• Optionally shows warning message when limit is exceeded

• Easy to extend to multiple fields and tables

---

🛠️ Script (Client Script – Type: onLoad, UI Type: All, Isolate Script: Unchecked):

function onLoad() {

    var fieldList = ['name', 'short_description']; // Fields to apply character counter

    fieldList.forEach(function(fieldName) {

        var fieldControl = g_form.getControl(fieldName);

        if (!fieldControl) return;

        // Get dictionary definition to fetch max length

        var maxLength = fieldControl.getAttribute('maxlength') || 100; // fallback if not found

        maxLength = parseInt(maxLength);

        // Create the help text element

        var counterId = fieldName + '_char_counter';

        var existingCounter = document.getElementById(counterId);

        if (!existingCounter) {

            var counterEl = document.createElement('div');

            counterEl.id = counterId;

            counterEl.style.fontSize = "11px";

            counterEl.style.marginTop = "4px";

            counterEl.style.color = "#888";

            fieldControl.parentNode.appendChild(counterEl);

        }

        // Add keyup listener

        fieldControl.addEventListener('keyup', function() {

            var currentLen = g_form.getValue(fieldName).length;

            var remaining = maxLength - currentLen;

            var message = remaining + " characters remaining";

            document.getElementById(counterId).innerText = message;

            // Optionally, show warning if limit exceeded

            if (remaining < 0) {

                g_form.showFieldMsg(fieldName, "Character limit exceeded by " + Math.abs(remaining), "error");

            } else {

                g_form.hideFieldMsg(fieldName, true);

            }

        });

        // Trigger it once onLoad to show initial count

        fieldControl.dispatchEvent(new Event('keyup'));

    });

}

---

🔐 Why Isolate Script = Unchecked?

To access DOM-like properties such as g_form.getControl(fieldName).getAttribute('maxlength'), we must disable script isolation.
This is safe here because:

• We’re only reading attributes.

• We’re not modifying any layout or DOM nodes dangerously.

• All changes are limited to UX enhancement, not structure.

---

🚀 How to Apply:

1. Navigate to System Definition > Client Scripts

2. Create a new onLoad Client Script

3. Target any table (like sys_script or sys_client_script)

4. Paste the code above

5. Uncheck "Isolate Script"

6. Test it on your form – you’ll now see a live character counter below the field(s)!

---

📦 Reusable & Extendable:

You can use the same logic for:

• Any custom or out-of-box field with a character limit

• Other tables by reusing the same script

• Portal widgets (with slight changes)

---

⚠️ Note:

Avoid using document.getElementById() or modifying HTML content directly. This solution stays within ServiceNow's supported boundaries while achieving a better user experience.

---

🙌 Result:

Your users will now see how many characters they have left as they type—making forms smarter, cleaner, and frustration-free!

---

📸 Screenshots / Output Preview: