App Engine Studio

App Engine Studio (AES) is a guided, low-code tool for developing rich web applications to store
information, automate business processes, and solve business problems. Users have the ability
to build applications and application components from scratch or customize a template to fit
their business needs. For the duration of this course, we will focus on AES.

1
ServiceNow encourages creators of all skill levels to utilize App Engine Studio to quickly
and easily start building applications.

Within AES, the building blocks of your application are organized based on the ServiceNow

technology stack. They are Data, Experience, Logic and automation, and Security.

2
3
App Development Lifecycle in AES
Application development should begin in a development instance, and when complete, a
System Administrator will publish the application to a test instance for thorough testing. Any
defects found are fixed in the development instance and pushed to the test instance for
additional testing. When the application is ready, it can then be published to a production
instance. Development should never be done directly on the production instance.

Graphic to depict the application development lifecycle. Developers start development in the development instance and then admins
publish to a test instance. Once development and testing are complete, the application is published to a production instance.

Install and Configure AES

App Engine Studio (AES) requires a license and can be installed from the ServiceNow Store.
AES is a product that contains numerous tools and applications within it, such as Table Builder,
Flow Designer and Mobile App Builder. If you install the basic AES application and not the full
AES product, you won't get its full suite of features and tools.

4
AES Guided Setup
Once App Engine has been installed, you can configure it by navigating to All > App Engine >
Configuration > Guided Setup within the All menu on the Unified Navigation header bar.

The guided setup will walk you through connecting spokes in AES to integrate seamlessly with
third-party services, as well as have you review access settings for Flow Designer and Service
Catalog. It will also assist you in creating a schedule for instance health scans, will walk you
through setting up your AES admin group, and granting AES access to current developers and
other users.

Implementing AES
The following process is recommended when implementing AES.

Step 1:
In a development instance

5
 ● Install AES
● Install the Pipelines and Deployment app
● Complete the AES guided setup

Step 2:
In the production instance
● Complete the Application Intake guided setup
● Complete the Pipelines and Deployment guided setup

Step 3:
In a development instance
● Complete the first non-production task of the Pipelines and Deployments guided setup

Step 4:

In the test instance

● Install the Pipelines and Deployments app

● Complete both non-production tasks of the Pipelines and Deployments guided setup

Step 5:

In all the other non-production instances in your pipeline

● Install the Pipelines and Deployments app

● Complete the first non-prod tasks of the Pipelines and Deployments guided setup

6
 Image to depict AES implementation process in the development instance, test instance, non-prob instance in the pipeline, and

production instance.

Installing and Configuring related Applications

1. Application Intake:
The Application Intake app helps admins approve and track intake requests that users
submit. Once you've set this up, any intake request that you approve will automatically
provision the user to the specified development instance so that they can build apps
using AES.

Application Intake Guided Setup

● Configure the Application Intake app by navigating to All > App Engine >
Application Intake > Guided Setup within the All menu on the Unified
Navigation header bar.
● The guided setup will walk you through activating a catalog item for developers to
use to submit their app ideas, setting up the App Engine Admins group and
activating user provisioning. It will also guide you through creating environment
records for each development instance that developers will be provisioned to.

2. Pipelines and Deployments

7
 The Pipelines and Deployment app allows admins to automate the propagation and
installation of your application from one instance to another (for example, from dev to
test to prod). When a developer submits their application in AES, this creates a
deployment request record. These records allow an admin to easily track, review, test
and deploy AES apps through to test and production.

Pipelines and Deployments Guided Setup

● Configure the Pipelines and Deployment app in your production instance by
navigating to All > App Engine > Pipelines and Deployments > Guided Setup
within the All menu on the Unified Navigation header bar.
● The guided setup will walk you through setting up and configuring each instance
in your pipeline by adding their URLs and the credentials used to access each
one. You will designate your production instance as the controller instance, the
environment where you will manage all deployment requests.
● The setup also guides you through setting up pipelines, by specifying the
instances the pipeline includes and in what order applications should be
deployed to each instance in that pipeline.

3. Making it Real
The App Engine Management Center (AEMC) is a workspace experience that enables
admins to easily visualize and manage end-to-end development and production
deployments by bringing all App Engine Studio requests into a single location. It also
provides visibility into each pipeline you have configured.
The main pages available in the workspace are:
● Home tab (shown below): shows a high-level view of all intake, collaboration and
deployment request types in one place. It can be accessed using the home icon
in the side menu.
● List tab: view the full list of each request type, using the list icon.
● Pipelines tab: displays a high-level view of the number of open deployment
requests in each instance and within each pipeline. It can be accessed using the
last icon in the side menu.

App Engine Management Center Guided Setup

Configure AEMC by navigating to All > App Engine > Administration > Guided Setup
within the All menu on the Unified Navigation header bar.

8
Table Creation and Data Options
Table creation options
When utilizing App Engine Studio, you can create a data table for your application in one of
three ways.

1. Import a Spreadsheet
Use an external spreadsheet formatted with horizontal columns and a header row, to
quickly create a new table. Spreadsheets must be saved as an .xlsx file type.

2. Create a blank table

You can create a new custom table from scratch and add the fields you need or extend
from an existing table.

Extending a base table incorporates all the fields of the original table, creates system
fields for the new table, and allows for the addition of new fields. The original table must
be marked as extensible, in order to extend it.
Additionally, when extending a table you can then report on all connected tables. For
example, if you run a report on the Task table, anything that is inherited from the Task
table will show up in that report.
3. Create a data integration

9
 This feature enables developers to configure, execute, and schedule data imports from
Excel files.

Use a spreadsheet to create a table

Are you ready to transform your spreadsheets into tables? Think of all the advantages gained
by using a ServiceNow table to store your data such as:

● Giving your data the freedom to impact the enterprise beyond your desktop
● Incorporating existing company data, processes, and system integrations seamlessly

ServiceNow stores your rows of application data as records in a table. In fact, everything stored
within ServiceNow is a record in a table. Even the definitions of how your ServiceNow tables,
forms, and process flows appear and operate are stored as records in a table.

Applications can use multiple types of tables such as:

● Base tables: contain the primary application records

● Reference tables: are used for lookups

When you create your table in ServiceNow, existing ServiceNow tables can provide the
allowable reference lookup values for your fields. For example, if your table has a Department
field, you can present the user with a list of allowable department values from the ServiceNow
Department table. No need to cross-check values in a spreadsheet. The accuracy of your data
is ensured.

10
Assign existing ServiceNow field types to table fields and automatically gain their associated
user interface behavior like formatting and valid value prompts. Below are a few examples of
some common field types and how they look on a form. Select the info icon on each label to
learn more about the type.

11
Lab Exercise

Create a new Application

Scenario and Objectives

The objective of this lab is to create the application framework that will be used throughout all
labs in this course. To get the Safety application started, you will use the ServiceNow App
Engine Studio to guide you through creating an application.

1. Log into the lab instance you received when you enrolled in
this course.
2. In the main ServiceNow browser window, select the Unified
Navigation All menu from the header bar, then enter engine
in the filter.
3. Select the App Engine > App Engine Studio module.
4. Select the Get Started button on the Welcome to App Engine Studio dialog box.

12
5. Select the Create app button at the top right-hand side of the App Engine Studio
homepage to launch the App Engine Studio guided setup.

6. Fill in the application details:

Name: Safety
Description: This application will allow users to log and track Safety Issues.
Drag app logo or browse to upload: use the safety_logo.png file you downloaded in the
previous Download activity resource files lesson.

13
7. Select Continue.
8. Awesome! You have already configured the Safety application's basic info. Now it is time
to add roles to the app. For this Safety app, the default admin and default user roles will
suffice.

9. Select Continue.

14
 10. Select Go to app dashboard.
11. Notice the Add data guidance pop-up.

You have already created an application framework with the necessary roles - all without
needing to use code! Next, we will learn about storing data within the application.

A. Create a Table with a Spreadsheet

Scenario and Objectives

As you are in charge of ensuring all safety issues are received, triaged and resolved, you have
been using a spreadsheet to keep track of them as they are emailed to your team. You now
want to add every current issue in your spreadsheet to the new Safety application, so they can
be worked on by your team. The application will allow status visibility and interaction between
your team and those who log issues.

In this lab, your objective will be to import legacy data from the Safety Issues Excel spreadsheet
provided, into the Issues table using the ServiceNow App Engine Studio functionality of creating
a table by uploading a spreadsheet.

1. Ensure you are in the App Home for the Safety App as shown below.

15
2. Data is the starting point for any app, so let's start by adding a table. Select either +Add
beside the Data label or + Add a table or upload a spreadsheet in the outlined box
below.

3. For the purposes of this lab, we will upload a spreadsheet to create a table. Select
Import a spreadsheet, and then select Continue.

16
4. Drag and drop or browse to upload spreadsheet: use the [Link] file you
downloaded in the previous Download activity resource files lesson.

5. Select/check the Import spreadsheet data checkbox in order to transfer the

spreadsheet data into the new table.

6. Select Continue.

7. Since we are creating a new table from a spreadsheet, select A new table, and then
select Create new table. Select Continue.

8. Now you are presented with the data that was pulled over from the spreadsheet. Open
the [Link] on your desktop or refer to the image below to confirm all 8 of
the column headings in the spreadsheet transferred over correctly. The column headings
are listed as field labels.

17
9. After you confirm the column headings transferred over correctly, compare the field data
types that populated with the field data types listed below. Notice that all the data types
transferred over as String data types besides the Due date field.

Since you have been consulting with the the IT organization of Cloud Dimensions, you
have a list of the field requirements shown below. In the next steps, you will adjust the
field types to those provided by IT.

Name Data Type

Opened by Reference to User (sys_user)

Location Reference to Location (cmn_location)

State Choice

Short description String

Due Date Date

Category Choice

Priority Choice

Assigned to Reference to User (sys_user)

18
10. Change the Opened by field Data type from String to Reference:

● Locate the Opened by field.

● Select the Type field drop-down box to change the field type from String to
Reference.
○ Note: When Reference is selected from the Type drop-down, the
Reference table field drop-down opens next to it.
● Set the Reference table field to User [sys_user]. There are many user tables so
you will need to search for it in the dropdown list.

11. Repeat the previous steps for the following Reference fields:

19
 Assigned to Location

Column Label: Assigned to Location

Column Name: Assigned to (auto_generated) Location (auto_generated)

Type: Reference Reference

Reference: User (sys_user) Location (cmn_location)

12. Next, change the State, Category, and Priority field Type from String to Choice.

Note: When Choice is selected from the Type drop-down, the Choice type field drop-

down opens next to it. For the purposes of this lab, we will leave the Choice type field as

Dropdown with None.

13. Once the data types are set correctly, select Continue.

20
14. Now you will be asked to specify the table properties:

Table label: Issues

Table name: auto-populated, leave as is.

Make extensible: unchecked

Auto-number: checked

Prefix: SAFT

Starting Number: 1000

Number of digits: 7

21
15. Select Continue.

16. Next, you will need to add permissions to the table for the roles you've already created in
your app.
admin: Select/check the All checkbox
user: Select/check the Create, Read and Write checkboxes

22
17. Select Continue.
18. Your table is ready! Select Edit table.

B. Edit field types in Table Builder

1. When editing a table, you are redirected to Table Builder! Scroll through the Welcome to
Table Builder dialog box for a brief overview by selecting the Next button. Once you
reach the end of the introduction, select Get started.

23
2. Examine the table fields. Notice the 6 default fields that were automatically added to our
table by the system (Created by, Updated by, etc.), as well as the 8 fields imported from
the spreadsheet.

3. Before we begin configuring the fields, let's make the Number field the primary record
identity. Toggle the Display value ON.

4. Next, confirm the fields with the data type Choice have the choices and values that are

needed. Let's start with the the Category field (image with steps included below):

a) Locate the Category field.

24
 b) Click in the Type field to view the field's Choice Type and Choices. (Note:
This step is not visible in the image below)
c) Leave the Choice type value as Dropdown with --None--.
d) Confirm the three Choices populated from the spreadsheet: big,
medium, and small.
e) Configure the field labels to be uppercase:
Label: Value:
Big big
Medium medium
Small small
f) Select Done to update the row and return to Table Builder.

5. Repeat the previous steps to update the Labels for both the Priority and State Choice
fields. Order them as shown below, using the small up and down arrows on the left side
of each Label. This dictates how they are displayed in a dropdown list.

25
6. Now that you are done configuring the fields, select Save in the top-right of Table Builder
to save the configurations.

7. You have built your first table with a spreadsheet and configured fields using Table
Builder. Select the X on the Issues Table tab to close Table Builder.

26
8. Within the App Home tab, notice the Issues table is specified under the Data section.
Select PREVIEW to view the list of Issues records that were imported from the
spreadsheet in a new browser tab.

9. Navigate back to the App Home within AES.

10. Within the Experience section, notice a Default view was automatically created for the
Issues table. You will view and customize this view in the next activity.

27
11. Within the Security section, select one of the roles to view its permissions. You will need
to elevate your role to security_admin if you want to edit the permissions.

28
Update Table Fields and Form
Scenario and Objectives
In this lab, your objective will be to add and configure fields within the Issues table using Table
Builder. You will also edit the form layout of an Issue record using the form designer available
within App Engine Studio.

A. Configure fields

1. Ensure you are in the App Home tab for the Safety App as shown below. Within the
Issues table row, select the Additional action button (three dots) and choose Edit.

2. To begin, make sure the Number field is the primary record identity. Toggle its Display
value to ON.

3. Select the gear icon next to the left of the Number Column label. Within the dialog box,
check the Read only checkbox to make this field always read-only.

29
4. Select Save in the top-right of Table Builder to save your work (see image above), then
X to close the dialog box.

5. When a new Issues record is created, we want to ensure the State field has a Default
value of Open. To configure this, do the following:
a. Select the gear icon to the left of the State field
b. Within the dialog box on the right, expand the Default value section
c. Type open (the Open choice value) into the Default value text box

30
6. Select Save in the top-right of Table Builder to save your work.

7. When a new Issue record is created, we want to ensure the Opened by field has a
default value of the user creating the record. To configure this, do the following:
a. Select the gear icon to the right of the Opened by field
b. Expand the Default value section
c. Toggle Use dynamic default value to ON
d. Select Me as the Dynamic default value

8. Select Save in the top-right of Table Builder to save your work.

9. Test to ensure the default values are being populated correctly. Select the Preview
button, this opens a new tab within App Engine Studio that displays a list of the Issues
records.

10. Within the Issues list view, select New.

31
[Link] the new record, ensure the State field has a value of Open and Opened by is
System Administrator.

Note: The field order on the form may look different for you.

12. Close the Preview - Issues tab and navigate back to the Data Table And Forms tab.

13. The Issues record needs a journal field to capture work progress and details. To begin,
select one of the two +Add new field links.

14. A new row in the Table fields list is created. Give the field the following values:
a. Column label: Notes
b. Type: Journal

15. Select Save in the top-right of Table Builder to save your work.

32
B. Configure the form layout

1. Within Table Builder, select the Additional actions button (3 dots) and choose Form
designer. This will open the form designer in a new tab within App Engine Studio.

2. Select the + button on the Issues form section to create a new section below it.

3. Change the section layout by choosing 1 Column from the layout dropdown on the right.

4. Give the new section a label of Details by selecting the New Section text and overwriting
it.

5. Select the dots on the left side of the Short description field (see above) and drag the
field from the first section, into the top spot within the Details section.

6. Select the dots on the left side of the Notes field (see above) from the list of fields on the
left, and drag the field into the new section underneath the Short description.

7. Rearrange the fields in the first section by dragging them around to match the
screenshot below.

33
8. Select Save within the Form Designer and close the tab by selecting the x.

9. Back in the Table Builder, select the Preview button again to view the list of Issue
records. Select any Issue record to view its record form.

10. Enter some text into the Notes field, right-click on the form header, and select Save to
remain on the form. Ensure everything works and looks as expected.
The text you entered into the Notes text box should now be displayed below the text box
(see below). If you do not see your text, check the Type value specified for your Notes
field in Table Builder and ensure its set to Journal. If not, update it and select Save.

34
C. Add a UI Policy

1. One last configuration is required. We need to ensure a few fields become read-only
when the State is set to Closed. Go back to the Data Table and Forms tab so you can
add a UI Policy. UI Policies can make a form field visible, read-only, or mandatory
based on a condition.
2. Select Policies and rules in the header, then the +Add new policy link.

3. Configure the UI Policy as follows:

a. Short description: Make fields read-only when Issue is Closed
b. When these conditions are met: State is Closed
4. In the Do the following section, select +Add 5 times. Specify the following fields and
set Read only as true for each one.
a. State
b. Category
c. Priority
d. Location
e. Short description
5. Select Add UI Policy.

35
 6. Select Save.
7. Select Table to go back to the Table fields view.

8. Navigate back to the Preview - Issues tab to test the UI Policy.

9. Drill into any Issues record and set the State to Closed. Ensure the State, Category,
Priority, Location, and Short description fields are now grayed out and read-only.

Create a Record Producer

Scenario and Lab Objectives
The Safety department has received feedback that the Safety Issue form is confusing to
employees who only use it on rare occasions. You have been asked to create a simplified form
that only collects the necessary information to get the safety issue process started.
The objective of this lab is to use a record producer to expose the Safety Issue form in the
Service Catalog with human-readable questions rather than short field labels.

36
A. Create a record producer

1. In the Safety app homepage, select +Add within the Experience section.

2. Select Record producer.

3. The People can create records using a catalog item dialog box appears. Select Begin.

37
4. Update the information needed to generate a record producer.
● Name: Report a Safety Issue
● Short description: See something, report something – be safe!

5. Select Continue.
6. Success! Select Edit record producer.

38
B. Configure the record producer details

1. The Report a Safety Issue record producer opens in Catalog Builder. Notice the Item
name and Short description are populated with the value you entered in the previous
step.
2. Scroll down to the Item details section and select Attach File.

3. Browse to upload the safety_logo.png file you downloaded in the previous Download
Activity Resource Files lesson.
4. In the Item details Description field, enter Report a big, medium, or small safety
issue.

39
5. Select Save in the upper right-hand side of the screen.

C. Configure the record producer destination

1. Select Destination on the left pane or select Continue to Destination on the bottom
right.

2. Set the destination table for the records submitted using the Report a Safety Issue
record producer. Select the Record submission table field and give it a value of Issues
table.

40
3. Select Save.

D. Configure the record producer location

1. Continue to Location. Select Location on the left pane.

2. Now it is time to set the Catalog and Category where the Report a Safety Issue record
producer will be available to the user (or requester). Starting with the Catalog, select
Browse under Catalogs.

3. Select Service Catalog by moving the field from the Available options column to the
Selected catalogs column.
Note: Recall you can move a field by selecting it in the Available options column,
followed by the add icon (>) – or – you can double-click the field. If you make a
mistake, select the field in the Selected catalogs column, followed by the remove icon
("<"), or simply double-click it to put it back in the Available options column.

41
4. Select Save selections.
5. Next, set the Category where the Report a Safety Issue record producer will be available
to the user. Select Browse under Categories.
6. Select Can We Help You? by moving the field from the Available options column to the
Selected categories column.

7. Select Save selections.

42
 E. Configure catalog item questions

You will refer to the table below later on in this lab.

Details:
Map to a
specific Settings:
Type: Type: field on Details: Details: Details: Details: Include
Questio Question the Table Question Name Mandato none Source:
Field n type subtype table? field label (auto-fills) ry choice Source table
What is
Dropdow the size of
n (fixed this
Category Choice value) Selected Category issue? category Selected Selected
When do
you need
Date/ this
Due date Time Date Selected Due date resolved? due_date Selected
Where did
this issue Location
Record take (cmn_locatio
Location Choice reference Selected Location place? location Selected n)
Please
provide a
brief
Short Short descriptio
descripti descripti n of the short_descr
on Text Muti-line Selected on issue. iption Selected

43
1. It is time to build the record producer questions. Select Questions from the left pane.
2. Create the first question by selecting Insert new question.

3. In the Question form, set the Question type to Choice.

4. Next, set the Question subtype to Dropdown (fixed values).

5. Scroll down to the Details section and select (check) Map to a specific field
6. Use the Table field drop down box and select Category.
7. Set the Question label to What is the size of this issue?
8. Notice the Name variable auto-fills to category.
9. Select (check) Mandatory to make sure the question is answered before the Safety
Issue can be reported.

44
10. Continue to Choices. Select the Choices tab on top of the form.
11. We want to make sure the user (requester) selects one of the three options (Big,
Medium, Small). Select Include none choice.
12. Now, let's add the choices the user can pick from. Select the + Insert button.

13. Add the first choice:

Display name: Big
Value: big (this field value is automatically populated)

14. Select the Insert icon (+).

45
15. Add the second choice:
Display name: Medium
Value: medium (this field value is automatically populated)

16. Select the Insert icon (+).

17. Add the third choice:

Display name: Small
Value: small (this field value is automatically populated)

18. Select the Annotation tab on top of the form to write instructions for the user.

19. Let's add a reminder to call 911 for all safety emergencies. First, select Show
instructions. Next, type the following in the instructions box: If this is a life or death
situation, call 911.

20. Before we insert the question, notice the Question Preview on the right side of the form.
Does the question 'What is the size of this issue?" appear? Are the four choices (--
None--, Big, Medium, Small) available? Select the info icon to the right of the question.
Do the instructions "If this is a life or death situation, call 911" pop up?

46
21. Select Insert Question.

22. From the Catalog Builder window, select Preview to check your work and preview the
record producer in Portal view. The "What is the size of this issue?" question should
have four options to choose from: --None--, Big, Medium, Small.

23. Once you are finished previewing the record producer, close the preview window (X).

47
 24. You have completed the question for the Category field. Repeat the previous steps to
insert the remaining three questions for the Due date, Location, and Short description
fields.

Details:
Map to a
specific Details: Settings:
Type: Type: field on Details: Details: Name Details: Include Source:
Questio Question the Table Questio (auto- Mandato none Source
Field n type subtype table? field n label fills) ry choice table
When do
you need
this
Date/ resolved
Due date Time Date Selected Due date ? due_date Selected
Where
did this
issue Location
Record take (cmn_loc
Location Choice reference Selected Location place? location Selected ation)
Please
provide a
brief
Short Short descriptio
descriptio descriptio n of the short_de
n Text Muti-line Selected n issue. scription Selected

TIP: When configuring the Location field question, you will specify the Source table
(cmn_location) in the Additional details section as shown in the screenshot below.

48
25. Once you have completed and inserted all four questions, select Preview once again.

26. The Report a Safety Issue record producer should look similar to this (in Portal view):

27. Once you are finished previewing the record producer, close the preview window (X).

49
F. Configure the record producer settings

1. Continue to Settings. Select Settings on the left pane.

2. Select (check) Hide 'Add to wishlist' button.

3. Select Save.

NOTE: The Access step will not be configured in this activity. It is recommended
that you work with your system admin for all things pertaining to security (including
roles and access).

G. Review and submit the record producer

1. Review the Report a Safety Issue record producer. Select Review and Submit on the
left pane.
2. Double check to ensure the Details, Destination, Location, Questions, and Settings are
all correct. Once everything looks as expected, select Submit.

50
3. Success! Select Return to my application to return to the Safety app home page.

51
 H. Test the record producer

The Report a Safety Issue record producer is now available for testing. To do so, you will
navigate to the Service Catalog via the main ServiceNow UI and try it out. However, in the next
activity, you will be tasked with adding this record producer to a new portal you will create within
App Engine Studio.

1. Navigate back to the main ServiceNow browser.

2. Select the All menu and enter service catalog in the filter.
3. Select the Self-Service > Service Catalog module.

4. On the Service Catalog landing page, select the Can We Help You? Category.

5. Within the Can We Help You? items list, select the Report a Safety Issue item.

52
6. Fill out the form and select Submit.

7. You are directed to the new Issues record that was created by the record producer.
Ensure it was populated with the values specified in the record producer form.

53
 8. Navigate back to the Safety app homepage in App Engine Studio.

Create a Portal Experience

Scenario and Objectives

The Safety department would like to create a simple portal that users can access to quickly log
Safety Issues.
The objective of this lab is to create a Safety portal experience using App Engine Studio. In this
portal, you will include an image, a button that will open the Report a Safety Issue record
producer when clicked, and a list of the Issue records the logged in user created.

A. Create a portal

1. In the Safety app homepage, select +Add within the Experience section.

54
2. Select Portal.

55
3. Fill in the Portal details:
Name: Safety Issues Portal
Description: Portal to log Safety Issues
URL: safety-issues-portal (auto-populates)
Roles: leave default values (x_snc_safety.admin and x_snc_safety.user)

4. Select Continue.
5. Success! Select Edit to begin configuring the portal.

56
 B. Create a portal page in UI Builder
When you edit a portal or workspace experience within App Engine Studio, it will open UI
Builder in a new tab within AES to configure it.

It is also important to note that when you create a portal or workspace experience from within
AES, it will be created with a number of starter pages.

1. We could use the existing Landing Page as the home portal page, but we'll create a
new, more simplified page to use. Select the Create new page (+) button next to Pages
and variants.

2. Select Create a new page.

3. There are a few templates you can select as a starting point, but we will build one from
scratch. Select Create from scratch instead.

57
4. Name the page Safety Home and select Continue.

5. Select Looks good and then Create.

C. Configure a portal page

1. The dialog message "The page Safety Home has been created successfully and is
available for use" appears. Select Open in editor.
2. Select the + icon in the canvas, then search for and select the Container component.

58
3. The Content tree on the left-hand side provides a hierarchical view of the containers
and components specified for a page.

Within the Content tree, find the new Container component named Container 1. Select
+Add component underneath it, then search for the Image component and select it, to
include it within this new container.

4. Within the Content tree, ensure the Image 1 component is selected. In the Configuration
panel on the right side, select None to configure this component manually instead of
using a preset configuration.

5. Within the Config tab inside the Configuration panel, update the Image source property
to /safety_banner.png.

59
 Note: This image is already stored in the Images table within your instance. This can be
accessed by navigating to System UI > Images within the All menu on the Unified
Navigation header.

6. Within the Content tree, select the Container 1 container. Select the Configure menu
on the very right (3 dots) and choose Add after.

7. Search for and select the Container component. This will add a second container
component beneath Container 1.

60
8. Within the Content tree, find the new container component named Container 2. Select
+Add component underneath it, then search for and select the Button component to
add it to this second container.

9. Within the Content tree, select the new Button 1 component. In the Configuration panel
and the Config tab, update the following properties.
● Label: Create Safety Issue
● Icon: Triangle Exclamation Fill

61
10. Under the Styles tab within the Configuration panel, select the Padding link and set it to
Large (L).

11. Select Save in the upper right hand corner to save your work.
12. Next we are going to configure the button to open the record producer we created in the
previous activity when it is clicked. But first we need to grab the sys_id of the record
producer record.
In the main ServiceNow browser, navigate to Service Catalog > Record Producers
within the All menu on the Unified Navigation header.
13. Find the Report a Safety Issue record in the list view, right-click next to the record
producer name, and select Copy sys_id from the context menu. This copies it to your
clipboard.

62
14. Navigate back to UI Builder and ensure Button 1 is still selected within the Content tree.
Select the Events tab within the Configuration panel.
15. Under the Button clicked event, select +Add event handler and choose Link to
Destination.
16. Select the Select destination button to specify where a user should be redirected when
they click on the button.

17. Expand the list of Pages and select the baseline Catalog Item Page. Paste the sys_id
of the Report a Safety Issue record producer record we copied into the sysId property.
This will ensure users are redirected to the Catalog Item page with the Report a Safety
Issue record producer being displayed.
18. Select OK.

19. Select Add to add the event handler to the Button 1 component.
20. Select Save in the upper right hand corner to save your work.
21. Within the Content tree, select the Container 2 container.
22. Select the Configure menu on the right (3 dots). Choose Add after, then search for and
select the Container component.

63
23. Within the Content tree, find the new container component named Container 3. Select
+Add component to add a List - Simple component within this new container.

24. Within the Content tree, ensure the List - Simple 1 component is selected. In the
Configuration panel and the Config tab, update the following properties.
○ Table: Issues
○ Title: My Safety Issues

64
25. Select Edit fixed filter to configure which records will display within the Issue list.

26. Specify the filter as follows:

○ State is not Closed and Opened by is (dynamic) Me

27. Select Apply.

28. You will also need to specify which Columns to display in the list and in what order. One
at a time, select +Add and choose one of the columns listed below, then select OK.
○ Number
○ Short description
○ Location
○ State
○ Category
○ Due date
○ Assigned to

29. The following properties also need to be updated within the Config panel as shown
above.
○ Max rows: 20
○ Max columns: 7

65
 30. Select Save in the upper right hand corner to save your work.
31. Select Open URL path from the Preview dropdown to view the live portal.

32. Select the Create Safety Issue button to test out the record producer.
33. The Report a Safety Issue record producer should display. Fill out the form and select
Submit.

34. Notice that neither button on the Submitted! dialog box works as expected.
● Select the View request button, you will encounter "Component is not
configured" messages on the page. We will hide this button.
● Select the Return to home button, you will be taken to the landing page rather
than the safety_home page. We will update this redirection.
We will fix this in the next section.

66
D. Configure the Order success page

1. Close the portal browser tab and return to the UI Builder tab within App Engine Studio.
Using the Safety Home (Default) dropdown, select the Order success page. This is the
page that displays the Submitted! dialog box.

TIP: It would be best practice to either copy this page or create a new page variant for
this page before making updates to it. But to keep things simple for the purposes of this
lab, you will just update the Order success page directly.

2. Select the Editor tab. Within the Content tree, select the Confirmation message 1
component.

3. Within the Config panel, remove the text "View request" from the Secondary action
label property. This hides the display of the button on the dialog box.

4. Next select the Client Scripts (<>) icon on the lower-left side menu.

5. Select the Home redirection script and update line 8 of the code to refer to "safety-
home" instead of "landing".

67
6. Select Save in the upper right hand corner to save your work.

7. Using the Order success (Order success Default) dropdown, select the Safety Home
page again.

8. Select the Editor tab and Open URL path to view the live portal.

9. Select Create Safety Issue again to submit another record and ensure the following:
a. Only the Return to home button is available on the the Submitted! dialog box.
b. When you select the button, you are redirected to the Safety home page.
c. Select the refresh icon (upper right side of the list) and verify that you can see
your new Issue record in the list.

68
E. Configure the portal header

1. Notice the portal has a logo at the top. We will change the logo.

2. Within UI Builder, select Safety Issues Portal Experience and choose View
experience settings.

3. To change the logo, scroll to Branding and theming.

4. Notice the default theme specified is Light Theme. Select the Open current theme link
to open the theme record in the standard UI.

5. Select the Legacy: Experience Theme form section tab. Within its UX Theme Assets
embedded list, drill into the now-logo-dark record.

69
6. Select Manage Attachments (1).

● Check the checkbox next to the existing ServiceNow_logo_GG.png attachment

and select Remove.
● Select Choose file and locate the safety_logo.png file you downloaded
previously. You can also drag and drop the new file onto the header of the form
to attach it.
● Update the record.

7. Do a hard refresh on the live portal page. The new logo should be visible.

Note: If you do not see the new logo, it is likely a caching issue. Try opening the portal

page in a new browser to verify.

70
71