Now that we understand the main components of the user interface, and the basics of customizing them from a functional perspective, let's learn how to customize the look and feel of our instance and some of the major UI components.
In this chapter, we'll learn about:
- UI15 versus UI16
- Customizing the default theme
- Creating custom themes and branding your instance
- Understanding UI-impacting system properties
- Using custom CSS/SCSS properties
- Creating and branding a Service Portal
UI15 and UI16 are versions of the overall user interface, not too dissimilar from what we saw in earlier chapters with List v2 and List v3. UI16 is the latest version, and was introduced with the Geneva release of ServiceNow.
By the time you're reading this book, it's likely that the vast majority of ServiceNow customers will be using UI16 exclusively. For this reason, UI16 is what we're going to focus on in this book. However, since UI15 is not absent, and since not everyone is going to be on the latest version of the UI, let's discuss some differences you'll notice between UI15 and UI16, so that you can still follow along even if you're on Fuji or earlier (as long ago as that was).
In an instance that was setup on Geneva-or-later (meaning that it wasn't upgraded from a previous version, but was a fresh instance from Geneva or later), the UI16 plugin is automatically active. If you want to switch between UI15 and UI16, click on System Settings 
, and you'll see a button that says Switch to UI15 (or Switch to UI16 if you're already in UI15):
Don't see it? Make sure that the appropriate plugin has been enabled. Go to System Definition | Plugins and activate the UI16 plugin. You may want to log out and back in if you don't see the new UI:
By default, after UI16 is activated, all users should see UI16. Administrators will see the Switch to UI15 button, but you'll need to specify some additional roles if you'd like to let other users switch freely between the two main UI versions. To do that, make sure that UI16 is activated, and navigate to the sys_properties table using .list in the Application Navigator like we learned previously. Search for a system property called glide.ui.ui15_switch_roles. It doesn't exist by default, so if you don't see it, just click New at the top-left of the list view, and create it. The Type value should be String. Set the value to a comma-separated list of roles for users that are allowed to switch between UI15 and UI16.
Note
There's a little trick here. Like with many properties that expect a string containing a comma-separated list of values, you can allow all users to switch between UI15 and UI16 freely, by setting the value of this property (glide.ui.ui15_switch_roles) to just a comma. No text or spaces, just a simple comma. The system seems to treat this to mean simply all.
If you're already on UI16, I don't recommend switching back unless you have quite a good reason for doing so, as UI15 won't be supported, and disables some important features.