diff --git a/Client-Side Components/Client Scripts/Live Character Counter and Validator/README.md b/Client-Side Components/Client Scripts/Live Character Counter and Validator/README.md new file mode 100644 index 0000000000..24c529a6cc --- /dev/null +++ b/Client-Side Components/Client Scripts/Live Character Counter and Validator/README.md @@ -0,0 +1,11 @@ +This solution dynamically provides users with real-time feedback on the length of a text input field (like short_description or a single-line text variable). +It immediately displays a character count beneath the field and uses visual cues to indicate when a pre-defined character limit has been reached or exceeded. + +This is a vital User Experience (UX) enhancement that helps agents and users write concise, actionable information, leading to improved data quality and better integration reliability. + +Name Live_Character_Counter_ShortDesc_OnLoad +Table : Custom Table or Incident +Type onChange +Field : Description +UI Type All +Isolate Script false diff --git a/Client-Side Components/Client Scripts/Live Character Counter and Validator/character_counter.js b/Client-Side Components/Client Scripts/Live Character Counter and Validator/character_counter.js new file mode 100644 index 0000000000..1c4295b740 --- /dev/null +++ b/Client-Side Components/Client Scripts/Live Character Counter and Validator/character_counter.js @@ -0,0 +1,31 @@ +function onChange(control, oldValue, newValue, isLoading, isTemplate) { + + var FIELD_NAME = 'short_description'; + var MAX_CHARS = 100; + var currentLength = newValue.length; + var counterId = FIELD_NAME + '_counter_label'; + if (typeof g_form.getControl(FIELD_NAME) !== 'undefined' && !document.getElementById(counterId)) { + var controlElement = g_form.getControl(FIELD_NAME); + var counterLabel = document.createElement('div'); + counterLabel.setAttribute('id', counterId); + counterLabel.style.fontSize = '85%'; + counterLabel.style.marginTop = '2px'; + controlElement.parentNode.insertBefore(counterLabel, controlElement.nextSibling); + } + var counterElement = document.getElementById(counterId); + + if (counterElement) { + var remaining = MAX_CHARS - currentLength; + + + counterElement.innerHTML = 'Characters remaining: ' + remaining + ' (Max: ' + MAX_CHARS + ')'; + + // Apply red color if the limit is exceeded + if (remaining < 0) { + counterElement.style.color = 'red'; + } else { + // Revert color if back within limits + counterElement.style.color = 'inherit'; + } + } +}