Debug UI customization for a Service Catalog page

Use the UI Page Customization Diagnostics window to perform a health check of a Service Catalog page. This window displays the UI macros applicable for the Service Catalog page and their corresponding states. For issues on a Service Catalog page due to customized UI macros, you can identify the source of broken functionality.

Before you begin

Role required: Administrator (admin) or catalog administrator (catalog_admin).

Procedure

  1. Navigate to Service Catalog > Catalog Administration > Debug UI Customization. The UI Page Customization Diagnostics window is enabled.
  2. Navigate to a Service Catalog page. The UI Page Customization Diagnostics window is displayed at the bottom of the page.
  3. To maximize the UI Page Customization Diagnostics window, click on the window. The following information is displayed:
    • Name of the current Service Catalog page.
    • State of the Service Catalog page.
    • All UI macros applicable for the Service Catalog page.
    • State of each UI macro.
    • Number of occurrences of each UI macro in the Service Catalog page.
    Table 1. Possible states for a UI macro and a Service Catalog page
    State Color indicator Description
    Unchanged Green Created by ServiceNow and one of the following scenarios is applicable:
    • It has never been customized by the customer.
    • It has been customized by the customer and then reverted to the latest ServiceNow upgrade.
    Skipped Red Created by ServiceNow and then customized by the customer, and hence skipped the latest ServiceNow upgrade. The customer should resolve a skipped update after an upgrade.
    Customized Orange Created by ServiceNow, and then customized by the customer after the latest ServiceNow upgrade. The customer can revert a customization to implement the latest ServiceNow upgrade.
    New Blue Created by the customer. The top element of the UI macro should have the following attribute:
    data-sn-macro-sys-id="${jvar_macro_sys_id}"
    Note: The top element can be a div, span, or table.
    Note:
    • When you click the Service Catalog page name or the UI macro name, the corresponding UI page or the macro page is displayed.
    • When you point to a macro in the UI Page Customization Diagnostics window, the corresponding UI elements are displayed with a pink border.
    • The state-based color indication is applicable only for UI macros that have a visible UI.
    Figure 1. UI Page Customization Diagnostics window
    Screenshot for the UI Page Customization Diagnostics window
  4. To display the relevant help content, click . The Help window is displayed.
  5. To minimize the UI Page Customization Diagnostics window, click .
  6. To disable the UI Page Customization Diagnostics window, navigate to Service Catalog > Catalog Administration > Disable UI Customization Debug.