Do these steps before you start the You & I Builder Series videos

Note: This is the second blog in my UI Builder series. If you need to know how to get started with UI Builder, I recommend you read the first blog, UI Builder: Start Here!

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.

Navigate to App Engine > App Engine Studio.
Create a new application.
Give your app a name, optional description, and icon on the Basic Info pane.
- Name: U&I Hungy
- Description: Manage groceries for our family. Allow family members to vote for items to pick up during the next shopping trip.
- Icon: choose an image. Example: Groceries icons created by monkik – Flaticon
Leave the default role information (admin and user roles).
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.

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]
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

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.
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.

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.

Open the portal experience that you just created.
Open the Landing Page Default in the Editor (aka UI Builder).
Open the Data pane. This is the cylinder icon in the lower left hand side of the screen.
Click “+ Add” to add a Data Resource, then click “+ New” and select the type of “Transform”
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

function transform(input) {
    //replace the following three values with the table names from your instance
    var listTable = "x_67040_u_i_hungy_list";
    var itemTable = "x_67040_u_i_hungy_item";
    var listItemTable = "x_67040_u_i_hungy_list_item";

var listID = "";
    var au = new global.ArrayUtil();
    var listItemArray = [];
    var groceryItemData = {};

try {
        //Get the Active list with earliest shopping date
        var list = new GlideRecord(listTable);
        list.addQuery("active", true);
        list.orderBy("shop_date");
        list.query();
        if (list.next()) {
            listID = list.getUniqueValue();

groceryItemData.listID = listID;
            groceryItemData.items = [];
			gs.info(JSON.stringify(groceryItemData));

//get the Items that are already on the list.
            var listItem = new GlideRecord(listItemTable);
            listItem.addQuery("list", listID);
            listItem.query();
            while (listItem.next()) {
                listItemArray.push(listItem.item.sys_id + "");
            }

//query All available items to compare to listItemArray
            var item = new GlideRecord(itemTable);
            item.addQuery("active", true);
            item.orderBy("name");
            item.query();
            while (item.next()) {
                var itemID = item.getUniqueValue();

//check if Item is already on the list
                var onList = au.contains(listItemArray, itemID);

var itemObj = {
                    "name": item.getValue("name"),
                    "id": itemID,
                    "added": onList
                };

groceryItemData.items.push(itemObj);
            }
            gs.info(JSON.stringify(groceryItemData));

return groceryItemData;
        }
    } catch (error) {
        return error;
    }
}

Navigate to the primary browser tab for the instance.
Create an ACL for the Data Broker.
- Type: ux_data_broker
- Operation: execute
- Name: [sys_id of the data broker you just created]
Navigate back to the AES tab, where UI Builder is open.
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.
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!

Published On: August 2nd, 2023|Tags: AES, App Engine Studio, Next Experience, UI, UI Builder|

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.