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

[Harshil Gamidi]

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 a 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.

surprises.

---

Key Features:

• Works on standard forms (not just Service Portal)

• No risky HTML DOM manipulation

• Displays a live character counter

• Optionally shows a warning message when the 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 the 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 are created 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:

 

 

 

[Ankur Bawiskar]

@Harshil Gamidi 

It does involve DOM manipulation which is not recommended.

Why would admin require this functionality? Any use-case you have which you faced recently working on any story?