How to Add a Character Counter and Limit to Multi-line Text Field in Service Portal Catalog Item?

[Domi727]

Hi everyone,

I'm working on a catalog item in the Service Portal (ESC), and I need to implement a character counter for a multi-line text field.

Here’s what I’m trying to achieve:

• Limit the input to 1000 characters.
• Display a live character counter below or beside the field.
• Automatically truncate any excess characters beyond the limit.

I’ve tried using some client scripts and UI policies, but I’m not sure how to best approach this in the context of the Service Portal. Ideally, I’d like a solution that works seamlessly with the portal widgets and doesn’t require heavy customization.

Has anyone implemented something similar? Any guidance, code snippets, or best practices would be greatly appreciated!

Thanks in advance!

[Ankur Bawiskar · Accepted solution]

@Domi727 

You can use onChange catalog client script on that variable and achieve these but not the live count

• Limit the input to 1000 characters. -> Yes
• Display a live character counter below or beside the field. -> Check below link
• Automatically truncate any excess characters beyond the limit. -> Yes

How to display counter for number of characters left on catalog item variable 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar · Accepted solution]

@Domi727 

You can use onChange catalog client script on that variable and achieve these but not the live count

• Limit the input to 1000 characters. -> Yes
• Display a live character counter below or beside the field. -> Check below link
• Automatically truncate any excess characters beyond the limit. -> Yes

How to display counter for number of characters left on catalog item variable 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@Domi727 

Hope you are doing good.

Did my reply answer your question?

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Domi727 · Accepted solution]

Hi @Ankur Bawiskar,

Thanks for your reply!

We’ve solved the issue. The problem was with the coloring, and it needed to be displayed right-aligned in the x/max characters format.

The solution:

1. Rich Text Label Integration:

   • The g_form.setValue("field_counter", counterLabel) ensures the character counter dynamically updates within the Rich Text Label.

2. Event Listener:

   • The addEventListener ensures the counter updates every time the user types in the field.

3. Character Limit Handling:

   • If the character count exceeds the maxChars limit, the input is automatically truncated to the maximum allowed length.

4. Dynamic Styling:

   • The counter text changes color to red when the character count reaches or exceeds the limit, providing a visual cue to the user.

5. Parameters:

   • field: The name of the input field being monitored.
   • field_counter: The name of the Rich Text Label where the counter is displayed.
   • maxChars: The maximum number of characters allowed.

Script

function onChange(control, oldValue, newValue, isLoading) {

    var maxChars = 25;

    updateCounter();

    // Add an event listener to the input field
    this.addEventListener('input', updateCounter);

    function updateCounter() {
        var fieldValue = g_form.getField("field").stagedValue;
        var fieldLength = fieldValue.length;
        var color = fieldLength >= maxChars ? "red" : "black";

        // Check if the character count exceeds the maximum limit
        if (fieldLength >= maxChars) {
            fieldValue = fieldValue.substring(0, maxChars);
            g_form.getField("field").stagedValue = fieldValue;
            g_form.setValue("field", fieldValue);
        }
        g_form.setLabelOf("field_counter", `<p style="text-align: right; color: ${color};">${fieldLength}/${maxChars}</p>`);
    };
}

[Ankur Bawiskar]

@Domi727 

share the final working code so that it helps other members in future.

If my response helped please mark it correct and close the thread so that it benefits future readers.