UI Builder - Theming

#UI Builder , #UI Builder Bytes , #Quebec , #Now Experience

Brad Tilton

4 minute read

Continuing our UI Builder series, in this post we’ll cover theming and styling. If you’ve worked with UI/UX/Experiences in ServiceNow long enough you’ve probably come across different ways of theming and styling different interfaces. CMS, Service Portal, Mobile, and the platform UI all have their own ways to do theming in terms of changing colors, logos, fonts, etc., and the Now Experience UI Framework is no different, though it is different :).

Themes

Your theme represents the overall look and feel of your organization’s brand. When you create an experience from AES, whether it’s workspace or portal, it creates a custom theme that extendeds the default theme. Since that theme is created specifically for that experience, you can just update that theme rather than copying and creating a new one.

Themes are well documented in the Work with themes page on the docs site, but we’ll spend a little bit of time here.

Theme extensions

The theme records have an extends field where you can specify whether the them you’re working with extends another theme. It is a good practice to create a main theme for your company, complete with primary and secondary colors and other brand elements, then extend that theme in different workspaces or portals where you want to style things a little differently. In your extended theme you can override any CSS custom properties from the base theme.

Theming hooks

Also known as CSS custom properties, theming hooks allow you to apply CSS to elements within the components you’ve added to your page in addition to the components that come along with your app shell like the header or menus. Many of these app shell level theming hooks are documented in the Work with themes docs page.

If you’ve used UI Builder a little bit already you may have noticed that there is a Styles tab in the component configuration panel that lets you apply some CSS to your component. Note that this will let you style the container of the component but can’t reach into the component itself, you’ll need to use the theming hooks for that. Currently, many of the theming hooks are not documented, but we are working on exposing more of those via the component playground on the developer site.

NOTE: One important note is that currently colors must use RGB values rather than hex codes.

Logos and Fonts

You can change the logo, other images, and fonts by using the UX Theme Assets related list on the theme record. In the below video, we add both a custom logo and new font.

See it in action

We did some theming on last week’s Live Coding Happy Hour. We did not get the logo working on the show, but it turns out we just needed to use this in our JSON: "position": "header_logo"

  • 02:49 Introductions
  • 06:17 Topic overview
  • 07:20 Screen share started
  • 08:50 Creating a test page
  • 15:47 Changing the header logo and extending themes
  • 24:33 Changing primary/secondary colors
  • 36:41 Updating the font
  • 42:48 Theming hooks
  • 50:00 Other tips from the experts
  • 55:45 Return from drop out
  • 56:55 Screen sharing stopped and more tips
  • 59:13 Rating of the beers and closing

If you want to create your own test page like we did on the show, you can grab values for the composition and layout model fields on the page record from the ServiceNowDevProgram/theming-test-page repo and then follow the steps I took starting around 8:50 in the video to create your own test page.

More Resources

Make sure to check out the previous posts in this UI Builder series, and stay tuned for more posts.

Have a UI Builder topic you’d like me to hit in a future post? Let me know on Twitter, LinkedIn, or sndevs.com slack (@btilton).

Comments