Tailoring Your ServiceNow Service Portal: Hiding the Reference Lookup Icon

The ServiceNow Service Portal offers a user-friendly interface for accessing services and information. While the default functionality is often sufficient, there might be instances where you need to customize the user experience further. One such customization involves controlling the visibility of the reference lookup icon, the magnifying glass that appears next to reference fields. This article will guide you on how to selectively hide this icon in your ServiceNow Service Portal, specifically focusing on Record Producers in the Helsinki release and beyond.

Understanding the Reference Lookup Icon in ServiceNow

In ServiceNow Service Portal forms, reference fields typically display a magnifying glass icon. Clicking this icon opens a pop-up window allowing users to search and select records from the referenced table. While this functionality is generally helpful, there might be specific scenarios where you want to prevent this lookup from appearing. For instance, on certain Record Producers, you might want to guide users to select values through other means or simply hide the option for a cleaner interface.

Hiding the Reference Lookup Icon: Leveraging CSS

The most straightforward and recommended approach to hide the reference lookup icon without resorting to complex client-side scripting or DOM manipulation is by using Cascading Style Sheets (CSS). You can apply CSS rules at different levels within your Service Portal to achieve the desired outcome.

Here are the common methods and CSS snippets you can use:

1. Hiding the Icon Globally (Across the Entire Portal):

If you want to hide the reference lookup icon for all reference fields throughout your entire Service Portal, you can add the following CSS rule to your Portal's Theme:

CSS

.add-on > button.lookup {
  display: none !important;
}

This CSS targets the specific button element responsible for displaying the lookup icon and sets its display property to none, effectively hiding it. The !important declaration ensures that this style overrides any other conflicting styles.

2. Hiding the Icon Per Page:

To hide the icon only on specific pages within your Service Portal, you can add the same CSS rule to the CSS section of that particular page record. This allows for more granular control over where the icon is hidden.

3. Hiding the Icon Per Widget:

If you need to hide the icon within a specific widget on a page, you can apply the CSS rule to the CSS section of that widget instance. This provides the most targeted approach for hiding the icon in very specific contexts.

4. Hiding the Icon for a Specific Field:

For situations where you need to hide the icon for a particular reference field on a Record Producer (or any other form), you can target that specific field using its unique identifier. To do this:

a. Inspect the Element: In your Service Portal, navigate to the Record Producer and right-click on the reference field for which you want to hide the icon. Select "Inspect Element" (or a similar option in your browser's developer tools).

b. Identify the Field's ID: Look for a unique identifier associated with the field. This might

be a sys_id or a field name within the HTML structure.

c. Apply Specific CSS: Once you have the identifier, you can use it to create a more specific CSS rule. For example, if the field has an ID like sp_formfield_assigned_to, you could use the following SCSS (which compiles to CSS) within your Portal's CSS Variables:

SCSS

$partial-class-list: 'assigned_to'; // Replace 'assigned_to' with your field's identifier

@each $partial-class in $partial-class-list {
  [for="sp_formfield_#{$partial-class}"] + .type-reference {
    .add-on > button.lookup {
      display: none !important;
    }
    .field-has-reference .reference {
      display: block !important; // To maintain field structure
    }
  }
}

Alternatively, you might find a more direct ID to target within the inspected HTML.

Addressing Potential Whitespace Issues:

Sometimes, after hiding the lookup icon, you might notice a small whitespace remaining in its place. To address this, you can add the following CSS rule, which adjusts the display and width of the associated add-on element:

CSS

.field-has-reference .add-on {
  display: table-cell !important;
  width: 0px !important;
}

Important Note on ServiceNow Versions:

While the initial solution using .add-on > button.lookup works for Helsinki and later versions, some users have reported variations in the required CSS for different ServiceNow releases. For instance, in London, the following CSS might be more effective:

CSS

.field-has-reference > .add-on {
  display: none !important;
}

Similarly, for Orlando and Paris, the first snippet (.add-on > button.lookup) has been confirmed to work. It's recommended to test the CSS in your specific ServiceNow environment to ensure the desired outcome.

Conclusion: Fine-Tuning Your Service Portal Interface

Hiding the reference lookup icon in your ServiceNow Service Portal offers a way to tailor the user interface to specific needs and scenarios. By utilizing CSS, you can achieve this customization without resorting to complex scripting. Remember to test your CSS changes thoroughly in a non-production environment before deploying them to your live portal. By carefully applying these techniques, you can create a more intuitive and user-friendly experience within your ServiceNow Service Portal.