Structure of Mobile App in ServiceNow

The Mobile App in ServiceNow is not a separate mobile application which you would deploy to an app store and tell users to install on their mobile devices. It can be, but it requires additional fees. 

When builiding the mobile experience, you are actually preparing a configuration for already existing mobile app available on all major app stores. It’s important to understand the difference, because developing a mobile app in ServiceNow does not have to include actual development. 

Development without developing… ?

Yes, you read it correctly. This is called no-code or low-code approach. You basically assign the mobile components to each other. The documentation is pretty extensive with lots of examples and videos. You can also easily view the OOB components and learn how to do recurency or how to configure more complex screens with buttons and sections. 

What you need to start is:

• an idea of what you want to show
• knowledge of the source of the information
• some backend configuration (search engine, theme)
• familiarity with Mobile App Builder and Mobile Card Builder

With that in mind, you can start building your mobile components and connecting them to create a mobile configuration.

Required backend configurations

Search engine

In ServiceNow Mobile App Config, search configuration uses one of the preconfigured Search Applications. You can read about it in the official documentation. In order to set it up, you have to use the backend – the Mobile App builder does not allow you to do everything you have to do. However, you have to setup how the search results will look like.

There are two configurations required to properly setup the search capability on the mobile app config:

1. Configure the search application on the backend
2. Configure the search results look & feel on the mobile app builder

In the mobile app config, search capability is connected with the special screen type, the Launcher screen.

Setup

1. Open the Search Applications module. It is part of AI Search application.
2. Find the one used by mobile app config
3. You can change the search engine, number of displayed results or the search sources. Each source must have matching List item config in the mobile app search config (see below). The match is based on table field on the search source and the list item config.
4. You can select between the old Zing search engine and the new AI Search.

Look & feel

It’s pretty simple as you can do it in the Mobile App Builder.

1. Open the Mobile App Builder, from there load the desired scope
2. From the mobile app config main menu, pick the Screens and select Homepage
3. In the object tree on the left hand side, find the Search config
4. From there, you can easily switch search engine, add/remove the list item configs (there should be one for every search result type). 
5. The result card configurations are stored within the list item configs. 
6. If you want to update the card template or card configuration for one of the search results, open it and change the Card used to display the result.

Theme

Starting from Utah release, you can use the Theme Builder plugin to manage mobile app config theme.

1. Open the Theme Builder module under the Next Experience Framework application
   If you don’t see the module, try accessing it directly with /now/theme-builder/home path in the URL.
2. From the top-left menu, pick Editor
3. Pick a theme and do the necessary edits.
4. Unfortunatelly, even though you can apply the theme in mobile, the Theme Builder does not provide any mobile preview of the controls
5. As of now, you can set the font and the basic colors.

Now that we have the basic config, what’s next?

Now, let’s open the app builder and see what’s inside. First thing to pick is the scope. Let’s select the OOB Now Mobile. Next screen is the homepage of the mobile app config with menu on the left and workarea on the right. This is the recurring setup, so you can get used to it.

You can already see some hierarchy on the menu. Points below provide some explanation and meaning on most popular components and how they are connected with each other. There is a pretty good documentation page with the mobile app structure, but it’s too cluttered for our simple case.

Mobile app configs

This is the basic record for the mobile app. This will be read and processed by the Now Mobile native application on user’s mobile device.

You may have a first question popping up now – OK, if I have multiple ‘Request’ type configurations, which one will be used by the native mobile app? The answer is not that obvious when using Mobile App Builder. To get your answer, you have to open the config in backend view. This list should be visible in your navigator, but if not, the table name is sys_sg_native_client.

You will see your answer immediately on the list of records. There are additional fields, not visible directly in the Mobile App Builder – order and required roles.

By setting desired values for these fields, you can set multiple configurations to be used by different personas.

Screens

Back to the Mobile App Builder, next main menu element is called Screens. It contains a list of screens available for your configuration (not every screen must be used).

Screens are… well, screens. It’s the thing you look at when using native mobile app. There are different types of screens, each one has a different role. In our case, we only use the Launcher screen, List screen and Record screen.

Cards & Icons

Next menu item is visual representation of records within the mobile configuration. And the icons – which are, the icons. There are different types of icons and servicenow has a great documentation page showing all of the possibilities.

Cards and cards templates are connected. Templates are reusable, built with Mobile Card Builder and contain visual elements and their placements. Cards on the other hand, connect templates with actual table data.

Cards can also contain quite important UI/UX feature called UI Rules. I recommend taking a look at existing examples before changing something. Be aware that the UI Rules require some work to be done in the backend.

Functions

Functions provide a way of executing some action. It can be a navigation redirect, an URL display or updating a record. Their configuration is by far the most complex thing when working with mobile app configuration. They are used everywhere throughout the configuration. It’s very hard to debug them as they don’t display errors on screen. You really have to understand that the functions do exactly what you tell them to do – so if you pick wrong table, wrong condition or wrong navigation target, you will simply see a blank screen as a result. 

Functions can be the target of any tap or swipe action. They can also be assigned to the buttons visible on the screen.

Data

These components represent the data used on the mobile configuration. They are used mostly with the List item config on the List screen. The data result can be configured in multiple ways, including sorting and multiple streams.

Conclusion

These are the basic objects and terminology used when working with Mobile Experience in ServiceNow. It may seem complex at the beginning, but doesn’t everything?

Develop and see, learn, understand. That’s my new motto!