You are currently viewing ServiceNow UI Builder Interview Questions 2024

ServiceNow UI Builder Interview Questions 2024

In this article, I am providing day-to-day questions asked by developers in interviews on ServiceNow UI Builder, anywhere on the internet, across various forums. My objective is to provide all such daily activities for ServiceNow UI Builder in one place with easy and sharp answers.

What is an experience in ServiceNow?

  • An experience is a collection of web pages for users to interact with an application.
  • Many web sites use the same basic structure on every page. 
  • For example, every page contains the same footer, the same header, and the same menus. 
  • Experiences can have a shell, or wrapper, for each page in the experience.
  • UI Builder is a What You See Is What You Get (WYSIWYG) web user interface builder.

What are shells in UI Builder?

  • The common page elements in an experience are shells.
  • A shell gives an experience a consistent look and feel as users navigate from page to page. 
  • ServiceNow provides two shells:
    • Portal: Each page in a Portal experience has a shared header and footer.
    • Workspace: Each page in a workspace has a shared header and sidebar. Pages open in tabs in the workspace.
  • Pages for an experience use the same creation process regardless of the shell used for an experience.

What is the URL path in UI Builder?

  • The unique value to append to the experience URL to load the experience
  • The experience URL has the format: instance.service-now.com/x/<company_code>/<URL path>
  • Example: https://dev95794.service-now.com/now/workspace/agent/home

What is a landing path in the UI builder?

  • It is the name of the page to append to the experience URL path when no specific page is specified in the URL.
  • If the experience URL is instance.service-now.com/x/126321/occasions and the landing path value is home, the home page opens when a user opens the experience URL.

What is a page, and how do you design it?

  • A page is a collection of components with which a user interacts when navigating an experience. 
  • Before creating a page, identify the purpose of the page and what content it should contain.
  • Answer the “Five Ws” to gather some basic information to help with the planning of a page.
    • What: What is the purpose of the page? What information do users of the page need to see? What devices will users use to access the page?
    • Who: Who is the audience for the page?
    • When: When should the user see the page? For example, is the page the main page of the site or a page that a user navigates to from another page?
    • Where: Where should information be placed on the page to provide an effective interface?
    • How: How does the page interact with other pages in the experience? How does the page get the data it needs to function?

What is the use of templates in experiences?

  • ServiceNow provides page templates that can be used when creating a page.
  • Review available templates before creating a page. Do any of the templates match the intended purpose of the page?
  •  Do any of the templates include pre-configured content to build a page more quickly?

Does the experience have one page as default?

An experience has no pages by default. The first time an experience opens, click the Create a Page button to create the first page for the experience.

What are page parameters and their types?

  • Page parameters make pages dynamic.
  • Page parameters are passed in the page URL.
  • For example, a page might include a parameter to specify which record to open when the page is rendered.
  • There are two types of parameters:-
    • Required Parameters
      • Required parameters are values passed in the URL that are required for a page to work.
      • For example, if a page shows a record, the page needs to know the table and the SysID for the record. Both values can be passed as required parameters.
      • Required parameters are appended directly to the page URL in the order listed in the Add required parameters dialog. 
      • For example, if the page is instance.service-now.com/x/126321/occasions/record and has two required parameters, table and sysId, the values for the required parameters are appended directly to the path. The result is instance.service-now.com/x/126321/occasions/record/x_126321_spec_occ_occasion/77d51c3b1bf1b01068dd5464604bcbfa.
    • Optional Parameters
      • Optional parameters are parameters that can be passed to a page but are not required for the page to function.
      • Optional parameters are appended in name/value pairs to the page URL after a params sub-directory in the URL path.
      • Adding the optional parameter views with a value of myValue to the required parameter example URL, the resulting URL is: instance.service-now.com/x/126321/occasions/record/x_126321_spec_occ_occasion/77d51c3b1bf1b01068dd5464604bcbfa/params/views/myValue

What are the default sections of UI Builder?

UI Builder has five visible sections by default

  • Icon bar
  • Header
  • Page panel
  • Stage
  • Configuration panel

Difference between Referenced & Copied templates in UI Builder?

  • Referenced templates have limited configuration options, but update when the template is updated
  • Copied templates are completely configurable, but are completely disconnected from the template upon creation

ServiceNow UI Builder vs Service Portal?

The first decision point in deciding whether to use UIB vs SP is whether the audience for your experience is a requester or fulfiller persona. Requesters typically need a service catalog, responsive designs, and public page access, which are all fairly easy in the Service Portal.

If your app does not follow the standard requester/fulfiller model you can use the rest of the chart to determine which tool to use to build your experience. 

CapabilityUI BuilderService Portal
Target AudienceFulfillersRequesters
Portal CapabilityWorkspaces and small, departmental portalsEnterprise portals
ResponsiveNoYes
Pixel Perfect DesignNoYes
Service CatalogVery limited supportFully supported
ATF TestingNoSupported
Public PagesDifficult to set upYes

Are there two versions of UI Builder?

Yes. There is a Legacy UI Builder that was launched in Orlando that works with Agent Workspace and our full-featured UI Builder tool launched in Quebec that works with Configurable Workspaces, Portal Experiences, and custom experiences.

What is UI Builder used for?

UI Builder is a page builder to create and configure pages for workspace, portal, and custom experiences.

 Is UI Builder a paid feature?

UI Builder is a platform feature and is available to all platform customers.

What are the Data Resources in UI Builder?

  • A data resource [sys_ux_data_broker] in UI Builder mediates data between a component and the ServiceNow server.
  • The data resource brings data from the server to the component, and it brings updated data back to the server based on interactions with the component.

Explain the types of data sources used in UI Builder.

Let’s explore the different types of data resources:-

  • GraphQL lets you write and/or use a GraphQL query against a ServiceNow GraphQL API. If you’re building one of these you’ll need to specify the query body, but that’s about it.
  • REST lets you execute a REST request against a ServiceNow REST endpoint. You’ll need to specify an endpoint, query params, and a request body.
  • Scriptlet runs sandboxed, vanilla, client-side JavaScript. It is primarily used for transforming the output from one of the data resources above into something usable by your components. The scriptlet is preferable to a transform because the scriptlet loads and runs faster due to not loading any external APIs.
  • Transform runs any ServiceNow server-side JavaScript. If you already have a library of scripts included for your app you can use this type of data resource to consume that library.
  • Composite data resources are a combination of other data resources chained together. Using a composite instead of being the outputs of one DR to another allows us to optimize the performance. It’s especially useful for GraphQL+Scriptlet combinations.
  • Controllers are new in Tokyo and, when combined with preset-enabled components, can be automatically added to a page when the component is added. For now, this is only usable by ServiceNow’s internal engineering teams.

What is an Event in UI Builder?

An event is an action a user takes or an occurrence that happens on a page. Each component has its events associated with it. Events include:

  • The user clicks a data visualization
  • Page successfully fetches data
  • The user selects a radio button
  • Page loads

What is an event handler in UI Builder?

An event handler is an action performed when an event occurs. By mapping an event handler to an event, you are specifying which action or actions to take when the event occurs. For example:

  • Clicking a data visualization opens a list of records represented in the visualization
  • Fetching data successfully for a list opens an alert that indicates the data fetch was successful
  • Selecting a radio button adjusts the filter for a list on the page
  • Loading a page opens a modal to confirm acceptance of cookies before proceeding

Events for a page or component do nothing until the event is mapped to one or more event handlers.

Leave a Reply