Introduction to the New Now Experience UI Builder

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

Brad Tilton

4 minute read

One of the primary highlights of the Quebec Release, the Now Experience UI Builder is a web user interface builder that lets you see what the final interface would look like as you build new pages or customize existing pages for web-based workspace and portal experiences.

UI Builder Foundations

Let’s start with some foundational concepts and terms you’ll need to understand in order to work with UI Builder.

Experiences

Creating an experience is the first thing you’ll need when working with a custom UI through UI Builder. You can think of an experience as being similar to a portal in service portal, but in the Now Experience Framework it isn’t limited to portals. An experience will have a single title, app shell, base url path, and application scope, and all of your pages will roll up to an experience. In UI Builder you can have one experience open at a time.

App Shells

An app shell is a wrapper for your experience page, and defines what kind of experience you’re building. There are two primary app shells by default in the Quebec Release, Workspace and Portal. The portal app shell can add a header and footer to your rendered experience pages whereas the workspace app shell would add a header and other components similar to agent workspace.

You will choose which app shell your experience will use when creating the experience, but an experience can only have a single app shell. For example, if your application needs both a portal for your end users and a workspace for your agent, you’ll need to create both a portal experience and a workspace experience.

UI Builder Anatomy

Once you have your experience created, you can open that experience in UI Builder. The different UI Builder elements are explained in detail in the Work with pages docs article and we go over it in the embedded video below, but from the builder you can:

  • Switch experiences
  • Create and configure pages and properties
  • Add components to pages by dragging and dropping
  • Configure and style your components
  • Set up and consume data resources
  • Create client state variables
  • Create client scripts
  • Open the rendered version of your page
  • Change scopes

ui builder anatomy

Introduction to UI Builder

On the 2021-01-22 episode of Live Coding Happy Hour we created an experience, walked through the different UI Builder elements, and then created a couple of pages and linked them together. That video is embedded here below with the timestamped steps we took.

  1. [13:30] Open UI Builder.
  2. [14:20] Create an experience.
  3. [16:23] Open the new Experience in UI Builder.
  4. [18:15] Create an editorial calendar page.
  5. [19:58] Anatomy of UI Builder.
  6. [24:58] Look at the Component Library.
  7. [25:50] Add and configure a Simple List component to the editorial calendar page
  8. [29:00] Open the page in runtime to test
  9. [29:50] Event component panel
  10. [32:00] Create another page with a page property
  11. [33:14] Add a component to the page and map the page property to the component. We ran into some issues here when we used the Form component intially when we should have been using the Form - fields component to show the fields section of a form.
  12. [39:24] Add an event handler to the list component on the editorial calendar page so that when a list item is clicked it links to the form page created earlier.
  13. [42:24] Use a data resource
  14. [43:30] Create a GraphQL Data Broker. This is where you’ll use a GraphQL query that will then be able to consumed by a page.
  15. [46:58] Consume the GraphQL Data Broker as a Data Resouce and pull it into the component.

We ended by playing around with some client state variables, unsuccessfully, but we’ll cover those on a subsequent post.

Future Blogs and Videos

Here on the developer blog our plan is to release some Now Experience related content every Wednesday through at least the middle of March. These will be varying length youtube videos and blog posts covering the following topics:

  • Pages and Variants
  • Branding and Theming
  • Data Resouces
  • Client Scripts and Client State Variables
  • Event Binding
  • Configuring Search
  • Headers, footers, login, 404 pages, and more!
  • Using Custom Components
  • Working with modals
Comments