Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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';
}
}
}
Loading