UI Builder - New in Quebec!

[Brad Tilton]

UI Builder was one of the main highlights of the Quebec release. The Now Experience UI Framework came out in Orlando as a new framework for building custom UIs. Up until now, you basically had to do that in a local dev environment that was very scripting heavy. UI Builder in Quebec enables anyone to build new pages or customize existing pages for workspace and portal experiences using a vast library of ServiceNow design components and/or custom components.

Using UI Builder you can create pages, add components, and connect your components to the back-end data and make them talk to each other, all without doing any scripting. There is a lot of power, but it can be a little intimidating at first. Luckily, we've been writing and producing videos on the developer blog for the past couple of months.

There are a couple of collections of all the resources:

• UI Builder Bytes YouTube Playlist
• UI Builder Bytes Blog Series

Here are all the individual blogs:

• Introduction to the New Now Experience UI Builder - Introduction that goes through experiences, app shells, and the anatomy of UI Builder.
• UI Builder - About Pages: Templates, Parameters, and Variants - Learn about creating page from templates, required and optional page parameters, and page variants.
• UI Builder - Data Resources - Use data resources to fetch data from the server and bind it to components.
• UI Builder - EVAM Data Resources - Use Entity View Action Mapper, or EVAM, to query multiple data sources and show them all as cards in a list or grid view. You can show different card layouts for different sets of data.
• UI Builder - Client state parameters, Client Scripts, and Events - Learn about client state parameters, which are basically page variables, client scripts, and events. Events are how data resources and components communicate with each other on a page.
• UI Builder - Modals - It's really easy to create and use modals in UI Builder. This post shows you how.
• UI Builder - Building from App Engine Studio - The easiest way to create an experience with a theme, logo, login page, etc. is to create a starter portal or workspace experience using App Engine Studio.
• UI Builder - Adding a Custom Component with Events - You can create custom components with events, and then add event handlers to those events in UI Builder, but it takes a little bit of configuring after you deploy the event.
• UI Builder - Theming - You can customize logos, fonts, colors and all sorts of CSS and styles using theming hooks in the UX Theme.

And here are the Live Coding Happy Hour shows we've done:

• Building a Portal with UI Builder in Quebec
• UI Builder Workspace in Quebec
• Theming a UI Builder Portal