Building Mobile Apps with ServiceNow · 2020. 7. 12. · from your instance. 3.2 Now Mobile Now Mobile allows employees to find answers and get stuff done across IT, HR, Facilities,

Building Mobile Apps with ServiceNow

Paris, Sep. 2020

September, 2020


2

Table of Contents1 Purpose of the document . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 How to use this document . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Native mobile clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43.1 Mobile Agent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.2 Now Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.3 Onboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4 Navigation tab bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64.1 Naming conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64.2 Ordering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

5 Applet launchers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75.1.1 Applet launcher concept . . . . . . . . . . . . . . . . . . . . . . . . 75.1.2 Applet launcher structure . . . . . . . . . . . . . . . . . . . . . . . . 75.1.3 Applet launcher header . . . . . . . . . . . . . . . . . . . . . . . . . 85.1.4 UI sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85.1.5 Icon section/Navigation UI section . . . . . . . . . . . . . . . . . . 95.1.6 Item section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.1.7 Chart section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115.1.8 Media section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.2.1 Campaigns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.2.2 Global search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145.2.3 Applet launcher quick actions . . . . . . . . . . . . . . . . . . . . 155.2.4 Applet launcher examples. . . . . . . . . . . . . . . . . . . . . . . 16

6 Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.1.1 List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.1.2 Item stream segments on list . . . . . . . . . . . . . . . . . . . . . 246.1.3 Item streams on list . . . . . . . . . . . . . . . . . . . . . . . . . . . 246.1.4 Grouped list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256.1.5 Employee directory . . . . . . . . . . . . . . . . . . . . . . . . . . . 256.1.6 Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.1.7 Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.1.8 Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276.1.9 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276.2.1 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286.2.2 Screen field types . . . . . . . . . . . . . . . . . . . . . . . . . . . 306.2.3 Activity stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316.2.4 Related list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326.2.5 Applet configurations . . . . . . . . . . . . . . . . . . . . . . . . . 32

7 Actions and functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 347.1 Swipe actions location . . . . . . . . . . . . . . . . . . . . . . . . . . 357.2 Footer actions location . . . . . . . . . . . . . . . . . . . . . . . . . 357.3 Top menu actions location . . . . . . . . . . . . . . . . . . . . . . . 367.4 Jump to navigations . . . . . . . . . . . . . . . . . . . . . . . . . . . 367.5 Smart buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

September, 2020


3

Table of Contents (Continued)8 UI styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

9 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389.1 Applet icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389.2 Navigation icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

10 Using color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

11 Item views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

12 Native features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4112.1 Phone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4112.2 Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4112.3 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4112.4 Push notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4212.5 Siri shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4312.6 Deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

13 Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44

14 User acceptance testing . . . . . . . . . . . . . . . . . . . . . . . . .44

15 Branding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4515.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4515.2 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4515.3 Google Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

16 Integrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

17 Migration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

18 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

19 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4619.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4619.2 Working with MDM and MAM . . . . . . . . . . . . . . . . . . . . . 47

September, 2020


4

1 Purpose of the documentThe ServiceNow platform enables you to create powerful mobile experiences. However, creating these experiences for mobile is different than building for desktop. You need to think about the form factor and usability of the device to optimize for mobile users’ behavior and expectations. This document is meant to guide ServiceNow mobile app creators on using best practice mobile design and product principles to create consumer grade mobile experiences.

2 How to use this documentThis document is organized into sections focusing on different aspects of mobile app configuration. It is not meant to be read cover-to-cover, but looked at individual sections for tips, recommendations, and best practices. As you configure and finalize your apps, refer back to the sections of this document to align with how our designers and product managers optimize the ServiceNow platform for the Now Mobile, Agent, and Onboarding apps.

In addition to this document, reviewing the pre-configured apps created by ServiceNow’s BUs is recommended before creating from scratch.

3 Native Mobile ClientsServiceNow platform supports 3 Native clients in the store. All the apps have the same capabilities, but the app name gives indication on the persona and usage.

ServiceNow’s approach to app design aligns with how users work in consumer mobile apps. Each app specializes in a specific area of the platform. These specialized apps give your users the best experience, providing them with what they need in that moment. The idea is to keep each app focused on a specific set of tasks to facilitate quicker interactions.

When building custom apps, consider the use case and user persona. Understanding that will guide you on the best native client to place your app configurations.

service agents who need to work remotely.

September, 2020


5

Mobile

Onboarding

3.1 Mobile AgentServiceNow Mobile Agent delivers out-of-the-box, mobile-first experiences for the most common agent workflows, making it easy for agents to triage, act on and resolve requests on the go.

Use the ServiceNow Agent mobile app to update records, coordinate with coworkers, and get work done. Deploy the Mobile Agent app for

• Resolve an incident

• Track or catalog assets on your instance

• Coordinate with co-workers

• Manage approvals

• View your work scheduleAgent

• Submit and view requests and issues

• Submit approvals

• Edit their profile

• View a personalized home page

• View and complete tasks

• Upload images and attachments to ServiceNow records

• Search people, knowledge articles, and catalog items

• Request help from Agent Chat

• Complete onboarding to-dos

• View relevant media sections

• View relevant banners defined by your administrators

• Chat with an agent

• Receive notifications from your instance.

3.2 Now MobileNow Mobile allows employees to find answers and get stuff done across IT, HR, Facilities, Finance, Legal and other departments, all from a modern mobile app powered by the Now Platform®.

Enable your users to submit incidents and requests, manage tasks, and access company resources from anywhere using the Now Mobile app. Deploy the Now Mobile app if your users need to regularly perform these tasks while away from their desk or out of the office:

3.3 OnboardingServiceNow® Mobile Onboarding empowers new hires to complete tasks, view content, and get help across departments - including IT, HR, Facilities, Finance, and Legal - all from a single native mobile app.

Enable your new hires to complete your onboarding processes and get up to speed quickly and easily. Deploy the Mobile Onboarding app for new hires who need to complete onboarding tasks:

September, 2020


6

4 Navigation Tab BarThe navigation bar displays multiple icons, called navigation tabs. Configure these tabs to navigate to applet launchers or an applet within your mobile applications.

The navigation bar contains a Settings and Notification tabs. Removing these tabs is possible, but prevents your users from accessing important information and features of the app. Consider changing the order in which they appear in the navigation bar rather than removing them.

4.1 Naming ConventionsGive your navigation tabs a descriptive name that provides context. Avoid generic names like “Home” or “Apps”. Note the limited space available for titles in the navigation bar. When testing your application, watch for titles that do not completely display on the navigation bar.

The navigation bar can display up to five icons. If you have added more than five, a “More” icon is added to display the additional icons in a list. Try to limit your navigation bar to five icons to avoid requiring your users to take this additional step.

Make sure tab bar icons are visually consistent and the text length is balanced.

4.2 OrderingOrdering should be determined by level of importance top to bottom and left to right.

SettingsNotificationArticlesInventoryWork

September, 2020


7

5 Applet Launchers

5.1.1 Applet Launcher ConceptWith an applet launcher, users can access applets in a variety of formats, as well as search, do quick actions, and find user information. An applet launcher can be accessed at the bottom of the app or through a navigation button.

An applet launcher can be defined based on context for example – FSM, ITSM, Finance, Timesheet etc. or to be divided to smaller use cases for example My work, My Inventory, My cases.

The navigation bar is limited to 5 tabs. If you exceed this limitation, the last tab on your navigation bar is a “More” tab that will display the remaining tabs as a list. Limit your navigation bar to 5 or fewer tabs to prevent a cluttered appearance and ensure your users can easily see the available options.

You can use role restriction to further limit the number of tabs on your navigation bar. The Required Roles field on an applet launcher controls which users can see the launcher. Use this restriction to ensure your user only see tabs relevant to their work.

Use capital case for your titles. For example, “Team Members”. Limit the length of your titles so they are not cut off when they are displayed in the navigation bar. If you intend to support multiple languages, consider the length of titles in each of the languages you intend to support.

Design your applet launchers to provide information and direct your users to other screens where they perform their work. The applet launcher should not be where users perform most of their tasks.

5.1.2 Applet Launcher StructureApplet launchers contain a configurable header, and UI sections to provide access to applets in several formats.

• Note that screen space is limited on mobile devices. Try to limit the information displayed to what your users will need while working remotely. Also consider placing the most used information towards the top of the applet launcher, so you users can find what they need most often without needing to scroll down. Order your sections according to how frequently they are used. Place high usage and important information left to right and top to bottom.

September, 2020


8

5.1.3 Applet Launcher HeaderThe header of the applet launcher defines how the title of the screen appears and what information is shown in the header. The available header types are Home and Generic. Review the two header types to determine which best suits the content you want to present to your users.

The header may include a header function. For example, in the first tab if the header type is Home you can add a user profile image and show the users profile. If the header type is Generic for example a store you can add a shopping cart icon and navigate to the shopping cart.

Home Header

Use the Home header type for the first launcher a user sees when logging into an app. The title of the home header is customizable and can include the full or partial name of your user. You can combine a static string together with the name. For example, Hello John or Welcome John Smith.

Generic Header Type

Title of a Generic applet launcher is a static string that you define. For example, My Work, People, Knowledge.

*Note: in New York and Orlando using the name variable will correlate with default name setting in your instance.

5.1.4 UI SectionsUI sections display applets and record information on your applet launcher screen. The available UI section types are Chart, Icon/navigation, Item, Media and Campaign.

• Keep consistency in how you use section types in your app. For example, if you use icon sections to access record information, do not use those icon sections to initiate actions. If you use horizontal card sections for actions, do not use those sections to show record information.

• Limit scrolling where possible. Prioritize the icons, and information your users need most and place those items towards the top of the page. Limit vertical item sections to three or four items.

• Group items within a UI section contextually. For example. Icons relating to incident management are easier to find when placed in the same UI section.

• Configure your user’s most used actions as quick actions or navigation bar items. These options are accessible at the bottom of the screen regardless of where in the launcher the user scrolls.

• Limit your applet launcher to 5 or fewer sections.

• Use a section as the launching point of a workflow. If a section has a significant number of records to scroll through, consider linking to a list of records instead.

Home header

Generic header type

a

b

Search for Services, Articles, or People

9:41

Hello Danielle Profileb

Searchc

Namea

Search for services, articles, or people

9:41

People Actionb

Searchc

More actions

c

Titlea

Label 5HR information

Knowledge base

Request IT assistance

Ask a question

How can we help you?

Text 2

Lorem

TravelNew

By Monica Geller

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Submit travel expenses New

See AllRecommended for you


9:41

Hello Danielle

Read OurJourney

Diversity, inclusion and belonging

SettingsNotificationsFor MeInformationServices

Media

Icon section

Item section

September, 2020


9

5.1.5 Icon Section/Navigation UI SectionIcon/Navigation section displays applets using the icon that is defined in each applet. Users can tap on an icon to list, maps, calendars, and more.

You can create a section header to give an indication of the types of actions within the section. If your applet names are self-explanatory, you can omit this header and save screen space.

Navigation UI sections are the next generation of the icon section. Use Navigation UI sections instead of Icon sections to provide the flexibility to redirect to applet launchers, as well as applets. Navigation UI section functionality may be extended in future releases.

Vertical

• If the data is actionable, take advantage of the “count” feature so the user knows how many records are in the drill down. It is great for task information as well as larger datasets.

Horizontal

• Use this section type to display many applets in one horizontal view. Limit the applet name character count to 20 or fewer characters so it does not get cut off. Use this section type to group related applets that do not require counts.

• If there are more applets in a section than will fit on the screen, users can scroll horizontally to view all the applets. Limit the number of applets in a horizontal section to 4 or fewer to prevent users from needing to scroll.

5.1.6 Item Section• Item sections display records which require the user’s attention, such as

high priority or overdue items, and unassigned tasks. Users tap on an item to see additional record information or take actions.

• Use the “hide section when empty” option to hide sections when they do not have information to display. However, in some cases you may want to show an empty section. A missing section may cause the user to lose context or not understand why a section doesn’t appear. For example, a to-do list.

• Item sections can include a “see all” button, which opens a full list of records. The same item view is used for the item section and list view. Make sure that the item view selected is displayed correctly in both the section and the list. The height of cards in horizontal sections are limited.

• Based on the use case, If the cards are self-explanatory or the card consists of a full card image, a title and a See All button might not be needed. You can define to remove them from the item section header.

Horizontal

Task MapGrouped WOT

My WOTGrouped Incidents

My Incidents

Vertical

8My Incidents

15Grouped Incidents

September, 2020


10

Vertical

• Use vertical sections when you want to display a limited number of records within the applet launcher. Vertical item sections are good for records like critical tasks where you want the user to see details as soon as they land on the page

• Vertical sections display one or more records at a time. Users can view more records by scrolling vertically.

• Avoid overwhelming your users with too many records in a section. If your users primarily use tablet mobile devices, okay to show more records in the section.

• Since the section only displays a few records, use data sorting to ensure your highest priority records are visible. Users can tap the see all button to see a full list of records.

• In cases where you do not want to limit the number of records in a vertical section, place the section at the bottom of your applet launcher. This placement prevents the user from needing to scroll past a large section to access other sections.

Horizontal

• Use horizontal item sections to display a discoverable number of items you want the user to see.

• Horizontal item sections can be used to create a menu for core app purposes. For example, use these sections for “help with an issue”, “Create case” or “Book Conference Room.”

• To enable a horizontal item section for core app purposes, a new table needs to be created that holds the information. You then be able to create a data item and list view of the new table. “List Item” Navigation functions can be used to enable the drill down into the mobile enabled service portal form.

See AllRecommended for you

Submit travel expensesCras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis. Nunc eu tellus tortor. Etiam at condimentum nisl, vitae sagittis orci. Donec id dignissim nunc. Donec elit ante, eleifend a dolor et, venenatis facilisis dolor. In feugiat orci odio, sed lacinia sem elementum quis. Aliquam consectetur, eros et vulputate euismod, nunc leo tempor lacus, ac rhoncus neque eros nec lacus. Cras lobortis molestie faucibus.

Service Help article

Travel policyCras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis. Nunc eu tellus tortor. Etiam at condimentum nisl, vitae sagittis orci. Donec id dignissim nunc. Donec elit ante, eleifend a dolor et, venenatis facilisis dolor. In feugiat orci odio, sed lacinia sem elementum quis. Aliquam consectetur, eros et vulputate euismod, nunc leo tempor lacus, ac rhoncus neque eros nec lacus. Cras lobortis molestie faucibus.

Senior Software EngineerChristine GlazerEngineering

Software EngineerJennifer BowersEngineering

Associate Software EngineerErica MartinEngineering

See AllMy team

September, 2020


11

5.1.7 Chart SectionUse chart sections to display time series, single score reporting charts, and performance analytics scores. Charts give your managers or owners indications on trends or items which require their attention.

• Users can access a chart applet from a chart section within an applet launcher. The chart section displays a preview of the chart, which users can tap to access the chart applet using a navigation function.

• Use a single score chart section to display reports and performance analytics scores.

• A single score chart section supports horizontal and vertical view. Use a vertical view when you want all scores to be visible on the screen without scrolling, or when your titles or values are long. Horizontal views work best with score names and values short enough to fit on screen. Use a horizontal view when you want to display several scores in a scrollable section.

• Add a section title if the charts are not self-explanatory, or you need to group multiple charts under a single title.

• You can configure report section so that a user can tap a score to display its records. From there, users can see additional information and take actions.

• Use a chart section of type report to show a Time Series report, a bar chart, or a donut chart. The Time series chart in the ALP can be tapped and the user can drill into the chart applet. The chart applet allows the user to interact with the chart, zoom, filter and more.

• Optimize your dashboard to match the screen format for devices your users use to access the app. You can optimize your charts for viewing on phone or tablet devices. For example:

• Use horizontal sections to take advantage of screen space.

• Place multiple charts in a chart section. These charts will appear side by side in wider format screens.

My Teams Dashboards

My Team Incidents KPIs

0

800

1200

Team 1 Team 5 Team 9 Team 13

All incidents per team & priority

My Team WOTs KPI

WOTs per priority

Critical (115)

Moderate (85)

Low (105)

High (40)

Planning (5)



9:41

Hello Kelly

% of cases resolved in first response4%

Jul 20203%

My Team Incidents100Real-time

Single score vertical chart section

Single score horizontal chart section

September, 2020


12

• Consider the number of reports presented in mobile. Present only the most used and useful reports to make navigation easier and avoid a cluttered user experience.

• For better visibility and performance, consider limiting the time frame of the information. Don’t overload with unneeded information for the mobile use cases.

• Due to device limited space the X/Y axis labels might be truncated depending on device and orientation. We recommend testing with different datasets. Consider limiting the # of bars in the chart preview in some cases. In some cases, only the label prefix will be shown, consider making sure it is descriptive.

• In addition to navigation tabs, you can also configure navigation sections to navigate to your applet launchers.

0

800

1200



HyderabadSan DiegoAmsterdam

Other Teams Dashboards

My Team WOTs KPI

WOTs per priority

Critical (115)

Moderate (85)

Low (105)

High (40)

Planning (5)



9:41

Hello Kelly

Incidents KPIs


800

1200

Open incidents per team

WOTs KPI

0

800

1200

Breached SLAs

My team incidents

5(35%) Jul 30

33%10:15 AM

My Team Incidents

33%Jun 25

Recently solved

10


9:41

Hyderabad

HyderabadSan DiegoAmsterdam

Other Teams Dashboards

September, 2020


13

5.1.8 Media SectionMedia sections display an image or video. Users can tap a media section to navigate to another screen.

• Add a media section to the top of your applet launcher or create an applet launcher specifically for multiple media sections.

• Use media sections to display welcome messages, or company messaging.

• Media sections can display a single line header, and up to two lines of additional to text. You can define a navigation function and the text to appear on the navigation button.

• Media sections can display video from YouTube and Vimeo streaming services.

• Restrict visibility of your media sections by role, user, or conditions to ensure users only see what’s applies to them. For example, you could create an onboarding message that displays only for employees who just signed in. You could also create a “see you next week” message that displays a week before an employee’s start date.

• Media sections are also a way to add a static company logo to the top of your applet launcher if further branding is desired

5.2.1 CampaignsUse campaigns to deliver messages and important information to your users. Users can interact with the promotional displays by viewing videos, being redirected to web pages, or navigated to defined areas on their mobile device.

Mobile campaigns enable you to share curated content using a scrolling list of images in a carousel format. You can mix any of three card types in the carousel: video, image, and text. At the bottom of the carousel images, dots represent up to eight images and numbers more than eight images. You can choose for the mobile campaign to automatically scroll the cards or to manually scroll them yourself.

It is recommended to place the campaign component at the top of your first tab ALP, ideally present no more than 5-7 content cards and keep the card visualization within the same color theme to avoid users visual fatigue.

You must have the HR Service Delivery Content Delivery plugin [com.sn_content_delivery], installed to create a mobile campaign.

Use campaigns when delivering multiple messages to your user while using the HR Service Delivery Content Delivery plugin. For other use cases like single messages, company branding and when not using HR plugin consider using the Media Section.

Learn more >

We're delighted you're joining our diverse and talented team.

Welcome to ServiceNow

Videoa

Imageb

Textc

With Now Mobile, employees can get stuff done from a modern mobile app powered a the Now Platform.

Get The App!

Happy Pride Day!

September, 2020


14

5.2.2 Global SearchConfigure your application launchers with a global search bar to give your users the ability to quickly find people, catalog items, and knowledge base articles within your mobile applications. The search bar appears in the header of your application launcher.

A search bar’s field can contain placeholder text. Keep this text short to ensure that the text does not exceed the length of the search bar.

You can add additional application search sources to enrich your mobile applications. For example, Incidents, Cases, Requests.

Voice Search

You can also enable voice search, which uses a mobile device’s native speech recognition capability.

Depending on your mobile device’s operating system, the voice recordings you create with the voice search feature are sent to Google or Apple to be processed into a text query. ServiceNow does not have control of the recording once it has been sent.

Photo Search

Configure photo search to give your users the ability to use their device’s camera to perform image-based searches using the objects around them.

To take advantage of image recognition in your mobile applications, you need a Firebase account with the Google Vision API enabled. Google Firebase account and the Google Vision API are third-party services that must be subscribed to separately.

Search filters

9:41

ArticlesServices & ItemsPeople

CancelSearch for services, article…

September, 2020


15

5.2.3 Applet Launcher Quick ActionsQuick actions provide your users with a shortcut to an item or action in your mobile apps. Quick actions appear under a plus icon at the bottom of the applet launcher page. This button remains on the bottom of the page regardless of where a user scrolls to remain easily accessible. Quick actions are best used for tasks users need to preform regularly.

• In cases where only 1 action is configured in the Quick Actions menu, you can define a specific icon to be displayed.

• Limit quick actions to required or frequently used actions based on the purpose of your applet launcher. Chat is a good example for using a quick action.

• Keep consistency of quick actions on your Applet Launchers.

Quick actions with iconsa

Quick actions without iconsb

Cancel

Action 5

Action 4

Action 3

Action 2

Action 1

Cancel

Action 5

Action 4

Action 3

Action 2

Action 1

September, 2020


16

5.2.4 Applet Launcher Examples

Example 1

Actions which appear in all the ALP screens should appear in the quick actions and will be avilable from the ... in the top.

Dispaly an image using a media section in the top of the ALP with an engaging action. Like in this example the image can include the action and engage the user to tap on the image.

Use the icon section to enable users to easily access applets.

Use an item section to recomend items to the user.

September, 2020


17

Example 2

To-do items

Open requests

02-24-20Est. delivery|$1,999

Apple iMac

REQ4929301Work in progress

See all

Overdue 1 day

Upload profile photo

Due in 2 days

Watch security compliance video


9:41

Hello Brandon

Timesheets

LabelNotificationsMy StuffServices

Dispaly an image using a media section in the top of the ALP to add look & feel to your app. In this example tapping on the image will not navigate to any other screen, so no call to action appears on the image.

Use a vertical item section if you want the user to see all his to do items on the screen.

September, 2020


18

Example 3

Use a chart section to show the importent KPIs user should track. Add a title in case it adds additional informaiton and helps the user with orientation.

Use a vertical icon section with count to show the user clearly his relevent applets. Presenting the count will help him realize if he should navigate to the list for additional detials.

• In this example, a title for the icon section was not added, use it only if it adds value to the user.

September, 2020


19

Example 4

By Ariel Shadmon

4542 Views

The value of the known issue database- with Gil Pantofaro

By Ariel Shadmon

4542 Views

Security compliance video

By Cosmin Irimia

4,757 Views

Wellness Newsletter - Healthy Tips and Recipes

New topics just for youDiscover

SettingsNotificationsArticlesInventoryWork


9:41

Hello Helen

Dispaly an image using a media section in the top of the ALP to add look & feel to your app. In this example tapping on the image will not navigate to any other screen, so no call to action appears on the image.

Use a vertical item section to show the user the topics related to him. A title is not added to the item section as the title of the media section provides the title for the screen.

September, 2020


20

Example 5

Text 2

Unity Hospital

KX12000 Router Upgrade

In Progress

Opened by Inbal Litvin

Unity Hospital

Router repair or replace fan

WOT0020015In Progress

See AllMy Tasks

9:41

Work

My Schedule

Map View

Timesheet


Text 2

Lockwood Clinics

Install JK20 Infusion Pump

New

Opened by Mary Miller

Ravinia Hospital

Upgarde sensors and firmware

WOT0020322New

See AllMy Team Tasks

Create a visual view of the tasks that the user should act upon by using an item section in the top.

Additional applets are presented using a vertical item section.

September, 2020


21

Example 6

Sick employees

2(8%) May 5

33%10:15 AM

See allGet emergency help

2My approvals

1My requests

In quarantine

39Sick employees

2(8%) May 5

33%10:15 AM

Returning to work

25

MoreArticlesServicesTeamFor you

Now employees can get back saftly with the mobile appBack to the office

COVID-19 team health status


9:41

Hello Steve Brand the app and tailor to your unique company identity.

Use a vertical icon section with count to show the user clearly his relevent applets. Presenting the count will help him realize if he should navigate to the list for additional detials.

• In this example, a title for the icon section was not added to keep a clean view.

KPIs can provide an informative picture, consider using them not only for mangers use cases.

Use a campaign section to deliver multile messages to your users in a carosel format.

September, 2020


22

Example 7

HYDSDAMSTLV

0

800

1200

Reported COVID-19 cases by day

Ordered by status

Available -Working (82)

Unavailable - Other time off (30)

Unavailable - Sick Leave (32)

MoreArticlesServicesTeamFor you

9:41

Team

Dashboard by team location

Team availability

Reported cases

Create a dashabord to provide an overview of your team.

Use a pie to provide a clear overview, tapping on the pie will allow the users to see the actual records and take actions if needed.

Brand the app and tailor to your unique company identity.

Provide drill down to additional dashabords views such as team location.

September, 2020


23

6 AppletsApplets are collections of screens within your mobile app, designed for a specific task. Each applet provides one or more screens, which your users see when they select an applet.

Applet Types

There are several available applet types designed to present actions and information to your users in different ways. Consider what information and actions a user needs to take, and select the applet type that best suits their needs.

6.1.1 ListUse a list to provide a list of records. Lists display in a card format, showing a limited selection of the information in the record.

Carefully consider what record data is important to present on the list screen. Each field added to a record’s pattern increases the space needed to display the record. Using fewer fields will allow you to present a greater number of records on your lists on the same screen. When you have determined which fields, you want on your list, select an item view that best displays that information.

List screens have a filter option to give users the ability to find items in the list matching criteria they define. This filter is done on the local device and filters only the records retrieved based on the item view fields. Consider hiding the filter to save screen space in situations where the filter does note add value.

Use top menu functions to navigate to a screen, group by a specific field. You can also open a URL, start a phone call, or navigate to another screen. For example, you can add top menu functions to call your support number or open your company web site. Consider top menu functions for actions that affect an entire list, like an “approve all” action.

Use swipe action functions for record specific actions. Users access swipe actions by swiping a record to the left or right.

You can configure a list screen to request user input (Parameter) before the list appears. The list uses this input, for example, to perform a search and display the results in the list. You can also adjust the UI input parameter type. For example, it can be a QR barcode scan or date field Other examples include using an input on a list of incidents allow the user to select attributes such as severity, priority, group and more. Note that lists containing large results can impact performance. Consider using data item conditions in addition to the user input to limit list sizes.

The architecture of a list view is extremely flexible and provides many configuration options. Please see below.

KX12000 Router UpgradeWOT0020015

Cyberdyne Inc.2200 Powell Street, San Francisco, CA

2019-01-05 12:00:00

Work in progress

List item parameters

Status

Short description

Address

NumberCompany name | date

KX12000 Router UpgradeWOT0020015Work in progress


2019-01-05 12:00:00

RT1000 Router ReplacementWOT0050019


2019-01-08 09:00:00

Server T4100 floor B1.930 downWOT0050022Assigned


2019-01-08 09:00:00

On hold

September, 2020


24

6.1.2 Item Stream Segments on ListA list can be made up of multiple item stream segments. You can use different segments to convey different sections to the user. For instance, “open” cases as the first segment and “closed” cases as the second. However, it is important to note that if using a vertical applet count, the count only displays the numbers of the first segment.

Segments act as a tabbed interface to display different types of information in your list screen. Use segments to organize information into related sections, which help your users find what they need quickly. A list may contain any number of segments. Only three segment titles can appear on your list screen at once. Avoid a negative performance impact and provide a cleaner user experience by limiting to three or fewer segments.

6.1.3 Item Streams on ListA list or list segment can be made up of multiple item streams. An item stream can have a separate data item and master item. Therefore, you can display multiple tables/views in one list. For example, “My To Do’s” can include Approvals, Tasks, and assigned cases. The sort & order of the list is configured on the field “interleave order”. Note, Studio does not currently support this and is a platform only feature.

Consider using similar item view formats for your item stream to give your list a uniform appearance. Because these lists contain data from multiple tables, the filter options may contain many filter elements, which may impact performance. Consider hiding the filter on these lists, or create a curated experience using a selective filter option that can be achieved by defining a category per item stream (Incidents, requests, work order tasks, etc.).

ClosedOpen

Megan Anderson

Cyberdyne Inc.

Performance degradation - low disk space

INC0020470Work in progress

Daniel Miller

Acme Corporation

Keyboard is brokenINC0020475Awaiting approval

Robert Geller

Acme Corporation

Unable to log in to computerINC0020482Pending

Megan Anderson

Cyberdyne Inc.

Computer reboots unexpectedlyINC0020491Work in progress

Item Stream Segments on List

2020-12-05 12:00:00

KX12000 Router UpgradeWOT0000741251 - Critical

2020-01-08 07:30:00

Wireless access is downWOT0000741252 - High

Megan Anderson

Cyberdyne Inc.


INC0020470Work in progress

Robert Geller

Acme Corporation


Item Streams on List

September, 2020


25

6.1.4 Grouped ListUse a grouped list to provide an easily navigable view of a list of items grouped by a field. For example, you can display a list of incidents grouped by category or priority. You can configure grouped lists to navigate to a second list showing the records in the selected group.

6.1.5 Employee DirectoryEmployee directory applets typically provide a list of employees, customers, or other contacts, but are not limited to user records. Employee directory displays information from a record along with an icon or image.

• Use functions to give your users the option to communicate using your mobile device. You can configure functions to enable phone calls, email, and SMS messaging.

• Add actions to your employee directory to provide options like navigation to an employee location or contacting them via phone or SMS message. You can provide additional information, such as a web link to a LinkedIn profile. You can also connect to the user records of the employee’s reportees and managers.

• User records can contain sensitive information. Carefully consider what information to display in the applet. Consider what users or roles are given permission to use the applet.

• You are not limited to user records. You can use this applet type anywhere you would like to display an image along with record information. For example, you could use this applet type to display a catalog item with an image, header, and short description.

[email protected]

+1 999-555-1212Business Phone

2225 Lawson Lane, Santa Clara, CALocation

+1 999-991-0001Private Home Phone

Maria DaviesManager

https://www.linkedin.com/meganLinkedIn

Customer SupportSolution Consultant

Megan Anderson

Location

Phone

URL

Email

Smart buttons

a

Search for people

9:41

Employee directory

See AllMy manager

Director of Customer Support

Maria Davies

See AllTitle

Senior Solution Consultant

Annie Williams

Solution Consultant

Megan Anderson

Solution Consultant

Andrew Richardson

Solution Consultant

Megan Anderson

September, 2020


26

6.1.6 CalendarUse a calendar applet to provide a list of time sensitive information in a calendar format, such as holiday schedules or scheduled tasks. Users can see a calendar view with indicators for dates that relate to your records. You can see information on these records in a card view interface below the calendar.

• You can configure swipe actions on the card items below your calendar to access quick actions like deleting a record or change its state.

• You can configure top actions in the calendar applet for more complex or global actions, such as creating an appointment.

• The records you select to display in the calendar applet need both a start and end date to display in the applet.

• Displaying too many items in a calendar can create a bad user experience and impact performance. Consider using a filter on your data item. A filter can ensure that only the most relevant information displays on your calendar.

• Calendar applets can display records from multiple tables. Use similar card views for each record type shown in a calendar for a consistent experience.

6.1.7 MapUse map applets so that your users can see location-based information on a map from their mobile app, such as daily routes or facility locations. The map screen includes a card list to display additional information for records shown as pins on the map.

• For a record to be represented with a pin on the map interface, the record must contain a field that includes a location from the Locations (cmn_location) table.

• Displaying too many pins on a map can create a bad user experience and impact the performance of your mobile application. Consider using a filter on your data item to ensure that only the most relevant information displays on your maps.

Security TrainingEvent Meeting

AcceptDecline

Setup the configurationWork Order Task

11:0012:00

29

12

19

26

2

30

6

13

20

27

3

31

7

14

21

28

4

8

15

22

29

5

2

9

16

23

30

6

3

10

17

24

31

7

4

11

18

25

1

8

August 20182018 Sep

TM W T F S S

1

5

Swipe actions

a

3

8Multiple pin grouping

Single pin

Itemcard view

a

b

c

6.1.8 Map

September, 2020


27

6.1.8 ChartUse a chart applet to give your users access to pre-configured mobile dashboard views for reports and analytical data on their mobile device. Chart applets display reports and performance analytics widgets charts.

• You can configure charts to link to lists, so your users can tap on a chart to display a list of relevant records.

• The chart applet can display time series report and Performance Analytics latest score widget, used in the web-based UI.

• Displayed reports and widgets contains the settings and configurations as defined in the instance.

6.1.9 URLUse a URL applet to open a URL from within a ServiceNow mobile application. Configure relative URLs to direct to pages within the ServiceNow platform, such as a service portal pages or knowledge base articles. Configure an external URL such as your company’s commercial site.

Consider URL applets to link pages with complex logic, such as catalog items in a service portal page. When using URL screens to link to other pages, consider the design and color of those pages to give your users an experience consistent with your mobile applets.

Use native instead of web pages when possible. Web pages are not necessarily designed for use on mobile devices and may not provide the best experience for your mobile users.

1000

750

500

0

Axis

Y

Team DTeam CTeam BTeam A

Tap the sections to view details



Low ModerateHigh Critical

9:41

September, 2020


28

6.2.1 FormUse form applets to display the content of a single record. You can configure functions on form applets to allow users to make edits and take actions. Form screen supports top menu functions, footer functions, and smart buttons.

You can configure access to forms directly from an applet launcher icon or navigation bar tab, or as a secondary screen in a list, map, or calendar. Use a form as a secondary screen to provide record detail on a specific item, for example, an incident record on a list of incidents.

• Screen space is limited on mobile devices. Try to limit the information displayed in mobile forms to what your users need while working remotely. Also consider placing the most used information towards the top of the form, to help your users find what they need without having to scroll down.

• Forms can contain multiple segments. Segments act as a tabbed interface to display different types of information in your form screen help to filter and organize information. A form applet may contain any number of segments.

- The Android version of the apps display up to three segment titles on a form screen at once. Additional screens can be access by scrolling horizontally.

- The iOS version of the apps can display up to five segment titles on a form screen at once. If there are more than five segments, a “More” segment displays to display the remaining segments. Limit the number of segments to improve usability. Wider segments are easier to tap.

- In both operating systems, try to limit your forms to 2-3 segments to avoid negative performance impact and provide a cleaner user experience.

WO00010017Parent

2200 Powell Street, San Francisco, CALocation

Related ListsActivityDetails



2019-01-05 12:00:00

Use Part Close Complete

a

d

c

b

Segmented control

Navigation to Parent

Smart button

Footer actions

Attachment

Gal Gadot 11:35

Order45218.pdf40.24 KB

Taylor Smith 10:30

Lorem Ipsum is simply dummy text of the printing.

TS

Thu, 28 Dec




2019-01-05 12:00:00

September, 2020


29

Form screens can include segments from the following types: activity stream, related lists, embedded List, details screens.

• A form header can display an item view.

• The header item view can act as a navigation button. Use this feature in forms to navigate back to a parent record. When configuring your header for this purpose, be sure to include the parent record ID and indication that navigation is available.

• Form applets can be created independently from lists and other applet types. For example:

- In a home applet launcher, you can configure the employee image to navigate to a form record displaying the user profile.

- Configure an entry in an item section to navigate to a form.

- Configure an option in an employee profile navigate to the employee’s manager profile.

• A form can be standalone or be navigated from a list, map, calendar screen. In case the form is not standalone, the item view which appears in the form header can match the item view in the previous screen or include different fields.

Consider hiding the form screen name to make a form generic, and reusable in different contexts. For example an applet displaying a User record has a screen name of “Employees”. If you remove the name, this form could be used in other areas of your app to display user records that are not necessarily employees.

WO00010017Parent

2019-02-20 08:46:23Actual travel start

58 minutesActual travel duration

28 days 22 hours and 12 minutesDuration






2019-01-05 12:00:00


9:41

Back My tasks

September, 2020


30

6.2.2 Screen Field TypesUse screen fields to improve the usability of your form details screen.

Keep your form screen focused. Do not overload your form with more information than your users need to perform their tasks. If many screen fields are necessary, consider dividing the content into different forms or segments.

Use Screen UI Policies when showing fields on the details screen, give your users the information they need when they need it. For example, show Reject reason only if the state is Rejected.

• Checklist

- Checklists are a platform component that will also render in the app. Checklists can be used for to do’s and tasks.

• Attachment

- The attachment screen field presents attachments added to the record. The field also provides controls to delete and rename attachments. This is useful for cases where there are a small number of attachments.

- You can combine an Attachment screen field with a footer function of upload attachment. For example, Task of “Upload your profile photo.” On the Form screen add an upload attachment button and allow the user to see the uploaded image with the Attachment screen field.

• Video

- Use a video field to embed a video within the form.

- Video content cannot be hosted on your instance. Use externally hosted videos on Youtube or Vimeo.

• Image

- Use an image field to embed an image in the screen.

• HTML

- The HTML field replicates the HTML field type in platform. Use an HTML field to display formatted text, including bold, italicized, or resized text.

- Use an HTML field when need to add information to a screen based on an HTML field within your instance. The component works best with limited information as the height of the HTML field is limited. Style your HTML content to match the style of the app to have a coherent design.

Checklista

Have user try accessing a different website

Have user try accessing another browser

Have user try going online and offline

Attachmentb

My driver license

Videoc

Imaged

HTMLe

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Relocation Agreement

September, 2020


31

- HTML fields are not intended to display an embedded website. Doing so can result in unpredictable behavior. Consider using a URL screen to direct your users to the original site in these cases.

- HTML fields are based on WebView components, which have limitations on the supported behaviors. For example, Javascript is not supported, and web page errors are ignored. Test your HTML fields to ensure that any required behaviors are supported. If you have requirements that are not supported in an HTML field, consider a URL screen to direct users to a site containing that content.

Footer actions can have dependencies to show or not show based on a user’s interaction. This includes tapping videos, images, URL screen navigations checklists and attachments. Creating this dependency will only show the footer function once the screen field is interacted with. Examples include, tapping on a URL or watching a video where a footer function then becomes visible. As well a checking items off a checklist and then visualizing a footer function to close the task.

6.2.3 Activity StreamUse an activity stream segment when you want to show the history of updates for a record. Activity streams also allow your users to post information such as additional comments, work notes, files, or images. Use activity stream segment for records where update history is important. Incidents and requests that have pending activity should include the activity stream segment. However, if you are looking at a user profile record, activity stream may not be needed.

You can add an Activity stream as a segment in a Form screen or have it as a standalone screen.

The term “activity stream” may not be understood by some users. Consider renaming this tab to a term your users are familiar with, such as “Updates”, “History”, or “Notes”.

Attachment

Gal Gadot 11:35

Order45218.pdf40.24 KB

Taylor Smith 10:30

Lorem Ipsum is simply dummy text of the printing.

TS

Thu, 28 Dec




2019-01-05 12:00:00

September, 2020


32

6.2.4 Related ListsUse related lists to display related information to the record. This is great to use when you have more than 1 related list the user will need to see. The user will see the list of related lists and the count of records in each list.

If there is only one related list to show, you may want to consider using an embedded list. This will directly display the list view as a segment on the form and will save the user a tap.

6.2.5 Applet Configurations

FiltersList screens have a filter option to give users the ability to find items in the list matching criteria they define. This filter looks for records that matches the filter criteria on the records stored in the database.

Filters appear by default on any list and include all the fields defined in the card configuration (item view).

Admins can customize the filter fields by adding or removing fields, changing fields order, or selecting different picker types according to data type of the filter fields.

Consider hiding the filter to save screen space in situations where the filter does not add value.

Build an Effective Filter Configuration

When you create a new list or map, the instance creates a filter that includes the same fields selected in the card in the same order, and assigns the system default pickers according to the data types (eg: date field will show as a Start-End picker).

By using the filter configuration in Studio, admins can change field order, add or remove fields (in case they want user to have different fields than the ones included in the item view) and assign picker types which are more appropriate for the field’s intent (For example, set date field to a single date instead of a range when looking for all employees born on a specific date).

If you are looking for a way to search across multiple fields, use the keywords special filter field.

If a list includes multiple item streams or multiple segments it is likely that the default system configuration will need to be edited to provide a better clarity. Ensure your users know how to filter each item stream, which fields can be filtered



2019-01-05 12:00:00


PartsActivityDetails



2019-01-05 12:00:00

Affected CIs 0

Work Order Tasks 21

Task SLA 2

a

b

Related lists

Embedded lists



2019-01-05 12:00:00


PartsActivityDetails



2019-01-05 12:00:00

Affected CIs 0

Work Order Tasks 21

Task SLA 2

a

b

Related lists

Embedded lists

Clear

Quantity

From

$ $

To

-

$5 - $5000Price

AnyColor

Any dateDelivery date

AnyApproval Manager

Product description

9:41

Cancel ApplyFilters

September, 2020


33

across several data stream, and which fields are relevant only to a single stream.

This configuration is available in the platform using a category concept and a definition of a filter instance per data stream.

Dynamic Screen TitleUse dynamic screen names to set the screen name dynamically from a previous screen, and to use the screen header to display form’s information.

Form’s Screen Title

The screen title of the form could be used to display dynamic information that is valuable to the user or will assist with orientation.

Use this capability to display short but valuable information like: Incident number, Employee name instead of generic titles that give less value.

Avoid using fields with long text, which might not be fully visible.

Inheriting Form Previous Screens

When using grouped lists or navigations set the navigated screen header dynamically so users can keep orientation easily.

Avoid giving generic static names to screens when a dynamic name will provide additional value to the user.

In the example below, when tapping a category show the category in the screen header.

WO00010017Parent

2019-02-20 08:46:23Actual travel start

58 minutesActual travel duration

28 days 22 hours and 12 minutesDuration






Ravinia Hospital


WOT0020322New

Text 2

Unity Hospital

KX12000 Router Upgrade

NUMBERIn Progress

Opened by Inbal Litvin

Unity Hospital

Router repair or replace fan

WOT0020015In Progress

See AllMy Tasks

9:41

Work

My Schedule

Map View

Timesheet


Text 2

Lockwood Clinics

Install JK20 Infusion Pump

NUMBERNew

See AllMy Team Tasks


Ravinia Hospital


WOT0020322New

9:41

Back WOT0020322

September, 2020


34

7 Actions and FunctionsUser can perform Actions which change data, navigate to new screens, open mail, make phone calls, or open URLs.

Action Function

Use Actions to add, edit or delete records on your instance.

• An action can be generic and include multiple fields like Edit. Or be focused on a specific operation like that includes a single field. For example, a “Reject” action can include a string field where the user can input the reason for the reject. Use an overlay representation for actions which include only one string input parameter.

• Use Screen UI Policies when creating an Action Function with multiple parameters, give your users the information they need when they need it. For example, for an Edit Action add the Reject reason only if the state was changes to Rejected.

• Consider using “show refresh on the previous screen” in case the actions update a record and update is presented in the item view in the previous screen or adding a new record. If marked a “New update” indication will appear on the previous screen.

• Use signature credential if required before action submissions. You can add an Acknowledgment Message as well prior to action submission.

• Messages disrupt the user experience and should only be used in important situations like destructive actions (such as delete) or notifying users about problems. Use Confirmation and Success messages infrequently to ensure that your users take them seriously.

• Keep the number of actions limited while keeping each action focused on the needed use cases. Use conditions to limit when actions appear to reduce the number of actions show to your users at once.

September, 2020


35

7.1 Swipe Actions Location

Swipe actions allow your users to quickly perform common actions directly from the list. These actions should be for decisions that your users can make based on the limited information that appears on the list. If the user must tap into a record for more information, consider a top menu or footer action.

Swipe actions are the most common actions and are sometimes less discoverable. When creating a swipe action, consider also using the action as a top menu action or footer function to ensure your users see the action.

7.2 Footer Actions LocationUse footer actions for commonly used actions that should be easily accessible while looking at fields in the form. They are also useful when a user navigates to a form screen directly without accessing a list.

Actions that appear as a footer function should not appear in the top menu.

Associate colors to your footer functions to indicate their function. Positive colors may have a primary or secondary button emphasis. You can add up to 3 footer functions which will appear in a line. Recommended for use cases like approve, reject.

Cancel

Action 5

Action 4

Action 3

Action 2

Action 1

Default actions without icons

a

Top menu actions

Swipe actions

Footer actions

a

b

cDestructive Secondary Primary

9:41

Back My tasks

Request for Danielle Miller

$1,100|6 days ago

Approve Lenovo - Carbon X1

Request for Jamie Andersson

$2,550

Approve iMac 24in

Request for Jamie Andersson

$2,550

Approve iMac 24inReject Approve

Add Comments

Only 1 action needed use primary

Add Comments Find Part

2 primary calls to action

Cancel Submit

1 primary and 1 secondary if you needa button to not compete with the primary

Reject Comment Approve

Primary, secondary and destructive

Footer use cases

*Note: Buttons should always go from right to left.

September, 2020


36

7.4 Jump to NavigationsUse Jump to Navigations when you want the user to navigate to a related record using a parameter. Navigations can be powerful for drilling down to see further information. For example, while in a user’s profile record, having a navigation function that jumps to their manager.

When using jump to navigations, limit the level of drill downs to 3 - 4. Avoid looping the application.

7.5 Smart ButtonsSmart Buttons can be used to utilize a field’s data directly from the app. For example, a phone icon to dial a number or send an SMS or a URL link to navigate outside of the application.

7.3 Top Menu Actions LocationUse top menu actions for less frequently used actions, and on forms where you have more actions than will fit conveniently in the footer.

Top menu actions can be at the record level (on a form screen) or in a global level (on a list or form screen).

Keep the length of the top menu actions limited to 7 actions. If the top menu actions have too many actions, users must scroll to see them all. Scrolling requires extra time, and can cause users to make an unintentional choice by tapping a button.

Top menu actions a

9:41

My tasks

[email protected]




Maria DaviesManager



Megan Anderson

Jump to navigation

a

[email protected]




Maria DaviesManager



Megan Anderson

Location

Phone

URL

Email

Smart buttons

a

September, 2020


37

8 UI StylesUse UI styles to associate a color with a field value within an applet. For example, you could create a UI style to give the state field a different color for open, closed, and rejected states. Try to avoid using multiple UI styles in a single applet to provide a cleaner user experience. UI styles are intended to provide focus on a specific field within a list or form.

Keep consistency in your color decisions throughout the app. As with icons, associating specific tasks or workflows with colors helps users know when they’re not in the right place.

In areas where text appears, give your text and background a high level of contrast to accommodate both low vision and color-blind users. WCAG 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.

Avoid using too many colors. Using fewer colors and selecting colors that work well with your application branding results in a cleaner, more accessible layout.

UI style allows you to set an icon based on a field value.

UI style allows you to hide/show an item view element. For example if you use an item view which includes a divider and sometimes there is no text in the left side of the divider you can define a UI style so that the divider will not appear in such cases.

You can define a placeholder in case an image is missing. You can have a different placeholder for a missing person image and a missing device.

You can define the format of a date field. For example instead of presenting date time format show a string with business meaning based on time ago logic.

You can define the font and background color of an item view element which is not mapped to a field. For example the dot color near the word pending is changing based on the status.

Megan Anderson

Cyberdyne Inc.


INC0020470

Daniel Miller

Acme Corporation

Keyboard is brokenINC0020475

Robert Geller

Acme Corporation

Unable to log in to computerINC0020482

Megan Anderson

Cyberdyne Inc.

Computer reboots unexpectedlyINC0020491

Work in progress

Awaiting approval

Pending

Work in progress

September, 2020


38

9.1 Applet IconsConsider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users find related tasks quickly. Where text appears, ensure your text and background have a high level of contrast to accommodate both low vision and color-blind users.

Avoid using too many colors. Using fewer colors and selecting colors that work well with your application branding results in a cleaner, more accessible layout.

9.2 Navigation IconsNavigation bar icon color is determined by your application’s theme. Select an icon that best represents the actions or information presented in that part of your application. Avoid using the same icon for more than one navigation so users can quickly find what they need.

For a reference guide to icons you can use in the navigator, see the mobile icons documentation on the ServiceNow doc site.

9 IconsIcons appear in your navigation bar and applets to give your users a quick visual reference to the purpose of the applet or navigation tab. Find an icon image that best relates to the task that applet performs.

ExampleBlue = My Approvals / My Team DashboardGreen = Upcoming Shifts / Time-off Requests Red = P1 Incidents / Resolved P1 Incidents

https://docs.servicenow.com/bundle/orlando-mobile/page/administer/tablet-mobile-ui/reference/sg-mobile-icon.html

September, 2020


39

10 Using ColorKeep consistency in your color decisions throughout the app. Associating specific tasks or workflows with colors helps users know when they’re in the right place. Consider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users get to related tasks quickly.

Avoid using too many colors. Simple designs of two to three colors result in a cleaner, more accessible layout.

Color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background have a high level of contrast to accommodate both low vision and color-blind users. WCAG 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.

ExampleBlue = My Approvals / My Team DashboardGreen = Upcoming Shifts / Time-off Requests Red = P1 Incidents / Resolved P1 Incidents

September, 2020


40

11 Item ViewsItem views determine the formatting and appearance for fields in your applets. When you select a screen template when creating an applet, you are selecting the item view. Item views use JSON to determine the configuration for fields in your applet.

Modifying or creating new item view records is not recommended, however if you decide to do so, consider the following information.

• Begin by copying or reviewing an item view that most closely matches what you intend to create.

• Many item view records are not editable due to protection policies. In these cases, you can create an item view record and copy the JSON into your new record.

• Make small changes and test often.

• Remember that item view records you have modified are not upgraded if you upgrade your instance to a later patch or version.

• Validate the item view you modified on both platforms – iOS and Android.

• Item sections height is fixed. In case you use the modified item view in a horizontal item section verify all information is visible.

Studio may not recognize an item view record you have modified as a working pattern. In this case, Studio displays a warning and a link to the item view [sys_sg_item_view] record, which contains the JSON for the selected pattern. A pattern that is not recognizable may still function as expected in the mobile app but is not editable in Studio.

Robert Geller

Acme Corporation


Report issue by taking a picture or submittong a ticket

Help with an issue

Solution Consultant

Megan Anderson

Submit travel expensesCras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum duis… tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis. Nunc eu tellus tortor. Etiam at condimentum nisl, vitae sagittis orci. Donec id dignissim nunc. Donec elit ante, eleifend a dolor et, venenatis facilisis dolor. In feugiat orci odio, sed lacinia sem elementum quis. Aliquam consectetur, eros et vulputate euismod, nunc leo tempor lacus, ac rhoncus neque eros nec lacus. Cras lobortis molestie faucibus.

Service

September, 2020


41

12 Native FeaturesServiceNow apps can use your mobile devices native features to make calls, send SMS messages, and display navigation information. Use the camera on your mobile device to scan barcodes, create image attachments, or use photo search to get assistance quickly.

12.1 PhoneEnable your users to communicate using your mobile device with your apps. You can configure a quick action to communicate using your phone for calls or SMS messaging using a phone number listed in a field record.

12.2 CameraYou can configure your apps to use the camera on your user’s mobile devices. Users can use their camera to upload photos, perform image-based searches, or scan bar-codes to catalog your assets.

12.3 GeolocationUse geolocation for tracking location of your users and assets, as well as presenting location data. Location is stored on your instances using GPS latitude and longitude coordinates. Geolocation is stored on the Location [cmn_location] table on your instance. To take advantage of geolocation features, your records must have a location field that references a record on this table.

• Users need to opt in on the phone for location services.

• Geolocation can be sent as a parameter during an action. For example, when a user reports an incident, you can send the coordinates of where it was reported in the background

Cancel

Send message

Call +1 (999) 999-9999

Cancel

Record video

Open gallery

Take photo

September, 2020


42

12.4 Push Notifications• Push notifications are configured exactly like other notifications on platform

• Target notifications to specific user groups and use cases. Consider the time of day notifications are sent. Limit the amount of notifications you send to users, recommended at most one per day if non-critical.

• Notifications should be concise with a clear title and short description. The recommended length is 40-50 characters. Use words that spur action or attention for users.

• Users should be able to click on a push notification to redirect to the related record. This function uses deep linking, described in the deep link section.

• Troubleshoot notifications via the System Logs for Push Notifications. If the notification is not found in the logs, then it did not fire.

Actionable Push Notifications

When possible, use the OOB actionable push notifications provided. If you are creating custom new push actions, iOS users need to close and restart their apps.

Create buttons with short names that clearly describe the results of the action.

Actions can also contain a follow-up text response, e.g. “Reject Reason”. Only one text parameter is supported to be sent from an action on a notification.

Think carefully before providing destructive actions in a notification.

Notifications Management

The toggle to enable or disable all notifications has moved to a new page in Settings: Notifications preferences. Here, the admin can also allow users to enable and disable individual notifications. Notifications are organized via notification categories. Be sure that your notifications are in the right categories, and that they are easy to understand for the user.

Notification badge1

Assigned to you.INC00053: Keyboard broken

nowAGENT

Reject with comments

Approve

INC00078: Server ugrade requested in building A21001. Requested server is T140

Assigned to you.

AGENT

Tuesday, 6 June9:41

September, 2020


43

12.5 Siri Shortcuts• The Now app contains four default Siri shortcuts (currently not available in Agent or Onboarding apps).

• Open a chat window.

• Browse items and services.

• Open my tasks.

• Open my requests.

• Admins can enable/disable these four Siri shortcuts as well as change the target destinations. However, admins can not change the Shortcut name or create new ones.

• Users can also configure what words to trigger the actions. If an admin makes changes to the Siri shortcut configuration in the instance, users must delete and re-record their Siri shortcut for the changes to take effect.

12.6 Deep Linking• The mobile apps can be opened with record context directly from a

URL. You need to set up the URL in the correct format for this to work. See documentation for deep linking. Deep links can be provided within emails, webpages (including mobile webviews), and Virtual Agent topics.

• The mobile apps can link into other external apps. However, this requires external apps to also support this functionality.

Hey Siri open my approvals

https://docs.servicenow.com/bundle/orlando-application-development/page/app-store/dev_portal/API_reference/MobileDeepLinkGenerator/concept/MobileDeepLinkGeneratorAPI.html

September, 2020


44

14 User Acceptance TestingOnce you’ve completed the apps, you need to get feedback through UAT. You can start by setting up smaller groups of users and having them run through use-case scenarios.

Ensure there is enough data to properly test. This does not need to be on a production environment but having production data does help put the testers into real life scenarios.

Once you’ve gotten feedback and made iterations in the apps, consider deploying to a smaller but wider audience before the full deployment.

During each stage, ensure you have the user review app downloading, login, main use-case scenarios, and usability.

13 OfflineOffline Mode allows users without an internet connection to continue working from their mobile device. Administrators can control many of the aspects of this feature through system properties. For details on these properties, see Configure Offline Mode behavior on the ServiceNow doc site.

Offline more is designed for situations where users expect to be in a location with limited or no internet connection. The user must download records used during offline mode before they enter an area with limited no internet connection. The app records changes made to these records in an outbox queue. When the user returns to an area with connectivity, the changes in the outbox and synchronized with your instance.

Downloading large amounts of data can be time consuming and is not the purpose of mobile offline. When configuring offline mode, consider what information and actions a user needs while offline. You may, for example, limit the download of task records to only those tasks assigned to the user.

Admins can control many of the aspects of this feature through system properties.

For details on these properties, see Configure Offline Mode behavior.

As of Orlando, offline is for Agent only.

Offline Mode

Last login: 2018-02-19 23:07:30

Sarah Milton

Settings9:41

Settings

Offline ModeOffline Mode

10OutboxItems waiting to synched

Offline Mode

Toast confirmation

Download Data

Offline Cache

Cached data size: 23.31 MBLast cached: 45 minutes agoExpires: about 23 hours

b

c

a

KX12000 Router UpgradeWOT000015


2019-01-05 12:00:00

Work in progress

Action saved offline

9:41

Settings Offline Mode

Download data for offline use

Enable offline mode

Outbox shows a users performed offline actions

https://docs.servicenow.com/bundle/orlando-mobile/page/administer/tablet-mobile-ui/task/sg-configure-offline-mode.html

https://docs.servicenow.com/bundle/orlando-mobile/page/administer/tablet-mobile-ui/task/sg-configure-offline-mode.html

September, 2020


45

ACME CORPORATION

15 Branding

15.1 GeneralUse custom branding to create a visually distinct version of ServiceNow mobile apps that you can tailor to your unique company identity. Branding available with iOS and Android include an app icon, app name, and a branded splash screen for your ServiceNow mobile applications. This is a premium service offered by ServiceNow, please contact your account team for pricing details.

15.2 Apple iOS ServiceNow’s mobile publishing program complies with Apple’s suggested practice for custom app releases and gives you a guided path to achieve your branding goals. For an iOS deployment you will need to have signed up for Apple’s VPP program and have a valid Apple Customer DEP ID. This will enable ServiceNow to publish an app to your Apple Business Manager (ABM) store on your behalf. Apple then allows you to distribute the app to your employees via MDM or through store redemption codes.

15.3 Google Android ServiceNow’s white label program complies with Google’s suggested practice for custom app releases and gives you a guided path to achieve your branding goals. For a Google deployment using push notifications, you will need to have signed up for Google Firebase and have a Firebase token. ServiceNow will provide a branded APK. Google allows you more flexibility to distribute the app to your employees via MDM or through any other internal method you choose.

September, 2020


46

16 IntegrationsThe mobile studio or platform does not have additional integration capabilities, however, can leverage what already exists in platform through Integration Hub.

Furthermore, when defining data items, scripted data items can be used to run server-side script in order to pull together data. This can be stored in ServiceNow tables or in remote tables.

17 MigrationAll mobile content is contained within scoped applications, which are automatically associated with update sets. Update sets can be migrated between instances using several methods. For details on update set transfers, see the update set transfers documentation on the ServiceNow doc site.

18 DeploymentServiceNow does have best practices for app deployments. Best practices and guidance can be found on the Customer Success Center.

19 Security

19.1 GeneralServiceNow Agent app consists of the ServiceNow server instance and the native apps for iOS and Android. The mobile client apps communicate over a wireless connection with the server and pull live data for the end user. The application can be pulled, dynamically configured, and distributed using MDM (more information available in MDM section).

The ServiceNow apps conform to the highest security standards and goes through regular Penetration testing.

Full details on mobile security practice can be found in the ServiceNow doc site under Device Security for ServiceNow Mobile.

Some components of ServiceNow mobile, such as image search and voice search, require that data be sent to a third party to be interpreted. Information on these processes can be found in the documentation for those features.

https://www.servicenow.com/content/dam/servicenow-assets/public/en-us/doc-type/success/quick-answer/mobile-app-deployment.pdf

https://www.servicenow.com/content/dam/servicenow-assets/public/en-us/doc-type/success/quick-answer/mobile-app-deployment.pdf

https://docs.servicenow.com/bundle/orlando-mobile/page/administer/tablet-mobile-ui/concept/sg-mobile-security.html

September, 2020


47

19.2 Working with MDM and MAMInternal distribution of the ServiceNow Mobile app is supported through all major EMM vendors.

Customers are able to pull the app for iOS or Android from the Apple App store and Google Play respectively, dynamically configure the apps to point to the correct ServiceNow instance, and distribute using the EMM hub. This way, the MDM can fully manage the app as part of a customer portfolio.

Note: ServiceNow does not currently distribute the IPA files, or any other unpublished app to customers as it breaches the Apple Enterprise Developer License Agreement.

In Paris, there are apps available in the app store that support the Microsoft Intune and Blackberry Dynamics. These apps allow your organization to apply MDM/MAM policies from your console directly on these apps.

In the Mobile branding and publishing process, organizations can select the Intune SDK or Blackberry SDK to be embedded in the app. In the future, there may be more options.

Documents

Building Mobile Apps with ServiceNow · 2020. 7. 12. · from your instance. 3.2 Now Mobile Now Mobile allows employees to find answers and get stuff done across IT, HR, Facilities,