This blog will explain you To Build Your First Mobile App From Scratch

1. Activate Required Plugins

A.) Core Plugins

Name	ID	Description	Base System
Mobile Studio	com.glide.sg-studio	Plugin for Mobile Studio and Mobile Agent	Yes
ServiceNow NowMobile App Screens and Applet Launcher	com.glide.mobile-employee	Application and configurations required to setup the Now Mobile app.	No
Human Resources Scoped App: Mobile Employee Onboarding	com.sn_hr_onboarding	Activates the Mobile Onboarding app for HR.	No
Human Resources Scoped App: Mobile	com.sn_hr_mobile	Activates the HR mobile pieces for Now Mobile	No

B.) Supporting plugins

Name	ID	Description	Base System
SG Offline support	com.glide.sg.offline	Provides offline support for ServiceNow mobile.	No (This plugin is automatically installed with the Field Service Mobile plugin)
Service Management Geolocation Mobile	com.snc.service_ management_m	Menu in the mobile UI for Service Management Geolocation.	No
Service Management Geolocation	com.snc.service_ management.geolocation	Enables geolocation capabilities for Service Management	No (This plugin is automatically installed with the Field Service Mobile plugin)
Geolocation	com.snc.geolocation	Core geolocation capabilities	Yes
Glide Virtual Agent	com.glide.cs.chatbot	Virtual Agent platform and other necessary plugins	No

C.) Plugin Required For Mobile Agent

• Mobile Studio
• Geolocation
• SG Offline support
• Service Management Geolocation Mobile
• Service Management Geolocation

D.) Plugins Required for “Now Mobile” and “Onboarding”

• ServiceNow NowMobile App Screens and Applet Launcher
• Human Resources Scoped App: Mobile Employee Onboarding

E.) Base System Applications

• Mobile Agent- ITSM, ITOM, ITBM, ITAM, FSM, CSM, SecOps and GRC
• Now Mobile- ITSM, ITAM, CSM And HR
• Mobile Onboarding- HR

2. ServiceNow Mobile Applications

The ServiceNow mobile applications for Paris are native applications for supported iOS and Android devices. 

Using mobile content, users can take actions such as viewing, creating, updating, or deleting records, scanning barcodes, or attaching images to records.

There are three ServiceNow mobile applications:

A.) Features of the Now Mobile app

• Get help by submitting requests and issues.
• Find answers using global search and knowledge base.
• Submit and manage approvals
• View and complete tasks
• Upload images and attachments to ServiceNow records
• Request help from Agent Chat and Virtual Agent
• Use pre-configured Siri shortcuts unique to the Now Mobile app to complete common actions.

B.) Features of the Mobile Agent app

• Give your agents a mobile interface to triage, address, and resolve requests.
• Use the ServiceNow Agent mobile app’s offline mode to work in areas without an internet connection.
• Use the ServiceNow Agent mobile app’s location tracking feature to keep a record of where an agent last worked on an instance.

C.) Features of the Mobile Onboarding app

• Engage new employees before they start.
• Guide to-dos across all departments, including IT and HR.
• Provide your new hires with relevant media, chat options, and more.

D.) Apple App Store and Google Play Store

Within the Apple App Store and Google Play Store, three versions of ServiceNow Agent are available. 

1. Mobile Agent
   • ServiceNow Agent
   • ServiceNow Agent – Blackberry
   • ServiceNow Agent – Intune
2. Now Mobile
   • Now Mobile
   • Now Mobile – Blackberry
   • Now Mobile – Intune
3. Mobile Onboarding
   • ServiceNow Onboarding
   • ServiceNow Onboarding – Intune

3. An Overview of Mobile

Lets understand the technology which been used in mobile app development.

A.) Applet Launcher

B.) UI Section

A UI section is a section in the main area of the applet launcher page that displays an applet or collection of applets. It may be configured as an icon section, which can include multiple applets, an item section, which can include only one applet, a chart section, or a media section. 

C.) Navigation Bar

D.) Applets

E.) Screen Template

• The applet is configured using one of the available screen templates or types. The screen template determines the features of the applet, what is available for configuration, and how the users will interact with it. 

The screen templates include: List, Form, Employee Directory, Map, Group List, Calendar, URL, and Chart.

F.) Segment

G.) Item Stream

H.) Data Item

Data Items determine what information is available to an applet. Basically we can query to table to bring the data.

I.) Functions

• Functions define UI elements that determine what a user can do in a ServiceNow mobile application.

Functions are actions, smart buttons, or navigations, and can be assigned as swipe actions, top menu functions, footer actions, field functions, and quick actions. Headers can also be assigned an applet and icon for navigation purposes.

3. Mobile Hierarchy

Understanding the mobile hierarchy help you to configure mobile app in a very effective way.

4. Mobile Key Features

A.) Activity Stream

• 

• 

B.) Charts

We can add performance and reporting charts in the mobile app. Additionally mobile analytics is also available which shows the uses of mobile app.

C.) Checklist

D.) Embedded Item

We can embed many item into a page, including documents, such as pdf, media, video file and images and url to additional documents. We can use this feature to request for confirmation or agreement of the receipts of item

E.) Functions

There are multiple functions available for configuration within the mobile app.

• Swipe function
• Top Menu function
• Field Function
• Footer Function
• Quick Action Menu

F.) Inline Text

G.) Mobile Theme and Branding

H.) Multi-Scan and Group Scan

I.) Native Web Bridge

It allow a URL to be directly embedded and its content display within the page. A common use of this is to display KB article directly within the mobile app.

J.) Photo Search

It add a photo icon to the search bar in the header of applet launcher. This allow user to take a pic to perform a search. You can tap the icon to use the camera on your mobile device to take a picture. The picture is identified using the Google Vision API, which returns one or more results. You can select a result, which is used as their search query.

You can configure photo search for your mobile applications by enabling photo search in system properties, creating a Firebase account, and connecting your account to your ServiceNow instance.

K.) Stages

L.) Virtual Agent and Chat

5. Step By Step Mobile App Development

A.) Create an application for a mobile device in Studio

• Steps:
  1. Navigate to System Applications > Studio
  2. In the Studio, click Create Application or select an existing application from the list.
  3. Click Create Application File.
  4. From the Create Application File window, click Mobile Development, then click Create.
  5. In the Name field, create a name for the application and Save.

B.) Add your application in Now Mobile or Mobile Agent

• Steps:
  1. Navigate to mobile studio.
  2. Go to Application menu and select the one on which you wanna add it. In this example I am selecting Now Mobile.
  3. Click on related link “Create New Tab”. A form will open to select Navigation and Navigation Tab.
  4. In navigation select “Now Mobile Nav” and “Above created applet launcher” in Navigation Tab
  5. Save the form and refresh your mobile screen.

C.) Create List and Form and add in UI section

1. Steps:
   1. Navigate to mobile studio and create an Applet
   2. Choose List type template and select form checkbox.
   3. Fill the details and Save the record
   4. In List section select Data Item (If not exist then create new one) to display records.
   5. Design field configuration for list view
   6. Go to Form Section
   7. Do the field configuration and jump to Body section.
   8. Select attributes from left bucket and move to right bucket which ever you want to display on form.

D.) Create Functions And Action Item

• Steps:
  1. Navigate to mobile studio and click on actions. You will be redirected to list page of actions.
  2. Click on New button and fill the form. You will be ask to select Action Item. If it already there then choose the appropriate one else create new one.
  3. In condition section choose the table and fill condition to hide/show your Actions from users.
  4. Optional: If you want to have parameter then you have to follow below steps.
     • Create UI Parameter from related list of Functions.
     • Create item parameter from related list of Action Item.
     • Set the field value and select created parameter from above step.
     • Now do the mapping: go to Action Parameters Mapping related list of function.
     • Map UI parameter with Item Parameter.
  5. Now you are ready with function to add it on form and list.
  6. Open the Applet on which you want to apply the function
  7. Go to list/form’s function section and click on plus icon
  8. You will be ask to provide Label and choose the function which you have created in above steps.
  9. Now refresh your mobile screen you can find the action available.

E.) Types of Function

Navigation: We can use this type of function to navigate from one screen to another screen.

• Steps:
  1. Navigate to System Mobile > Function.
  2. Create new record.
  3. Select Type =Navigation.
  4. Destination type: Select Applet if you wanna navigate to any applet else select Applet Launcher to navigate to any launcher.
  5. Add it where ever you want.

Smart Button (Type=Email, Phone, URL and Address):

• Steps:
  1. Navigate to Mobile Studio > Functions > Smart Buttons.
  2. Click the pop out icon ( ) to open the Smart buttons list in a tab.
  3. Click Create New.
  4. In the new smart button form, fill in the fields
  5. Choose a field appropriate to the type of smart button you are creating. For example, if you are creating a smart button with the type Phone, select a field that includes a phone number.
  6. Smart buttons using the Address type must use the Record context. The Context field becomes read only when you select that type.
  7. Save the record.
  8. Add it on the applets.

F.) Quick Action (Create a form to raise an issue)

• Steps:
  1. Navigate to System Mobile > function
  2. Create new record
  3. Choose Type=URL and provide the url for any catalog item. Ex mesp?id=sc_cat_item&sys_id=3f1dd0320a0a0b99000a53f7604a2ef9
  4.  Save the form and go to your applet launcher
  5. Go to “Quick action menu map” under body section.
  6. Select your function and save the record
  7. Refresh your mobile screen you can see quick action menu.

G.) Set up Header

• Steps:
  1. Navigate to mobile studio and open Applet Launcher.
  2. Choose header type: Generic Or Home
  3. If you select Home you will get mandatory option to select Employee profile.
  4. Create or choose existing form type applet.
  5. Do parameter setting and save the form.