Live Character counter (#2209)

Author: MYaswanth28

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

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';
+        }
+    }
+}