How to add update set picker to header (Tokyo)

matthew_magee1
Giga Guru

‎01-12-2023 09:07 AM

I'm struggling to find a global property to show the app/update set picker in the header in Tokyo.

In Quebec, I see it in the header, plain as day.

In Tokyo, we have to click on the globe to see where we are. This is fine, however, I have a hard time as it is trying to make sure I'm in the right update set when making changes especially if I have multiple things going on.

 

There's a Chrome extension we can use but we are self hosted and do  not have access to the SNUtils plug in. We'd also like to see the app/update set picker in ALL web browsers, not just chrome.

 

Any recommendations?

0 Helpfuls
  • 4,061 Views
10 REPLIES 10

Anish Reghu
Kilo Sage
Kilo Sage

‎01-12-2023 10:09 AM

@matthew_magee1 

 

In the Tokyo release of ServiceNow, the app/update set picker is not displayed in the header by default. However, you can still access it by clicking on the globe icon in the top right corner of the screen. This will open the application navigator, where you can switch between different apps and update sets.

If you would like to have the app/update set picker displayed in the header, you can do so by creating a custom UI page using UI Pages or UI Macros. This will enable you to add the app/update set picker to the header of the page.

You can add the app/update set picker to the header by creating a UI Macro and adding the following code:

 

<div class="navbar-header">
  <span class="navbar-brand" onclick="javascript&colon;gs.ui.app_picker.show()">
    <span class="navbar-icon" style="margin-right:5px;"></span>
    <span class="navbar-text">${gs.getProperty('glide.product.name')}</span>
  </span>
  <span class="navbar-brand" onclick="javascript&colon;gs.ui.update_set_picker.show()">
    <span class="navbar-icon" style="margin-right:5px;"></span>
    <span class="navbar-text">${gs.getProperty('glide.update_set.picker.label')}</span>
  </span>
</div>

 

Kindly mark the response as Correct or Helpful.

Cheers,

Anish

0 Helpfuls

matthew_magee1
Giga Guru

‎01-12-2023 10:28 AM

Thanks! This sounds promising.

I created the UI Macro, as seen in the screenshot below, but I still don't see the pickers in the header:

 

matthew_magee1_0-1673548078762.png

 

Am I missing a step?

0 Helpfuls

Anish Reghu
Kilo Sage
Kilo Sage
In response to matthew_magee1

‎01-12-2023 08:59 PM

@matthew_magee1 - no the script looks good.

 

Further on, ensure the following things:

  • Make sure that you have the appropriate permissions to view the update set picker
  • Check that the update set picker is enabled in the system properties
  • Make sure that the code is being executed on the correct page, and that the page is being loaded correctly
  • Ensure that you have proper styling in your CSS for the update set picker to appear correctly

It is also recommended to check the browser's developer console for any error messages or warnings that might give more insights about the problem.


Kindly mark the response as Correct or Helpful.

Cheers,

Anish

0 Helpfuls

matthew_magee1
Giga Guru
In response to Anish Reghu

‎01-13-2023 05:27 AM

Hey Anish,

Thank you for the follow up.

In response to you recommendations:

  • Make sure that you have the appropriate permissions to view the update set picker
    Yes, I am admin so that should allow me to see the update set...I would hope
  • Check that the update set picker is enabled in the system properties
    Which system property is this?
  • Make sure that the code is being executed on the correct page, and that the page is being loaded correctly
    How is this accomplished?
  • Ensure that you have proper styling in your CSS for the update set picker to appear correctly
    How is this accomplished?