Client Scripts
Field Help Text Toggler
Show contextual help text or tooltips for specific fields to guide users, with ability to toggle help on/off.
function onLoad() {
// Configuration: Define help text for each field
var fieldHelpText = {
'category': {
title: 'Incident Category',
text: 'Select the primary category that best describes this incident. ' +
'This determines routing and priority calculations.',
examples: ['Hardware issues: Physical device problems',
'Software: Application errors or bugs',
'Network: Connectivity or bandwidth issues']
},
'impact': {
title: 'Business Impact',
text: 'Assess how many users or services are affected by this incident.',
examples: ['1 - High: Multiple departments or critical services',
'2 - Medium: Single department or non-critical service',
'3 - Low: Individual user or minimal business impact']
},
'urgency': {
title: 'Urgency Level',
text: 'How quickly does this incident need to be resolved?',
examples: ['1 - High: Business operations stopped',
'2 - Medium: Degraded service, workaround available',
'3 - Low: Minimal impact, can be scheduled']
},
'short_description': {
title: 'Short Description',
text: 'Provide a brief, clear summary of the issue (50-100 characters). ' +
'This appears in list views and notifications.',
examples: ['Good: "Email server down - cannot send/receive"',
'Bad: "Problem with email"']
},
'description': {
title: 'Detailed Description',
text: 'Provide comprehensive information including:\n' +
'• What happened?\n' +
'• When did it start?\n' +
'• What were you doing?\n' +
'• Error messages or screenshots\n' +
'• Steps to reproduce',
examples: []
},
'assignment_group': {
title: 'Assignment Group',
text: 'Select the team responsible for resolving this type of incident. ' +
'If unsure, leave blank and it will be routed automatically.',
examples: []
}
};
// Track help visibility state
var helpVisible = false;
// Function to show help for a field
function showFieldHelp(fieldName) {
var help = fieldHelpText[fieldName];
if (!help) return;
var helpMessage = '<div style="margin: 10px 0;">' +
'<strong>' + help.title + '</strong><br/>' +
help.text;
if (help.examples && help.examples.length > 0) {
helpMessage += '<br/><br/><em>Examples:</em><ul style="margin: 5px 0;">';
help.examples.forEach(function(example) {
helpMessage += '<li>' + example + '</li>';
});
helpMessage += '</ul>';
}
helpMessage += '</div>';
g_form.showFieldMsg(fieldName, helpMessage, 'info', false);
}
// Function to hide all help messages
function hideAllHelp() {
Object.keys(fieldHelpText).forEach(function(fieldName) {
g_form.hideFieldMsg(fieldName);
});
}
// Function to toggle help display
function toggleHelp() {
helpVisible = !helpVisible;
if (helpVisible) {
// Show help for all configured fields
Object.keys(fieldHelpText).forEach(function(fieldName) {
showFieldHelp(fieldName);
});
g_form.addInfoMessage('Field help enabled. Click "Hide Help" to dismiss.');
} else {
// Hide all help
hideAllHelp();
g_form.clearMessages();
}
}
// Add toggle button as info message with link
var toggleLink = '<a href="javascript:void(0)" onclick="toggleHelp()" ' +
'style="font-weight: bold; text-decoration: underline;">' +
'Show Field Help</a>';
g_form.addInfoMessage('Need help filling out this form? ' + toggleLink);
// Make toggleHelp available globally
window.toggleHelp = toggleHelp;
// Show help for specific fields on focus (optional)
Object.keys(fieldHelpText).forEach(function(fieldName) {
// Add focus event listener
var field = g_form.getField(fieldName);
if (field) {
// Note: Direct DOM manipulation should be used carefully
// This is a simplified example
}
});
// Auto-show help for required empty fields
if (g_form.isNewRecord()) {
var requiredFields = ['short_description', 'category'];
requiredFields.forEach(function(fieldName) {
if (!g_form.getValue(fieldName) && fieldHelpText[fieldName]) {
showFieldHelp(fieldName);
}
});
}
}How to use it
1. Create an onLoad Client Script on your table 2. Customize fieldHelpText object with your fields and help content 3. Add examples and guidance specific to your organization 4. Consider adding help toggle to UI Policy or custom button 5. Test help visibility and formatting 6. Update help text based on user feedback 7. Consider internationalization for multi-language support
Adapt the table names, fields, and conditions to your instance. Test the behavior in a development environment before using it in production.