Building Mobile Apps with ServiceNow - Paris, Sep. 2020

Page created by Craig Henderson
 
CONTINUE READING
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

Paris, Sep. 2020
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

Table of Contents
1 Purpose of the document  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 4
2 How to use this document  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 4
3 Native mobile clients  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 4
   3.1 Mobile Agent  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 5
   3.2 Now Mobile  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  5
   3.3 Onboarding  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  5
4 Navigation tab bar  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 6
   4.1 Naming conventions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  6
   4.2 Ordering  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  6
5 Applet launchers  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 7
   5.1.1 Applet launcher concept  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  7
   5.1.2 Applet launcher structure  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  7
   5.1.3 Applet launcher header  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  8
   5.1.4 UI sections  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  8
   5.1.5 Icon section/Navigation UI section  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  9
   5.1.6 Item section  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  9
   5.1.7 Chart section  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 11
   5.1.8 Media section  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .13
   5.2.1 Campaigns  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 13
   5.2.2 Global search .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .14
   5.2.3 Applet launcher quick actions .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .15
   5.2.4 Applet launcher examples .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 16
6 Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
   6.1.1 List  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  23
   6.1.2 Item stream segments on list  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  24
   6.1.3 Item streams on list  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 24
   6.1.4 Grouped list  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  25
   6.1.5 Employee directory  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 25
   6.1.6 Calendar  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  26
   6.1.7 Map  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  26
   6.1.8 Chart  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  27
   6.1.9 URL  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  27
   6.2.1 Form  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 28
   6.2.2 Screen field types  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  30
   6.2.3 Activity stream  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .31
   6.2.4 Related list  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 32
   6.2.5 Applet configurations  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  32
7 Actions and functions  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  34
   7.1 Swipe actions location  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  35
   7.2 Footer actions location  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  35
   7.3 Top menu actions location  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  36
   7.4 Jump to navigations  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 36
   7.5 Smart buttons  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  36

September, 2020                                                                                                                    2
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

Table of Contents (Continued)
8 UI styles  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  37
9 Icons  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  38
    9.1 Applet icons  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  38
    9.2 Navigation icons  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  38
10 Using color  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  39
11 Item views  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 40
12 Native features  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 41
   12.1 Phone  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .41
   12.2 Camera  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .41
   12.3 Geolocation  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .41
   12.4 Push notifications  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  42
   12.5 Siri shortcuts  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  43
   12.6 Deep linking  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  43
13 Offline  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  44
14 User acceptance testing  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  44
15 Branding  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  45
   15.1 General  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  45
   15.2 Apple iOS  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  45
   15.3 Google Android  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  45
16 Integrations  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 46
17 Migration  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  46
18 Deployment  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 46
19 Security  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  46
   19.1 General  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 46
   19.2 Working with MDM and MAM  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  47

September, 2020                                                                                                               3
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

1 Purpose of the document
The 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 document
This 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 Clients
ServiceNow 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                                                                   4
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

                        3.1 Mobile Agent
                        ServiceNow 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                   • Coordinate with co-workers
                          • Track or catalog assets on           • Manage approvals
        Agent                your instance                        • View your work schedule

                        3.2 Now Mobile
                        Now 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:

                          • Submit and view requests and         • Upload images and attachments
                             issues                                  to ServiceNow records
                          • Submit approvals                     • Search people, knowledge
        Mobile
                          • Edit their profile                      articles, and catalog items

                          • View a personalized home page        • Request help from Agent Chat

                          • View and complete tasks

                       3.3 Onboarding
                       ServiceNow® 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:

                          • Complete onboarding to-dos            • Chat with an agent

    Onboarding            • View relevant media sections          • Receive notifications
                          • View relevant banners defined by        from your instance.
                            your administrators
September, 2020                                                                                       5
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

4 Navigation Tab Bar
The navigation bar displays multiple icons, called navigation tabs.
Configure these tabs to navigate to applet launchers or an applet          Work   Inventory   Articles   Notification   Settings
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 Conventions
Give 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 Ordering
Ordering should be determined by level of importance top to bottom
and left to right.

September, 2020                                                                                                              6
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

5 Applet Launchers
5.1.1 Applet Launcher Concept
With 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 Structure
Applet 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                                                                7
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

5.1.3 Applet Launcher Header
The header of the applet launcher defines how the title of the screen
                                                                                          a Home header
appears and what information is shown in the header. The available
                                                                                              9:41                                                                 a     Name
header types are Home and Generic. Review the two header types to                                                     Hello Danielle                               b     Profile
determine which best suits the content you want to present to your users.                             Search for Services, Articles, or People                     c     Search

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
                                                                                          b Generic header type
users profile. If the header type is Generic for example a store you can
                                                                                              9:41                                                                 a     Title
add a shopping cart icon and navigate to the shopping cart.                                                               People                                   b     Action

                                                                                                      Search for services, articles, or people                     c     Search

Home Header                                                                                                                                                        c     More
                                                                                                                                                                         actions

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 Sections
UI sections display applets and record information on your applet launcher             9:41

screen. The available UI section types are Chart, Icon/navigation, Item,                                       Hello Danielle

                                                                                              Search for services, articles, or people
Media and Campaign.
                                                                                       Diversity, inclusion and
• Keep consistency in how you use section types in your app. For example, if          belonging
                                                                                                                                                                       Media
   you use icon sections to access record information, do not use those icon           Read Our
                                                                                       Journey

   sections to initiate actions. If you use horizontal card sections for actions, do
                                                                                       How can we help you?
   not use those sections to show record information.
                                                                                                                                                                       Icon section
• Limit scrolling where possible. Prioritize the icons, and information your             Ask a          Request IT     Knowledge          HR            Label 5
                                                                                         question        assistance       base        information

   users need most and place those items towards the top of the page. Limit
   vertical item sections to three or four items.                                      Recommended for you                                    See All

                                                                                              New                                                    New

• Group items within a UI section contextually. For example. Icons relating to          Submit travel expenses                                   Travel
                                                                                         Lorem Ipsum is simply dummy text of the                  Lorem                Item section
   incident management are easier to find when placed in the same UI section.            printing and typesetting industry.

                                                                                                  By Monica Geller                                       Text 2

• 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          Services      Information     For Me   Notifications   Settings

   of where in the launcher the user scrolls.
• Limit your applet launcher to 5 or fewer sections.
•U
  se 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.

September, 2020                                                                                                                                                             8
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

5.1.5 Icon Section/Navigation UI Section
Icon/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                                                                           Vertical
• If the data is actionable, take advantage of the “count” feature so the
                                                                                              My Incidents                       8
   user knows how many records are in the drill down. It is great for task
   information as well as larger datasets.
                                                                                              Grouped Incidents              15

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       Horizontal

   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                  My       Grouped     My WOT   Grouped       Task Map
                                                                                      Incidents   Incidents             WOT
   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.

September, 2020                                                                                                                  9
Building Mobile Apps with ServiceNow - Paris, Sep. 2020
Building Mobile Apps
with ServiceNow

Vertical
• Use vertical sections when you want to display a limited number of
                                                                             My team                                       See All
   records within the applet launcher. Vertical item sections are good
                                                                                       Engineering
   for records like critical tasks where you want the user to see details
                                                                                       Erica Martin
   as soon as they land on the page                                                    Associate Software Engineer

• Vertical sections display one or more records at a time. Users can                  Engineering

   view more records by scrolling vertically.                                          Jennifer Bowers
                                                                                       Software Engineer
• Avoid overwhelming your users with too many records in a section.
                                                                                       Engineering
   If your users primarily use tablet mobile devices, okay to show more
                                                                                       Christine Glazer
   records in the section.                                                             Senior Software Engineer

• 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
                                                                             Recommended for you                           See All
   items you want the user to see.
• Horizontal item sections can be used to create a menu for core app            Service                                        Help article

   purposes. For example, use these sections for “help with an issue”,        Submit travel expenses                        Travel policy
                                                                              Cras quis nulla commodo, aliquam lectus       Cras quis nulla commodo, al
   “Create case” or “Book Conference Room.”                                   sed, blandit augue. Cras ullamcorper          sed, blandit augue. Cras ulla
                                                                              bibendum bibendum. Duis tincidunt urna        bibendum bibendum. Duis ti
                                                                              non pretium porta. Nam condimentum            non pretium porta. Nam cond
• To enable a horizontal item section for core app purposes, a new           vitae ligula vel ornare. Phasellus at         ligula vel ornare. Phasellus a
   table needs to be created that holds the information. You then be          semper turpis. Nunc eu tellus tortor.
                                                                              Etiam at condimentum nisl, vitae sagittis
                                                                                                                            Nunc eu tellus tortor. Etiam a
                                                                                                                            nisl, vitae sagittis orci. Done
   able to create a data item and list view of the new table. “List Item”     orci. Donec id dignissim nunc. Donec elit     nunc. Donec elit ante, eleifen
                                                                              ante, eleifend a dolor et, venenatis          venenatis facilisis dolor. In fe
   Navigation functions can be used to enable the drill down into the         facilisis dolor. In feugiat orci odio, sed    sed lacinia sem elementum q
                                                                              lacinia sem elementum quis. Aliquam           consectetur, eros et vulputa
   mobile enabled service portal form.                                        consectetur, eros et vulputate euismod,       nunc leo tempor lacus, ac rh
                                                                              nunc leo tempor lacus, ac rhoncus neque       eros nec lacus. Cras lobortis
                                                                              eros nec lacus. Cras lobortis molestie        faucibus.
                                                                              faucibus.

September, 2020                                                                                                               10
Building Mobile Apps
with ServiceNow

5.1.7 Chart Section
Use chart sections to display time series, single score reporting charts,         9:41
and performance analytics scores. Charts give your managers or owners
                                                                                                           Hello Kelly
indications on trends or items which require their attention.
                                                                                          Search for services, articles, or people
• 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
                                                                                  My Team Incidents KPIs
   can tap to access the chart applet using a navigation function.
                                                                                    All incidents per team & priority
• Use a single score chart section to display reports and performance
                                                                                    1200
   analytics scores.
• A single score chart section supports horizontal and vertical view. Use           800

   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        0
                                                                                            Team 1      Team 5     Team 9       Team 13

   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.                                                            My Team WOTs KPI

                                                                                    WOTs per priority
• Add a section title if the charts are not self-explanatory, or you need to
   group multiple charts under a single title.
                                                                                                                            Critical (115)
                                                                                                                            Low (105)
• You can configure report section so that a user can tap a score to                                                       Moderate (85)

   display its records. From there, users can see additional information and                                                High (40)
                                                                                                                            Planning (5)

   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      My
                                                                                   WorkTeams   Dashboards
                                                                                          Inventory Articles Notification                    Settings

   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:                                         Single score vertical chart section
        • Use horizontal sections to take advantage of screen space.
                                                                                  4%
                                                                                  % of cases resolved in first response
        • Place multiple charts in a chart section. These charts will appear
           side by side in wider format screens.
                                                                                 Single score horizontal chart section
                                                                                    Real-time

                                                                                    100
                                                                                    My Team Incidents
                                                                                          3% Jul 2020

September, 2020                                                                                                                                 11
Building Mobile Apps
with ServiceNow

• 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.

 9:41                                                                       9:41
  All incidents per team & priority

   1200                    Hello Kelly                                                             Hyderabad

        Search for services, articles, or people
   800
                                                                            Incidents KPIs

                                                                             Open incidents per team
    0
                                                                              1200
          Team 1       Team 5          Team 9       Team 13

                                                                              800

 My Team WOTs KPI
                                                                               0
  WOTs per priority
                                                                                     Team 1    Team 5          Team 9       Team 13

                                                Critical (115)
                                                Low (105)
                                                Moderate (85)               WOTs KPI
                                                High (40)
                                                Planning (5)
                                                                             Breached SLAs

                                                                              1200

                                                                              800

 Other Teams Dashboards

                                                                               0

 Amsterdam         San Diego        Hyderabad                                10:15 AM                                                        Jun 25

                                                                             33%                            10                               33%
                                                                             My team incidents              Recently solved                  My Team Incidents

  Work         Inventory        Articles    Notification         Settings    Work5(35%)Inventory
                                                                                         Jul 30         Articles    Notification      Settings

September, 2020                                                                                                                                                  12
Building Mobile Apps
with ServiceNow

5.1.8 Media Section
Media 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.
                                                                                Welcome to ServiceNow
• Media sections can display a single line header, and up to two lines of
                                                                                We're delighted you're joining our diverse and
   additional to text. You can define a navigation function and the text to     talented team.

                                                                                Learn more >
   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
                                                                                 a Video
   of your applet launcher if further branding is desired

5.2.1 Campaigns
Use 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         b Image

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.                                        Get The App!
                                                                                      With Now Mobile, employees can get stuff done from a
                                                                                      modern mobile app powered a the Now Platform.
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.                                                                         c Text

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                        Happy Pride Day!
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.

September, 2020                                                                                                                              13
Building Mobile Apps
with ServiceNow

5.2.2 Global Search
Configure your application launchers with a global search bar to
                                                                             9:41
give your users the ability to quickly find people, catalog items, and
knowledge base articles within your mobile applications. The search bar             Search for services, article…              Cancel

appears in the header of your application launcher.
                                                                              People         Services & Items       Articles

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.
                                                                                            Search filters
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.

September, 2020                                                                                                                   14
Building Mobile Apps
with ServiceNow

5.2.3 Applet Launcher Quick Actions
Quick 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         a Quick actions with icons

of the applet launcher page. This button remains on the bottom of the
                                                                                       Action 1
page regardless of where a user scrolls to remain easily accessible. Quick
actions are best used for tasks users need to preform regularly.                       Action 2

• In cases where only 1 action is configured in the Quick Actions menu, you           Action 3

   can define a specific icon to be displayed.
                                                                                       Action 4

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

• Keep consistency of quick actions on your Applet Launchers.

                                                                               b Quick actions without icons

                                                                                                  Action 1

                                                                                                  Action 2

                                                                                                  Action 3

                                                                                                  Action 4

                                                                                                  Action 5

                                                                                                  Cancel

September, 2020                                                                                                15
Building Mobile Apps
with ServiceNow

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                                                    16
Building Mobile Apps
with ServiceNow

Example 2

  9:41

                      Hello Brandon

         Search for services, articles, or people

                                                                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,
  To-do items                                         See all   so no call to action appears on
                                                                the image.
  Upload profile photo
     Overdue 1 day                                              Use a vertical item section if you
                                                                want the user to see all his to do
                                                                items on the screen.
  Watch security compliance video
     Due in 2 days

  Open requests

    Work in progress                              REQ4929301

  Apple iMac

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

              Timesheets

   Services         My Stuff      Notifications       Label

September, 2020                                                                                 17
Building Mobile Apps
with ServiceNow

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                                          18
Building Mobile Apps
with ServiceNow

Example 4

  9:41

                         Hello Helen

          Search for services, articles, or people

                                                                   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,
  New topics just for you                                          so no call to action appears on
  Discover                                                         the image.

  The value of the known issue database-                           Use a vertical item section to show
  with Gil Pantofaro
                                                                   the user the topics related to him. A
     4542 Views                                                    title is not added to the item section
                                                                   as the title of the media section
          By Ariel Shadmon
                                                                   provides the title for the screen.

  Wellness Newsletter - Healthy Tips and
  Recipes
     4,757 Views

          By Cosmin Irimia

  Security compliance video

     4542 Views
   Work     Inventory        Articles   Notifications   Settings

          By Ariel Shadmon

September, 2020                                                                                     19
Building Mobile Apps
with ServiceNow

Example 5

  9:41

                            Work

  My Tasks                                              See All                          Create a visual view of the tasks
                                                                                         that the user should act upon by
         In Progress                   WOT0020015              In Progress               using an item section in the top.
   Router repair or replace fan                             KX12000 Router Upgrade
   Unity Hospital                                           Unity Hospital

           Opened by Inbal Litvin                                  Text 2

  My Team Tasks                                         See All

         New                           WOT0020322              New

   Upgarde sensors and firmware                             Install JK20 Infusion Pump
   Ravinia Hospital                                         Lockwood Clinics

           Opened by Mary Miller                                   Text 2

             My Schedule                                                                 Additional applets are presented
                                                                                         using a vertical item section.

             Map View

             Timesheet

   Work        Inventory    Articles    Notifications   Settings

September, 2020                                                                                                         20
Building Mobile Apps
with ServiceNow

Example 6

  9:41

                        Hello Steve                                             Brand the app and tailor to your
                                                                                unique company identity.
         Search for services, articles, or people

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

  Back to the office
  Now employees can get back saftly with the mobile app

            My approvals                               2                        Use a vertical icon section with
                                                                                count to show the user clearly
                                                                                his relevent applets. Presenting
            My requests                                1                        the count will help him realize if
                                                                                he should navigate to the list for
                                                                                additional detials.
  COVID-19 team health status                                                   •   In this example, a title for the
                                                                                    icon section was not added to
   10:15 AM
                                                                                    keep a clean view.
   33%                          39                          25
                                                                                KPIs can provide an informative
   Sick employees               In quarantine               Returning to work
                                                                                picture, consider using them not
         2(8%) May 5
                                                                                only for mangers use cases.
  For you        Team       Services     Articles    More

  Get emergency help                                See all

September, 2020                                                                                                 21
Building Mobile Apps
with ServiceNow

Example 7

  9:41

                        Team                                    Brand the app and tailor to your
                                                                unique company identity.

  Dashboard by team location                                    Create a dashabord to provide an
                                                                overview of your team.

                                                                Provide drill down to additional
                                                                dashabords views such as team
      TLV         AMS              SD              HYD
                                                                location.

  Team availability

   Ordered by status
                                                                Use a pie to provide a clear
                                                                overview, tapping on the pie will
                                          Available -
                                          Working (82)          allow the users to see the actual
                                          Unavailable -         records and take actions if needed.
                                          Sick Leave (32)

                                          Unavailable -
                                          Other time off (30)

  Reported cases

   Reported COVID-19 cases by day

    1200

    800

  For you     Team      Services        Articles         More

     0

September, 2020                                                                                22
Building Mobile Apps
with ServiceNow

6 Applets
Applets 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 List
Use a list to provide a list of records. Lists display in a card format, showing a
                                                                                           Work in progress                         WOT0020015
limited selection of the information in the record.
                                                                                         KX12000 Router Upgrade
Carefully consider what record data is important to present on the list                  Cyberdyne Inc. 2019-01-05 12:00:00
                                                                                         2200 Powell Street, San Francisco, CA
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              On hold                                  WOT0050019

number of records on your lists on the same screen. When you have                        RT1000 Router Replacement
determined which fields, you want on your list, select an item view that best            Cyberdyne Inc. 2019-01-08 09:00:00
                                                                                         2200 Powell Street, San Francisco, CA
displays that information.
                                                                                           Assigned                                 WOT0050022
List screens have a filter option to give users the ability to find items in the list
                                                                                         Server T4100 floor B1.930 down
matching criteria they define. This filter is done on the local device and filters
                                                                                         Cyberdyne Inc. 2019-01-08 09:00:00
only the records retrieved based on the item view fields. Consider hiding the            2200 Powell Street, San Francisco, CA

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 item parameters
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.             Work in progress                       WOT0020015
For example, it can be a QR barcode scan or date field Other examples                       KX12000 Router Upgrade
include using an input on a list of incidents allow the user to select attributes           Cyberdyne Inc. 2019-01-05 12:00:00
                                                                                            2200 Powell Street, San Francisco, CA
such as severity, priority, group and more. Note that lists containing large
                                                                                            Company name | date                         Number
results can impact performance. Consider using data item conditions in
addition to the user input to limit list sizes.                                          Short description

The architecture of a list view is extremely flexible and provides many                  Status                                     Address

configuration options. Please see below.

September, 2020                                                                                                                            23
Building Mobile Apps
with ServiceNow

6.1.2 Item Stream Segments on List
A list can be made up of multiple item stream segments. You can use             Item Stream Segments on List
different segments to convey different sections to the user. For instance,
“open” cases as the first segment and “closed” cases as the second.                          Open           Closed

However, it is important to note that if using a vertical applet count, the        Work in progress               INC0020470

count only displays the numbers of the first segment.                            Performance degradation - low disk
                                                                                 space
Segments act as a tabbed interface to display different types of                 Cyberdyne Inc.

information in your list screen. Use segments to organize information into           Megan Anderson

related sections, which help your users find what they need quickly. A
                                                                                   Awaiting approval              INC0020475
list may contain any number of segments. Only three segment titles can
                                                                                 Keyboard is broken
appear on your list screen at once. Avoid a negative performance impact          Acme Corporation
and provide a cleaner user experience by limiting to three or fewer                  Daniel Miller

segments.
                                                                                   Pending                        INC0020482

6.1.3 Item Streams on List                                                       Unable to log in to computer
                                                                                 Acme Corporation

A list or list segment can be made up of multiple item streams. An item              Robert Geller

stream can have a separate data item and master item. Therefore, you
                                                                                   Work in progress               INC0020491
can display multiple tables/views in one list. For example, “My To Do’s”
                                                                                 Computer reboots unexpectedly
can include Approvals, Tasks, and assigned cases. The sort & order of            Cyberdyne Inc.
the list is configured on the field “interleave order”. Note, Studio does not        Megan Anderson

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         Item Streams on List

tasks, etc.).
                                                                                   1 - Critical                 WOT000074125

                                                                                 KX12000 Router Upgrade
                                                                                 2020-12-05 12:00:00

                                                                                   Work in progress               INC0020470

                                                                                 Performance degradation - low disk
                                                                                 space
                                                                                 Cyberdyne Inc.

                                                                                     Megan Anderson

                                                                                   Pending                        INC0020482

                                                                                 Unable to log in to computer
                                                                                 Acme Corporation

                                                                                     Robert Geller

                                                                                   2 - High                     WOT000074125

                                                                                 Wireless access is down
                                                                                 2020-01-08 07:30:00

September, 2020                                                                                                         24
Building Mobile Apps
with ServiceNow

6.1.4 Grouped List
Use 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 Directory
Employee directory applets
typically provide a list of
employees, customers, or other
contacts, but are not limited to
                                         9:41
user records. Employee directory
                                                         Employee directory
displays information from a record              Search for people
                                                                                                         Megan Anderson
along with an icon or image.                                                                                   Solution Consultant
                                         My manager                                 See All                      Customer Support      Smart buttons
• Use functions to give your users                                                           Email
                                                     Maria Davies
                                                                                              megan@servicenow.com
                                                                                                                                     a Email
   the option to communicate using                   Director of Customer Support

                                                                                              Business Phone
   your mobile device. You can                                                                +1 999-555-1212
                                                                                                                                       Phone
                                         Title                                      See All
   configure functions to enable                                                              Location
                                                                                                                                       Location
                                                     Annie Williams                           2225 Lawson Lane, Santa Clara, CA
   phone calls, email, and SMS                       Senior Solution Consultant

   messaging.                                                                                 Manager
                                                                                              Maria Davies
                                                     Megan Anderson
• Add actions to your employee                      Solution Consultant                      LinkedIn
                                                                                                                                       URL
                                                                                              https://www.linkedin.com/megan
   directory to provide options
                                                     Andrew Richardson                        Private Home Phone
   like navigation to an employee                    Solution Consultant                      +1 999-991-0001

   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.

September, 2020                                                                                                                                   25
Building Mobile Apps
with ServiceNow

6.1.6 Calendar
Use a calendar applet to provide a list of time sensitive
                                                                      2018                       August 2018                 Sep
information in a calendar format, such as holiday schedules or         M           T        W           T      F       S       S

scheduled tasks. Users can see a calendar view with indicators        29           30       31          1     2        3       4

                                                                       5           6         7          8     9        10      11
for dates that relate to your records. You can see information        12           13       14          15   16        17      18

on these records in a card view interface below the calendar.         19           20       21          22   23        24      25

                                                                      26           27       28          29   30        31      1
• You can configure swipe actions on the card items below your
                                                                       2           3         4          5     6        7       8
   calendar to access quick actions like deleting a record or
                                                                           Security Training
   change its state.                                                       Event       Meeting
                                                                                                             Decline        Accept       a Swipe
                                                                                                                                            actions

• You can configure top actions in the calendar applet for more      11:00
                                                                      12:00
                                                                                   Setup the configuration
                                                                                   Work Order Task

   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 Map
Use 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                                                  6.1.8
                                                                                                               8     Map
                                                                                                                                     a Multiple pin
   location from the Locations (cmn_location) table.                                                3
                                                                                                                                        grouping

                                                                                                                                     b Single pin
• 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
                                                                                                                                     c Item
   that only the most relevant information displays on your maps.                                                                       card view

September, 2020                                                                                                                               26
Building Mobile Apps
with ServiceNow

6.1.8 Chart
Use a chart applet to give your users access to pre-configured mobile
                                                                                 9:41
dashboard views for reports and analytical data on their mobile device.
Chart applets display reports and performance analytics widgets charts.
                                                                                 All incidents per team & priority
• You can configure charts to link to lists, so your users can tap on a chart
                                                                                 Tap the sections to view details
   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.
                                                                                          1000

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

                                                                                          750
6.1.9 URL
Use a URL applet to open a URL from within a ServiceNow mobile

                                                                                 Axis Y
application. Configure relative URLs to direct to pages within the
                                                                                          500

ServiceNow platform, such as a service portal pages or knowledge
base articles. Configure an external URL such as your company’s
commercial site.
                                                                                           0
                                                                                                 Team A        Team B       Team C          Team D
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.                                          Critical           High           Moderate                    Low

Use native instead of web pages when possible. Web pages are not
necessarily designed for use on mobile devices and may not provide the             Work            Inventory     Articles    Notification      Settings

best experience for your mobile users.

September, 2020                                                                                                                                      27
Building Mobile Apps
with ServiceNow

6.2.1 Form
Use form applets to display the content of a single record. You can              Work in progress                        WOT0020015

configure functions on form applets to allow users to make edits and take      KX12000 Router Upgrade
                                                                               Cyberdyne Inc. 2019-01-05 12:00:00

actions. Form screen supports top menu functions, footer functions, and        2200 Powell Street, San Francisco, CA

                                                                                                                                         a   Segmented
smart buttons.                                                                      Details          Activity          Related Lists
                                                                                                                                             control

                                                                               Parent
                                                                                                                                         b
You can configure access to forms directly from an applet launcher icon        WO00010017
                                                                                                                                             Navigation
                                                                                                                                             to Parent

or navigation bar tab, or as a secondary screen in a list, map, or calendar.   Location
                                                                               2200 Powell Street, San Francisco, CA
                                                                                                                                         c   Smart button

Use a form as a secondary screen to provide record detail on a specific
                                                                                        Use Part                Close Complete           d   Footer actions
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
                                                                                    Work in progress                                     WOT0020015
   interface to display different types of information in your form screen
                                                                                KX12000 Router Upgrade
   help to filter and organize information. A form applet may contain any       Cyberdyne Inc. 2019-01-05 12:00:00
   number of segments.                                                          2200 Powell Street, San Francisco, CA

  - The Android version of the apps display up to three segment titles on                Details                     Activity        Related Lists

    a form screen at once. Additional screens can be access by scrolling
    horizontally.                                                                          TS      Taylor Smith                                 10:30

  - The iOS version of the apps can display up to five segment titles                  Lorem Ipsum is simply dummy text of the
                                                                                          printing.
    on a form screen at once. If there are more than five segments, a
    “More” segment displays to display the remaining segments. Limit the                                          Thu, 28 Dec
    number of segments to improve usability. Wider segments are easier              Attachment
    to tap.
                                                                                                   Gal Gadot                                    11:35

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

September, 2020                                                                                                                                    28
Building Mobile Apps
with ServiceNow

Form screens can include segments from the following types: activity         9:41
stream, related lists, embedded List, details screens.
                                                                              Back                    My tasks
• A form header can display an item view.
                                                                                Work in progress                           WOT0020015
• The header item view can act as a navigation button. Use this feature
                                                                             KX12000 Router Upgrade
   in forms to navigate back to a parent record. When configuring your       Cyberdyne Inc. 2019-01-05 12:00:00
   header for this purpose, be sure to include the parent record ID and      2200 Powell Street, San Francisco, CA

   indication that navigation is available.                                          Details           Activity          Related Lists

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

  - In a home applet launcher, you can configure the employee image to
                                                                             Location
     navigate to a form record displaying the user profile.                  2200 Powell Street, San Francisco, CA

  - Configure an entry in an item section to navigate to a form.             Actual travel start
                                                                             2019-02-20 08:46:23
  - Configure an option in an employee profile navigate to the
  employee’s manager profile.                                                Actual travel duration
                                                                             58 minutes
• A form can be standalone or be navigated from a list, map, calendar
                                                                             Duration
   screen. In case the form is not standalone, the item view which appears   28 days 22 hours and 12 minutes
   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                       Use Part                   Close Complete

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

September, 2020                                                                                                                       29
Building Mobile Apps
with ServiceNow

6.2.2 Screen Field Types
Use screen fields to improve the usability of your form details screen.
                                                                                     a Checklist
Keep your form screen focused. Do not overload your form with more
                                                                                              Have user try accessing a different
information than your users need to perform their tasks. If many screen                       website

fields are necessary, consider dividing the content into different forms or                   Have user try accessing another
segments.                                                                                     browser

Use Screen UI Policies when showing fields on the details screen, give your                   Have user try going online and offline

users the information they need when they need it. For example, show
Reject reason only if the state is Rejected.
                                                                                     b Attachment
• Checklist
  - Checklists are a platform component that will also render in the app.               My driver license

     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            c Video

     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.                                              d Image

• Image
  -U
    se 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.
  -U
    se an HTML field when need to add information to a screen based
   on an HTML field within your instance. The component works best with              e HTML
   limited information as the height of the HTML field is limited. Style
                                                                                        Relocation Agreement
   your HTML content to match the style of the app to have a coherent                   Lorem Ipsum is simply dummy text of the printing
                                                                                        and typesetting industry. Lorem Ipsum has been the
   design.                                                                              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.

September, 2020                                                                                                                                   30
Building Mobile Apps
with ServiceNow

  - 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 Stream
Use an activity stream segment when you want to show the history
                                                                                Work in progress                        WOT0020015
of updates for a record. Activity streams also allow your users to post
                                                                              KX12000 Router Upgrade
information such as additional comments, work notes, files, or images.        Cyberdyne Inc. 2019-01-05 12:00:00
Use activity stream segment for records where update history is               2200 Powell Street, San Francisco, CA

important. Incidents and requests that have pending activity should                Details              Activity      Related Lists
include the activity stream segment. However, if you are looking at a user
profile record, activity stream may not be needed.
                                                                                   TS    Taylor Smith                         10:30

You can add an Activity stream as a segment in a Form screen or have it
                                                                                  Lorem Ipsum is simply dummy text of the
as a standalone screen.                                                           printing.

The term “activity stream” may not be understood by some users.
                                                                                                   Thu, 28 Dec
Consider renaming this tab to a term your users are familiar with, such as
                                                                                Attachment
“Updates”, “History”, or “Notes”.
                                                                                         Gal Gadot                             11:35

                                                                                             Order45218.pdf
                                                                                             40.24 KB

September, 2020                                                                                                                   31
Work in progress                      WOT0020015

                                                                                                                                KX12000 Router Upgrade
                                                                                                                                Cyberdyne Inc. 2019-01-05 12:00:00
                                                                                                                                2200 Powell Street, San Francisco, CA

Building Mobile Apps                                                                                                                  Details          Activity         Related Lists

with ServiceNow                                                                                                                 Affected CIs                                       0    a Related
                                                                                                                                                                                           lists
                                                                                                                                Work Order Tasks                                   21

                                                                                                                                Task SLA                                           2

6.2.4 Related Lists
Use related lists to display related information          Work in progress                        WOT0020015
                                                                                                                                    Work in progress                      WOT0020015
                                                        KX12000 Router Upgrade
to the record. This is great to use when you            Cyberdyne Inc. 2019-01-05 12:00:00
                                                                                                                                KX12000 Router Upgrade
                                                        2200 Powell Street, San Francisco, CA                                   Cyberdyne Inc. 2019-01-05 12:00:00
have more than 1 related list the user will need                                                                                2200 Powell Street, San Francisco, CA

                                                             Details          Activity          Related Lists
to see. The user will see the list of related lists                                                                                    Details         Activity            Parts

                                                                                                                a Related
and the count of records in each list.                  Affected CIs                                       0
                                                                                                                   lists                                                                b Embedded
                                                                                                                                                                                           lists
                                                        Work Order Tasks                                   21

If there is only one related list to show, you may
                                                        Task SLA                                           2

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.
                                                          Work in progress                        WOT0020015

                                                        KX12000 Router Upgrade

6.2.5 Applet Configurations                             Cyberdyne Inc. 2019-01-05 12:00:00
                                                        2200 Powell Street, San Francisco, CA

                                                             Details           Activity            Parts

                                                                                                                b Embedded
Filters                                                                                                            lists

                                                                                                                            9:41
List 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                                                Cancel                               Filters                 Apply
filter criteria on the records stored in the database.
                                                                                                                            Product description
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,                                                        Delivery date
                                                                                                                            Any date
changing fields order, or selecting different picker types according to data
type of the filter fields.                                                                                                  Approval Manager
                                                                                                                            Any
Consider hiding the filter to save screen space in situations where the filter
                                                                                                                            Color
does not add value.
                                                                                                                            Any

Build an Effective Filter Configuration                                                                                     Price

                                                                                                                            $5 - $5000
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-                                           Quantity
End picker).                                                                                                                From                                            To

                                                                                                                            $                                       -       $
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
                                                                                                                                                                  Clear
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

September, 2020                                                                                                                                                                               32
You can also read