ServiceNow Product Managers Brad Tilton and Maria Gabriela Ochoa Perez Waechter (aka MGOPW) have a great playlist of YouTube videos that explore UI Builder with live coding happy hour style videos. When I first started watching the series, I realized there were some set up prerequisites that were required in order to be able to follow along. I couldn’t find any details on this, so I’ve deconstructed it for you below.

Important Notes

  • The steps below assume a basic level of ServiceNow platform, App Engine Studio and UI Builder knowledge and navigation.
  • Throughout the steps below, I will suggest values to use in fields based on what I saw in the videos. There may be some discrepancies between my recommendations and the video. Brad originally created his app as “Grocery mgmt” and then later renamed it to U&I Hungry. You will see configuration in the video related to the original name.
  • Your instance will have a unique Application scope prefix; mine is “x_67040_”.

Application

First, we need to create a new Application in ServiceNow to house all the development work! App Engine Studio (AES) is the easiest way to do this.

  1. Navigate to App Engine > App Engine Studio.
  2. Create a new application.
  3. Give your app a name, optional description, and icon on the Basic Info pane.
  4. Leave the default role information (admin and user roles).
  5. After the system creates the app, click “Go to app dashboard”.

Data

Next, we will create a place to store the data for our Application. This data in this app is relatively simple, and we will start with just what’s needed for Episode 1 in the You & I Builder series.

  1. In the Data section, create three blank tables (no extensions needed). Generally, I give the admin all access and users all but Delete. Permissions can be adjusted later if needed.
    • List [x_67040_u_i_hungy_list] Optional: Autonumber.
    • Item [x_67040_u_i_hungy_item]
    • List Item [x_67040_u_i_hungy_list_item]
  2. Add the following fields to their respective tables
Table Label Type Other Details
List Active True/False Default: true
List Shop date Date
List Store Choice Choice type: Dropdown with – None.
Choices: Add 2-3 local grocery stores of your choosing.
List Type Choice Choice type: Dropdown with – None.
Choices: In person, Online
List State Choice Choice type: Dropdown with – None.
Choices: Open, In Progress, Complete, Cancelled
Default: open
Item Active True/False Default: true
Item Name String (40) Display: true
Item Favorite True/False Default: true
List Item List Reference
(List table)
Mandatory: true
User reference qualifier: Simple
Reference qualifier: Active = true
List Item Item Reference
(Item table)
Mandatory: true
User reference qualifier: Simple
Reference qualifier: Active = true
  1. Though not required to follow along with the video, I also set up the following:
    • Forms & List views for each table
    • Business Rule on List to control Active value based on State values.
  2. Add some sample data to your tables.
    • At least 1 active list with a shop date
    • 5-10 grocery items (i.e. milk, bread, eggs, etc.)
    • Add 1-2 of your available items to each list.

Portal Experience

ServiceNow recommends creating UI Builder Workspaces and Portals in App Engines Studio, if you have access. AES will setup several baseline pages for you to edit, rather than having to build everything from scratch in UI Builder.

  1. In the Experience section, create a new Portal experience.
    • Name: U&I Hungy
    • Description: Manage what’s on the next grocery list!
    • URL: ui-hungy
    • Roles: (this should default to admin and user roles)

Data Resource

We also need a Data Resource to provide our Portal pages with contextual data. This is an advanced topic that may require script editing. For more information about Data Resources, see the “Work with Data Resources” section from the UI Builder Quick Start page on the ServiceNow Community.

  1. Open the portal experience that you just created.
  2. Open the Landing Page Default in the Editor (aka UI Builder).
  3. Open the Data pane. This is the cylinder icon in the lower left hand side of the screen.
  4. Click “+ Add” to add a Data Resource, then click “+ New” and select the type of “Transform”
  5. In the new record, use the following values. Save the record and get the sys_id.
    • Name: Get grocery favorites
    • Script: see below, don’t forget to edit the table names on lines 3-5!
Copy to Clipboard
  1. Navigate to the primary browser tab for the instance.
  2. Create an ACL for the Data Broker.
    • Type: ux_data_broker
    • Operation: execute
    • Name: [sys_id of the data broker you just created]
  3. Navigate back to the AES tab, where UI Builder is open.
  4. Click “+ Add” to add a Data Resource; instead of creating new, search for the Data Broker you just created and add it to the page.
  5. Validate that the output matches the structure below. If you are getting an error or the output does not match, validate that the tables and fields match what you used when you set up the application data tables.
Copy to Clipboard

 

That’s it! Now you are ready to follow along! Good luck!

If you see a step that is missing, let me know!

About the Author: Carleen Carter

About the Author: Carleen Carter

ServiceNow developer and architect since 2009, Carleen is self-described as a Serious Script Includer and Low Code Lover. She holds several ServiceNow certifications, including Certified Master Architect. Carleen has a knack for explaining challenging concepts in a relatable and approachable manner. She thrives on enabling customers & colleagues and loves to see their success. She excels at crafting creative solutions to complex problems with an eye on the big picture.