From e973eae6df59fe704ecdcbf2679d5d198dd0b888 Mon Sep 17 00:00:00 2001 From: Chetna Sharma <146471211+chetnadev@users.noreply.github.com> Date: Sun, 12 Oct 2025 14:40:27 +0530 Subject: [PATCH 1/4] Create code.js --- .../code.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js diff --git a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js new file mode 100644 index 0000000000..74b8968ab6 --- /dev/null +++ b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js @@ -0,0 +1,17 @@ +function onLoad() { + var field = g_form.getControl('description'); + var counter = document.createElement('div'); + counter.id = 'desc_word_counter'; + counter.style.marginTop = '5px'; + field.parentNode.appendChild(counter); + + field.addEventListener('input', function() { + var wordCount = field.value.trim().split(/\s+/).length; + counter.innerText = 'Word Count: ' + (field.value ? wordCount : 0); + if (wordCount > 150) { + counter.style.color = 'red'; + } else { + counter.style.color = 'green'; + } + }); +} From 4a57bfca01c3c04e57e8b51fb9c5fe3734b0113a Mon Sep 17 00:00:00 2001 From: Chetna Sharma <146471211+chetnadev@users.noreply.github.com> Date: Sun, 12 Oct 2025 14:42:41 +0530 Subject: [PATCH 2/4] Create README.md --- .../README.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/README.md diff --git a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/README.md b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/README.md new file mode 100644 index 0000000000..95c5f586f7 --- /dev/null +++ b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/README.md @@ -0,0 +1,5 @@ +The script enhances a form field (specifically the description field) by: +-Adding a live word counter below the field. +-Visually warning the user if the word count exceeds 150 words. + +This client-side script, intended for use in a ServiceNow form (e.g., catalog item or incident form), dynamically appends a custom `
` element below the `description` field to display a real-time word count. It leverages the `g_form.getControl()` API to access the field's DOM element and attaches an `input` event listener to monitor user input. The script calculates the word count by splitting the input text using a regular expression (`\s+`) and updates the counter accordingly. It applies conditional styling to the counter (`green` if ≤150 words, `red` if >150), providing immediate visual feedback to the user to enforce input constraints. From d336306dfeeec3ad6c45f4f4ca91866c53f342f9 Mon Sep 17 00:00:00 2001 From: Chetna Sharma <146471211+chetnadev@users.noreply.github.com> Date: Sun, 12 Oct 2025 15:08:54 +0530 Subject: [PATCH 3/4] Update code.js --- .../code.js | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js index 74b8968ab6..f70cdc3448 100644 --- a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js +++ b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js @@ -1,17 +1,19 @@ function onLoad() { - var field = g_form.getControl('description'); - var counter = document.createElement('div'); - counter.id = 'desc_word_counter'; - counter.style.marginTop = '5px'; - field.parentNode.appendChild(counter); + var fieldName = 'description'; - field.addEventListener('input', function() { - var wordCount = field.value.trim().split(/\s+/).length; - counter.innerText = 'Word Count: ' + (field.value ? wordCount : 0); - if (wordCount > 150) { - counter.style.color = 'red'; - } else { - counter.style.color = 'green'; - } + // Clear any existing messages on load + g_form.hideFieldMsg(fieldName, true); + + g_form.getControl(fieldName).addEventListener('input', function() { + var fieldValue = g_form.getValue(fieldName).trim(); + var wordCount = fieldValue ? fieldValue.split(/\s+/).length : 0; + + var message = 'Word Count: ' + wordCount; + var type = (wordCount > 150) ? 'error' : 'info'; // red for error, greenish for info + + // Clear previous message before showing new one + g_form.hideFieldMsg(fieldName, true); + + g_form.showFieldMessage(fieldName, message, type); }); } From 55acafcb62420b9ec19d457c417ec291c5359141 Mon Sep 17 00:00:00 2001 From: Chetna Sharma <146471211+chetnadev@users.noreply.github.com> Date: Sun, 12 Oct 2025 15:36:56 +0530 Subject: [PATCH 4/4] Updated 2 code.js --- .../code.js | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js index f70cdc3448..127a1fcb51 100644 --- a/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js +++ b/Client-Side Components/Client Scripts/Display a Live Word Count for Description Field/code.js @@ -1,19 +1,11 @@ -function onLoad() { - var fieldName = 'description'; +function onChange(control, oldValue, newValue, isLoading, isTemplate) { + if (isLoading || newValue === oldValue) { + return; + } - // Clear any existing messages on load - g_form.hideFieldMsg(fieldName, true); + var wordCount = newValue.trim().split(/\s+/).length; + var message = 'Word Count: ' + (newValue ? wordCount : 0); + var messageType = (wordCount > 150) ? 'error' : 'info'; - g_form.getControl(fieldName).addEventListener('input', function() { - var fieldValue = g_form.getValue(fieldName).trim(); - var wordCount = fieldValue ? fieldValue.split(/\s+/).length : 0; - - var message = 'Word Count: ' + wordCount; - var type = (wordCount > 150) ? 'error' : 'info'; // red for error, greenish for info - - // Clear previous message before showing new one - g_form.hideFieldMsg(fieldName, true); - - g_form.showFieldMessage(fieldName, message, type); - }); + g_form.showFieldMsg('description', message, messageType); }