How to Add Widgets to ServiceNow Catalog Variables: A Comprehensive Guide

When upgrading from a traditional CMS portal to ServiceNow's Service Portal, organizations often face the challenge of converting UI Pages and UI Macros to more modern, dynamic widgets. Integrating widgets directly into ServiceNow catalog variables enhances user experience and improves portal usability. However, users frequently encounter issues, such as widgets not appearing as expected. In this guide, we'll clarify the process step-by-step and address common pitfalls.

Understanding the Issue: Widget Field Not Showing

The issue typically arises when users attempt to include a widget within a catalog variable but cannot find the "Widget" field in the variable configuration. This occurs because widgets in ServiceNow are specifically tied to a variable type called "Macro" (in earlier ServiceNow versions) or "Custom" (in later versions).

Step-by-Step Solution: Adding a Widget to a Catalog Variable

Here's the verified, step-by-step approach to successfully embed widgets into your catalog variables in ServiceNow:

Step 1: Create the Service Portal Widget

Before embedding your widget, you must first create it in the Service Portal. Define its functionality clearly, and thoroughly test it independently to ensure it works as expected.

Step 2: Navigate to Your Catalog Item

• Log in to your ServiceNow instance.

• Access the Service Catalog.

• Choose the catalog item to which you want to add the widget.

  
  

Step 3: Add a New Variable

• Scroll to the "Variables" section within your catalog item.

• Click on "New" to create a variable.

  
  

Step 4: Select the Correct Variable Type

• Set the variable type as "Macro" (for older versions) or "Custom" (newer releases).

  
  

Step 5: Associate the Widget

• Navigate to the "Default Value" tab (or "Type Specification" tab in newer releases).

• In the Widget field, select the widget you previously created.

  
  

Step 6: Complete Variable Configuration

• Under the "Question" tab, fill in all required fields, such as "Question" (the label users see) and "Name" (the backend identifier).

• Click "Submit" to save your changes.

  
  

Once completed, the widget should appear seamlessly within the catalog item when viewed via the Service Portal.

Common Challenges and Troubleshooting

Challenge: Widget field not appearing after selecting "Macro" or "Custom."

• Solution: Ensure the "Widget" field is added to the variable form layout:

  • Right-click the form header, select "Configure," then choose "Form Layout" or "Form Design."

  • Add the "Widget" field to the form.

    
    

Challenge: Widget data not accessible in workflows or client scripts.

• Solution: Widgets don't automatically integrate data directly into ServiceNow workflows. To resolve this, utilize hidden catalog variables. Capture input from the widget using AngularJS within the widget's client controller, and store this data in hidden catalog variables for workflow use.

• 
  

Example of Capturing Widget Data:

Include an input in your widget:

<div>
  <input ng-model="userInput">
</div>

In your widget's client controller:

function($scope) {
    $scope.$watch('userInput', function(newValue) {
        $scope.page.g_form.setValue('hiddenVariableName', newValue);
    });
}

Alternative Solutions

If you face limitations due to scoped applications or instance versions, consider the following alternatives:

• Use Multi-row Variable Sets (MRVS): MRVS are ideal for managing multiple input rows efficiently and can be integrated without custom scripting.

• UI Pages as Temporary Solutions: If immediate transition to widgets is problematic, UI Pages can still function temporarily, although widgets provide more modern functionality.

  
  

Conclusion

Integrating widgets into catalog variables enhances user interaction within ServiceNow's Service Portal significantly. By following this structured approach and understanding common pitfalls, you can ensure your Service Portal is dynamic, user-friendly, and functional.

Next Steps

• Verify and test your widget thoroughly after adding it to ensure smooth performance.

• Begin transitioning legacy UI Pages to modern widgets progressively.

• Continuously monitor ServiceNow updates to stay aligned with best practices and newer functionalities.