Working with UI16 Banner Images

[dylan_lindgren]

With release of Geneva came a new interface. We sometimes refer to this interface internally at ServiceNow as Concourse, however you may know it better as UI16. Concourse makes use of modern web technologies to make ServiceNow look better, and be more useable than ever! At the time of writing, UI16 is the default interface for the Geneva, Helsinki, and Istanbul releases.

One of the many changes in the new interface is the way that banner images are retrieved in the code, and once retrieved, how they are placed in the header. Let's talk about how this works, and some tips which will make working with UI16 banner images seem like a walk in the park!

Banner images in UI15 vs. Banner images in UI16

The UI16 banner image is configured in the same way that UI15 was - via system properties, and values in the user's Company records. However, by default the UI15 header has a light background, and the UI16 header has a dark background. This means we can't use the same logo for these interfaces as it won't look right. This has lead to the addition of a new field on the Company record, as well as a new system property for storing a logo which will look good on a dark background. I've highlighted the old and new settings in the tables below:

Company [core_company] field	Description
banner_image	UI15 banner image
banner_image_light (NEW)	UI16 banner image

System Property	Description
glide.banner.image.title	Banner mouse-over text
glide.banner.image.url_target	Target frame used when clicking the banner image
glide.banner.image.url	URL used when clicking the banner image
glide.product.description	Page header caption
glide.product.image	UI15 banner image (fallback)
glide.product.image.light (NEW)	UI16 banner image (fallback)

All of the above are used to build the header, which makes use of the out of box MyCompany script include to retrieve the values. When the UI16 header loads, it will check the values defined in the banner_image_light field of the current user's Company record. If it's not set, and there's no parent company, then the fallback banner image defined in the glide.product.image.light system property will be used. If the user's company has a parent, then the banner_image_light field will be checked on that. This process of checking the parent companies will continue for a maximum of 10 parent companies, and if it's not defined on any of them then again it will fall back to image defined in the glide.product.image.light system property.

UI16 banner image sizing

When UI16 was initially released the maximum height of a banner image was 20px. After some user feedback this was increased to 32px. The maximum height can almost never be reached due to the way the image is placed on the page. This will be improved in a future release, at which point you can use these measurements:

• The maximum width of a banner image will be 230px.
• The maximum height of a banner image will be 32px.

This is an aspect ratio of 115:16. It would be best to design your logo with this aspect ratio in mind.

It's not an official workaround, but I've found that defining a global UI Script with the below value in the script field will mean that the banner image can hit the maximum height of 32px most of the time.

var bannerImage = top.document.getElementById('mainBannerImage16');

if (bannerImage != null) {

  bannerImage.style.height = "32px";

}

Make sure that if you decide to use something like the above, that you fully test it, and that you remove it once you upgrade to a release which contains a fix for PRB709492.

Viewing your banner images on Retina Displays

The above maximum width and height is true when dealing with regular displays, but what about high pixel density displays like the Retina displays found in most Apple computers and iOS devices?

Retina displays have a pixel density 4 times that of a regular display. This seems like a simple thing to implement, but in reality it actually brings up a lot of issues, especially with the parts of the page which are bitmap-based (e.g. images). If you have a screen which has 4 times the pixel density, there are two things that may happen as a result.

1. Images on a web page will be very small on the screen. This will happen if you just display the images pixel-for-pixel on the screen.
2. Alternatively, they will be the same size as they were, but will be blurry (as they are "scaled-up") and won't make use of the benefits of a Retina display.

Retina displays work around the above two issues so that if you were to specify an image to be 10px high and 10px tall, on a regular display it will show as exactly that, however on a Retina display it will actually be 20px high and 20px tall.

To show how this impacts the UI16 banner image, I took a photo of each of my screens and zoomed in on the "now" part of the ServiceNow logo:

You can really see the difference here between the amount of pixels used to display images on a Retina display, and that are used on a non-Retina display. Due to the way that web page measurements and images scale on Retina displays, the maximum size of the banner image on a Retina display are:

• The maximum width of a banner image is 460px.
• The maximum height of a banner image is 64px.

These measurements are double that of a non-Retina display. Most importantly, it maintains the same aspect ratio of 115:16. This means that the image will appear the same size to users regardless of whether they're using a Retina display or not.

3 tips to banner image sizing in UI16

We can take this information and create a few simple points to keep in mind when setting your UI16 banner image:

• Keep the aspect ratio of your banner image to 115:16 to ensure you use the entire space available to you
• Ensure your banner image is designed for Retina displays. If it's viewed on a non-Retina display, it will be scaled down and will not lose quality.
• Consider implementing my unofficial workaround, ensuring you remove the workaround once you upgrade to a release with the fix included.

Feel free to contact me on Twitter with my handle @dylanlindgren or post reply in the comments below.

I repeat, if you use my workaround, please remove it once upgraded or it can interfere with the potential fix.