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