← Script library

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.

JavaScript
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.