In a recent post, Native Mobile Applications for ServiceNow, we introduced the Business value of using one of the latest features of the Now Platform – Mobile Studio.

In this article, we dig a little deeper – outlining the simple, and specific steps you need to take to create a functional and useful Native Mobile Application in ServiceNow.

In this example, we prepare an application that shows new Change Requests, by location.

This would be very useful for those responsible for monitoring changes or interested in the geography of the requests.

This example is rather simple and of course, things could be extended to provide even more value.

Step 1 – Create Application

In your development instance, navigate to the Studio.

Select, ‘Start from scratch’ and then choose Switch to Application on the next UI Action.Create a Native Mobile Application in ServiceNow Create ApplicationStep 2 

In the top left corner, click to ‘Create Application File‘ and choose the ‘Mobile Development‘ option.Create a Native Mobile Application in ServiceNow Launch Studio Create Application FileStep 3 

Give your application file a name, and an icon.Create a Native Mobile Application in ServiceNow Step 1Step 4

Click ‘Create an Applet’. Here you can choose how your applet will display the information you’re presenting. Please note you have the option to choose additional templates.Create a Native Mobile Application in ServiceNow - Create Applet Step 5 

Now you need to begin the process of creating a ‘new data item’. This will be completed in two phases.

First, create the data item and the info you want to display. In our example, we have chosen ‘Change Requests assigned to me‘.Create a Native Mobile Application in ServiceNow Step 6 

Once you’ve added the new data item, navigate back to the ‘New Applet’ tab. Here you can select to use the new data item created in Step 5.Create a Native Mobile Application in ServiceNow Step 7 

Now we have selected the data item, choose the fields you want to populate on the form. This is simply done from the slush bucket. You’re provided with a visual example to see how the form will look too. If desired, you can alter this visual.Create a Native Mobile Application in ServiceNow, - create form layoutStep 8

We can now review the application display on our mobile device. This is the basic functionality of the application complete. In the next step, we will make a couple of small alterations to the UI, to deliver an even better UX. Create a Native Mobile Application in ServiceNow - Visual ExampleStep 9 – New Function UI Style

In the list above, all the ‘Change Requests’, regardless of their priority are shown in grey. We can easily adjust this, for example, to display the changes with priority 1 in red.

The first action in this process is to select the ‘UI Styles’ button on the lefthand menu.

Create a Native Mobile Application in ServiceNow New UI Style

From this page, choose to create a ‘New’ UI style.Create a Native Mobile Application in ServiceNow - Changing the priority UINow you can populate the relevant fields for creating the new UI style.Create a Native Mobile Application in Service - New UI Style Step 10

Once the new UI Style has been created, flick back to the Mobile Studio and add this style to the Applet. This is done at the bottom, under UI Style Configuration.

After adding the UI style, check that this is working by refreshing the application.

Create a Native Mobile Application in ServiceNow - UI Style Red for priority one

Step 11 – New Function: Additional Information

Now on the application, you are going to extend the view of the information to include extra details about the CR. This is in addition to the main window of information about the CR we selected in step 7.

Navigate up to the applet page and select ‘Details’ in the centre tab under ‘Screen Configurations’.

Create a Native Mobile Application in ServiceNow New Information PagePopulate the information you want to choose, as per the example below.Create a Native Mobile Application in ServiceNow - Adding information about a changeStep 12

Once executed, view the new information in the application. Note: you’re also able to add additional items to the Change Record within the application as shown on the graphic on the right.Create a Native Mobile Application in ServiceNow - Visual example Step 13 – Create a Smart Button for Location

Following these steps will allow you to show the Change Requests on a location map.

First, select the ‘Smart Button’ located under ‘Functions’ on the left side menu.

Create a Native Mobile Application in ServiceNow - New Smart Button

After clicking the menu you will be directed to a blank page where you can choose ‘Create New’.

Once you navigate there, please complete the fields to create a map – as per the image below.

Create a Native Mobile Application in ServiceNow - Create New Smart Button

Once completed, save the new button.

Step 14

After saving the smart button, navigate back to the ‘Applet Tab’ and select ‘functions’ under ‘screen configurations’

Create a Native Mobile Application in ServiceNow - Create Smart Button Function

Here you can add a ‘swipe’ function to allow you to navigate through the records on your application by swiping to the left or right. This is added to the new smart button we’ve just created.

Step 15

If you already have the location populated on a Change Request in the system, you can now view and test this functionality on your app. If you don’t have the location, to go to a Change Request record in ServiceNow and add the location manually.Create a Native Mobile Application in ServiceNow - Change Request by location

END 🙂

Hopefully, you’ve been able to follow these steps to create your own ServiceNow mobile application. As you can see, the basic ‘out of the box’ functionality is rich, allowing you to create effective applications, quickly and easily.

As with all aspects of ServiceNow, you don’t need to stop here. The functionalities can be extended and enriched further with the studio options.