When creating dynamic and responsive Service Catalog items in ServiceNow, one common requirement is to adjust dropdown choices based on user input. A typical scenario involves clearing and repopulating a subcategory list whenever a category selection changes.

However, developers often encounter issues when clearing options, specifically unintentionally removing the default '--None--' option, which serves as a placeholder.

In this article, we'll explore how to effectively manage catalog choices, preserving the essential '--None--' option while dynamically updating the rest of the list.

Understanding the Issue: Losing the '--None--' Option

The problem arises when using the g_form.clearOptions() method in a catalog client script. This method removes all existing options, including the default '--None--' placeholder, which typically results in the option becoming non-selectable or disappearing entirely. The goal, however, is to maintain this default selection for better user experience and clarity.

Here's a typical example of this scenario:

var cat = newValue;
g_form.clearOptions('subcategory');

var choice = new GlideRecord('sys_choice');
choice.addQuery('dependent_value', cat);
choice.query(function(choice) {
    while (choice.next()) {
        g_form.addOption('subcategory', choice.value, choice.label);
    }
});

While this effectively repopulates options based on the selected category, it unfortunately removes the default '--None--' option or makes it non-functional.

Verified Solution: Preserving the Default '--None--' Option

To resolve this issue, leverage the g_form.addOption() method effectively by explicitly re-adding the '--None--' option at the correct position using its choiceIndex parameter.

Here’s a verified, effective approach:

Step-by-Step Guide:

  1. Clear existing options except for '--None--':
g_form.clearOptions('subcategory');
  1. Re-add the '--None--' option explicitly:
g_form.addOption('subcategory', '', '-- None --', 0);
  1. Dynamically add subsequent options:
var cat = newValue; 
var choice = new GlideRecord('sys_choice'); choice.addQuery('dependent_value', cat); 
choice.query(function(choice) { 
	while (choice.next()) { 
		g_form.addOption('subcategory', choice.value, choice.label); 
	} 
});

Using the choiceIndex parameter ensures the '--None--' option remains at the top, maintaining an intuitive selection order.

Alternative Approaches and Best Practices

  • Utilize Reference Qualifiers: For more complex forms or frequent dynamic changes, consider using Lookup Select Boxes with reference qualifiers instead of manual scripting. This method references a backend table for managing dependent fields effectively.
  • Avoid Client-side GlideRecord: Generally, it's advised to avoid client-side GlideRecord queries due to performance concerns. An alternative is to use server-side scripts or lookup variables that rely on tables, offering a cleaner and more efficient way to handle dynamic selections.

Managing dynamic dropdown lists effectively is crucial for maintaining a smooth and user-friendly experience in ServiceNow Service Catalog items. By explicitly re-adding the default '--None--' option and carefully controlling the sequence of added options, administrators can maintain clarity and improve usability.

  • Review your current Service Catalog items for potential usability improvements.
  • Implement the outlined method in your client scripts to ensure default choices remain functional.
  • Consider exploring Lookup Select Box variables with reference qualifiers as an alternative approach for complex scenarios.