From 823ef12b76c81556e0df049c955d8fb6adbb6922 Mon Sep 17 00:00:00 2001 From: trimbakeshmadhan-109 Date: Tue, 28 Oct 2025 00:37:03 +0530 Subject: [PATCH 1/4] Create Remaining Field Character Counter.js This script provides immediate feedback to users by displaying the remaining characters for a text field, which is especially useful for fields with a maximum length --- .../Remaining Field Character Counter.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Remaining Field Character Counter.js diff --git a/Client-Side Components/Client Scripts/Remaining Field Character Counter.js b/Client-Side Components/Client Scripts/Remaining Field Character Counter.js new file mode 100644 index 0000000000..d25c8437c2 --- /dev/null +++ b/Client-Side Components/Client Scripts/Remaining Field Character Counter.js @@ -0,0 +1,27 @@ +function onChange(control, oldValue, newValue, isLoading, isTemplate) { + if (isLoading || newValue === '') { + return; + } + var fieldName = 'name'; + + var maxLength = g_form.getControl(fieldName).getAttribute('maxlength'); + if (maxLength) { + + var remaining = maxLength - newValue.length; + var message = 'Remaining characters: ' + remaining; + + // Clear previous messages to avoid duplication. + g_form.hideFieldMsg(fieldName); + + if (remaining <= 10 && remaining >= 0) { + g_form.showFieldMsg(fieldName, message, 'warning'); + } else if (remaining < 0) { + g_form.showFieldMsg(fieldName, 'Maximum characters exceeded!', 'error'); + } else { + g_form.showFieldMsg(fieldName, message, 'info'); + } + } + + + +} From e96cb349b16868f6f3431cb53cf4fe52f93b543b Mon Sep 17 00:00:00 2001 From: trimbakeshmadhan-109 Date: Tue, 28 Oct 2025 00:47:07 +0530 Subject: [PATCH 2/4] Field Character Counter This script provides immediate feedback to users by displaying the remaining characters for a text field, which is especially useful for fields with a maximum length --- .../Field Character Counter.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Field Character Counter/Field Character Counter.js diff --git a/Client-Side Components/Client Scripts/Field Character Counter/Field Character Counter.js b/Client-Side Components/Client Scripts/Field Character Counter/Field Character Counter.js new file mode 100644 index 0000000000..d25c8437c2 --- /dev/null +++ b/Client-Side Components/Client Scripts/Field Character Counter/Field Character Counter.js @@ -0,0 +1,27 @@ +function onChange(control, oldValue, newValue, isLoading, isTemplate) { + if (isLoading || newValue === '') { + return; + } + var fieldName = 'name'; + + var maxLength = g_form.getControl(fieldName).getAttribute('maxlength'); + if (maxLength) { + + var remaining = maxLength - newValue.length; + var message = 'Remaining characters: ' + remaining; + + // Clear previous messages to avoid duplication. + g_form.hideFieldMsg(fieldName); + + if (remaining <= 10 && remaining >= 0) { + g_form.showFieldMsg(fieldName, message, 'warning'); + } else if (remaining < 0) { + g_form.showFieldMsg(fieldName, 'Maximum characters exceeded!', 'error'); + } else { + g_form.showFieldMsg(fieldName, message, 'info'); + } + } + + + +} From 5c5434f99b1463ef01d140f546e9785ab95e8fcc Mon Sep 17 00:00:00 2001 From: trimbakeshmadhan-109 Date: Tue, 28 Oct 2025 00:48:08 +0530 Subject: [PATCH 3/4] Delete Client-Side Components/Client Scripts/Remaining Field Character Counter.js --- .../Remaining Field Character Counter.js | 27 ------------------- 1 file changed, 27 deletions(-) delete mode 100644 Client-Side Components/Client Scripts/Remaining Field Character Counter.js diff --git a/Client-Side Components/Client Scripts/Remaining Field Character Counter.js b/Client-Side Components/Client Scripts/Remaining Field Character Counter.js deleted file mode 100644 index d25c8437c2..0000000000 --- a/Client-Side Components/Client Scripts/Remaining Field Character Counter.js +++ /dev/null @@ -1,27 +0,0 @@ -function onChange(control, oldValue, newValue, isLoading, isTemplate) { - if (isLoading || newValue === '') { - return; - } - var fieldName = 'name'; - - var maxLength = g_form.getControl(fieldName).getAttribute('maxlength'); - if (maxLength) { - - var remaining = maxLength - newValue.length; - var message = 'Remaining characters: ' + remaining; - - // Clear previous messages to avoid duplication. - g_form.hideFieldMsg(fieldName); - - if (remaining <= 10 && remaining >= 0) { - g_form.showFieldMsg(fieldName, message, 'warning'); - } else if (remaining < 0) { - g_form.showFieldMsg(fieldName, 'Maximum characters exceeded!', 'error'); - } else { - g_form.showFieldMsg(fieldName, message, 'info'); - } - } - - - -} From be10dff4b8728fe111c5b74c3d59f3bade8042e5 Mon Sep 17 00:00:00 2001 From: trimbakeshmadhan-109 Date: Tue, 28 Oct 2025 00:50:48 +0530 Subject: [PATCH 4/4] README.md --- .../Field Character Counter/README.md | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Field Character Counter/README.md diff --git a/Client-Side Components/Client Scripts/Field Character Counter/README.md b/Client-Side Components/Client Scripts/Field Character Counter/README.md new file mode 100644 index 0000000000..bd76f579bf --- /dev/null +++ b/Client-Side Components/Client Scripts/Field Character Counter/README.md @@ -0,0 +1,71 @@ +Live Character Counter Client Script +This ServiceNow client script provides a live character counter for a specified text field, offering immediate feedback to the user as they type. The script visually alerts the user when they are nearing or have exceeded the maximum character limit. +Features +Real-time feedback: The script updates the character count as the user types. +Visual cues: Different message styles are used to indicate the character count status: +Info: Standard message showing the remaining characters. +Warning: Displays when 10 or fewer characters remain. +Error: Appears when the maximum character limit is exceeded. +Clean user experience: The script clears previous messages before displaying a new one, preventing duplicate messages from cluttering the form. +Best practices compliant: The script uses g_form methods exclusively and avoids direct DOM manipulation, ensuring compatibility and maintainability across ServiceNow upgrades. +Installation +1. Create the Client Script +Navigate to System Definition > Client Scripts. +Click New. +Fill out the form with the following details: +Name: onChange - Live Character Counter +Table: Select the table where the target text field exists (e.g., Incident). +UI Type: All +Type: onChange +Field name: The name of the text field you want to monitor (e.g., short_description). +Script: Copy and paste the code snippet below. +2. Configure the script +Paste the following code into the Script field. Be sure to change the fieldName variable to match the internal name of your target field. +javascript +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading || newValue === '') { + return; + } + + // Set the internal name of the field to monitor. + var fieldName = g_form.getControl('name').name; // This dynamically gets the field name. + + // Fallback in case the control isn't found. + if (!fieldName) { + fieldName = control.name; + } + + var maxLength = g_form.getControl(fieldName).getAttribute('maxlength'); + if (maxLength) { + + var remaining = maxLength - newValue.length; + var message = 'Remaining characters: ' + remaining; + + // Clear previous messages to avoid duplication. + g_form.hideFieldMsg(fieldName); + + if (remaining <= 10 && remaining >= 0) { + g_form.showFieldMsg(fieldName, message, 'warning'); + } else if (remaining < 0) { + g_form.showFieldMsg(fieldName, 'Maximum characters exceeded!', 'error'); + } else { + g_form.showFieldMsg(fieldName, message, 'info'); + } + } +} +Use code with caution. + +How it works +Event trigger: The script is triggered every time the user modifies the selected onChange field. +Initial check: The script checks for isLoading or an empty newValue to prevent unnecessary execution on form load or when the field is empty. +Get field details: It retrieves the maxlength attribute from the field's control object. +Calculate remaining characters: It subtracts the current input length from the maximum length. +Display message: It uses conditional logic to display a message with a specific style (info, warning, or error) based on the remaining character count. +Clear messages: g_form.hideFieldMsg() ensures only the most current message is visible at any time. +Customization +Target Field: Change the Field name in the Client Script configuration to apply the counter to a different field. +Thresholds: Modify the remaining <= 10 condition to change the number of characters that trigger the warning message. +Message Text: Adjust the message variables to customize the text displayed to the user. + + +