From 57630c273ce6d42c8485050522eaefce42b5bfbc Mon Sep 17 00:00:00 2001 From: Poojitha Valli Pogaku Date: Mon, 20 Oct 2025 18:21:14 +0530 Subject: [PATCH 1/3] Field Progress Bar Counter --- .../Field Progress Bar Counter/README.md | 66 +++++++++++++++++++ .../Field Progress Bar Counter/script.js | 62 +++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md create mode 100644 Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js diff --git a/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md b/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md new file mode 100644 index 0000000000..435c06cce9 --- /dev/null +++ b/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md @@ -0,0 +1,66 @@ +# Field Progress Bar Counter + +## Overview +This client script adds a visual progress bar indicator when users type in text fields, showing how much of the field's maximum length has been used. It provides a more intuitive way to track character limits compared to simple numeric counters. + +## Features +- Visual progress bar that updates in real-time +- Color-coded feedback (green, yellow, red) based on usage +- Percentage indicator alongside the progress bar +- Smooth transitions between states +- Works with any text field with a character limit + +## Requirements +- ServiceNow instance +- Client Script execution rights +- Text fields with character limits (e.g., short_description, description) + +## Implementation Steps +1. Navigate to System Definition → Client Scripts +2. Create a new Client Script with these settings: + - Table: Choose your target table (e.g., incident, sc_req_item) + - Type: onChange + - Field name: Your target field (e.g., short_description) +3. Copy the code from script.js into your client script +4. Configure the maxLength variable if needed +5. Save and test + +## Configuration +The script can be customized by modifying these variables: +```javascript +var maxLength = 160; // Maximum characters allowed +var warningThreshold = 0.7; // Show yellow at 70% capacity +var criticalThreshold = 0.9; // Show red at 90% capacity +``` + +## How It Works +1. The script creates a progress bar div element below the field +2. As the user types, it calculates the percentage of used characters +3. The progress bar fills proportionally to character usage +4. Colors change based on defined thresholds: + - Green: Normal usage + - Yellow: Approaching limit + - Red: Near/at limit + +## Benefits +- Improved user experience with visual feedback +- Reduces likelihood of hitting character limits unexpectedly +- Helps users self-regulate content length +- Modern, professional appearance +- Zero server calls - all client-side + +## Usage Example +When implementing on an Incident's short description: +```javascript +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading || newValue === oldValue) { + return; + } + showProgressBar(control, newValue); +} +``` + +## Compatibility +- Works in all modern browsers +- Compatible with both classic and next-experience UIs +- Responsive design adapts to field width \ No newline at end of file diff --git a/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js b/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js new file mode 100644 index 0000000000..3df3f58294 --- /dev/null +++ b/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js @@ -0,0 +1,62 @@ +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading || newValue === oldValue) { + return; + } + + showProgressBar(control, newValue); +} + +function showProgressBar(control, value) { + var maxLength = 160; // Configurable maximum length + var warningThreshold = 0.7; // Show yellow at 70% capacity + var criticalThreshold = 0.9; // Show red at 90% capacity + + // Remove any existing progress bar + var existingBar = gel(control.name + '_progress'); + if (existingBar) { + existingBar.parentNode.removeChild(existingBar); + } + + // Create progress bar container + var container = document.createElement('div'); + container.id = control.name + '_progress'; + container.style.cssText = 'width: 100%; height: 4px; background: #e0e0e0; margin-top: 4px; border-radius: 2px; transition: all 0.3s ease;'; + + // Create progress bar fill + var fill = document.createElement('div'); + fill.style.cssText = 'height: 100%; width: 0%; border-radius: 2px; transition: all 0.3s ease;'; + + // Calculate percentage + var percent = (value.length / maxLength) * 100; + percent = Math.min(percent, 100); // Cap at 100% + + // Set fill width and color + fill.style.width = percent + '%'; + if (percent >= criticalThreshold * 100) { + fill.style.backgroundColor = '#ff4444'; // Red + } else if (percent >= warningThreshold * 100) { + fill.style.backgroundColor = '#ffbb33'; // Yellow + } else { + fill.style.backgroundColor = '#00C851'; // Green + } + + // Create percentage label + var label = document.createElement('div'); + label.style.cssText = 'font-size: 11px; color: #666; margin-top: 2px; text-align: right;'; + label.textContent = Math.round(percent) + '% used'; + + // Assemble and insert the progress bar + container.appendChild(fill); + container.appendChild(label); + + // Insert after the control + var parent = control.getElement().parentNode; + parent.insertBefore(container, control.getElement().nextSibling); + + // Add warning message if over limit + if (value.length > maxLength) { + g_form.addErrorMessage('This field exceeds the maximum length of ' + maxLength + ' characters'); + } else { + g_form.clearMessages(); + } +} \ No newline at end of file From f57504369fb1b1eced2661cea33cdf2f77f0038d Mon Sep 17 00:00:00 2001 From: Poojitha Valli Pogaku Date: Mon, 20 Oct 2025 19:06:01 +0530 Subject: [PATCH 2/3] Refactor progress bar logic for better usability --- .../Field Progress Bar Counter/script.js | 68 +++++++++++-------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js b/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js index 3df3f58294..dfc95eef17 100644 --- a/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js +++ b/Client-Side Components/Client Scripts/Field Progress Bar Counter/script.js @@ -1,62 +1,72 @@ -function onChange(control, oldValue, newValue, isLoading) { - if (isLoading || newValue === oldValue) { - return; - } - - showProgressBar(control, newValue); +function onLoad() { + var fieldName = 'short_description'; // Change to your field name + var maxLength = 160; + var warningThreshold = 0.7; + var criticalThreshold = 0.9; + + var fieldElement = g_form.getControl(fieldName); + if (!fieldElement) return; + + // Add progress bar initially + addProgressBar(fieldElement, fieldElement.value); + + // Attach keyup event for real-time updates + fieldElement.addEventListener('keyup', function() { + addProgressBar(fieldElement, fieldElement.value); + }); } -function showProgressBar(control, value) { - var maxLength = 160; // Configurable maximum length - var warningThreshold = 0.7; // Show yellow at 70% capacity - var criticalThreshold = 0.9; // Show red at 90% capacity - +function addProgressBar(fieldElement, value) { + var maxLength = 160; + var warningThreshold = 0.7; + var criticalThreshold = 0.9; + // Remove any existing progress bar - var existingBar = gel(control.name + '_progress'); + var existingBar = document.getElementById(fieldElement.name + '_progress'); if (existingBar) { existingBar.parentNode.removeChild(existingBar); } - + // Create progress bar container var container = document.createElement('div'); - container.id = control.name + '_progress'; + container.id = fieldElement.name + '_progress'; container.style.cssText = 'width: 100%; height: 4px; background: #e0e0e0; margin-top: 4px; border-radius: 2px; transition: all 0.3s ease;'; - + // Create progress bar fill var fill = document.createElement('div'); fill.style.cssText = 'height: 100%; width: 0%; border-radius: 2px; transition: all 0.3s ease;'; - + // Calculate percentage var percent = (value.length / maxLength) * 100; - percent = Math.min(percent, 100); // Cap at 100% - + percent = Math.min(percent, 100); + // Set fill width and color fill.style.width = percent + '%'; if (percent >= criticalThreshold * 100) { - fill.style.backgroundColor = '#ff4444'; // Red + fill.style.backgroundColor = '#ff4444'; } else if (percent >= warningThreshold * 100) { - fill.style.backgroundColor = '#ffbb33'; // Yellow + fill.style.backgroundColor = '#ffbb33'; } else { - fill.style.backgroundColor = '#00C851'; // Green + fill.style.backgroundColor = '#00C851'; } - + // Create percentage label var label = document.createElement('div'); label.style.cssText = 'font-size: 11px; color: #666; margin-top: 2px; text-align: right;'; label.textContent = Math.round(percent) + '% used'; - + // Assemble and insert the progress bar container.appendChild(fill); container.appendChild(label); - - // Insert after the control - var parent = control.getElement().parentNode; - parent.insertBefore(container, control.getElement().nextSibling); - + + // Insert after the field element + var parent = fieldElement.parentNode; + parent.insertBefore(container, fieldElement.nextSibling); + // Add warning message if over limit if (value.length > maxLength) { g_form.addErrorMessage('This field exceeds the maximum length of ' + maxLength + ' characters'); } else { g_form.clearMessages(); } -} \ No newline at end of file +} From bf346a80e3263ebf77879885e91dd8999e7848b9 Mon Sep 17 00:00:00 2001 From: Poojitha Valli Pogaku Date: Mon, 20 Oct 2025 19:07:07 +0530 Subject: [PATCH 3/3] Update README with usage instructions and benefits Added detailed usage instructions and benefits for the Field Progress Bar Counter script. --- .../Client Scripts/Field Progress Bar Counter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md b/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md index 435c06cce9..2d2f46329c 100644 --- a/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md +++ b/Client-Side Components/Client Scripts/Field Progress Bar Counter/README.md @@ -63,4 +63,4 @@ function onChange(control, oldValue, newValue, isLoading) { ## Compatibility - Works in all modern browsers - Compatible with both classic and next-experience UIs -- Responsive design adapts to field width \ No newline at end of file +- Responsive design adapts to field width