Building Mobile Apps with ServiceNow
Quebec, March 2021 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 ...... 14 5.2.2 Global search ...... 15 5.2.3 Applet launcher quick actions ...... 17 5.2.4 Applet launcher examples ...... 18 6 Applets ...... 25 7 Lists applets 26 7.1 List ...... 26 7.2 Item stream segments on list ...... 27 7.3 Item streams on list 27 7.4 Grouped list 28 7.5 Employee Directory ...... 28 7.6 Calendar ...... 29 7.7 Map ...... 29 7.8 Filters ...... 30 7.9 Empty state . NEW ...... 31 8 Chart applet 32 9 URL applet 32 10 Form applet 33 10.1 Screen field types ...... 35 10.2 Activity stream ...... 37 10.3 Related list ...... 38 10.4 Embedded List ...... 38 10.5 Embedded browser .NEW ...... 38
March, 2021 2 Building Mobile Apps with ServiceNow
Table of Contents (Continued)
10.6 Dynamic segments NEW...... 39
11 Saved views NEW 40 12 Actions and functions 41 12.1 Action completion NEW ...... 42 12.2 Parameter screen NEW ...... 42 12.3 Swipe actions location ...... 45 12.4 Footer actions location ...... 45 12.5 Top menu actions location ...... 46 12.6 Jump to navigations ...... 46 12.7 Smart buttons ...... 46 12.8 Deep links NEW ...... 47 13 Mobile styles 48 13.1 UI styles ...... 48 13.2 Mobile UI rules NEW ...... 49 14 Icons 50 14.1 Applet icons ...... 50 14.2 Navigation icons ...... 50 15 Using color 51 16 Mobile Cards 52 16.1 Mobile views NEW ...... 52 16.2 Item views 53 17 Native features 54 17.1 Phone ...... 54 17.2 Camera ...... 54 17.3 Geolocation ...... 54 17.4 Push notifications ...... 55 17.5 Siri shortcuts ...... 56 17.6 Deep linking ...... 56 18 Offline 57 19 User acceptance testing 57 20 Branding 58 20.1 General ...... 58 20.2 Apple iOS ...... 58 20.3 Google Android ...... 58 21 Integrations 59 22 Migration 59 23 Deployment 59 24 Security 59 24.1 General 59 24.2 Working with MDM and MAM ...... 60
March, 2021 3 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.
March, 2021 4 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 service agents who need to work remotely.
• Resolve an incident • Coordinate with co-workers Agent • Track or catalog assets on • Manage approvals 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 Mobile • Submit approvals • Search people, knowledge • 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 • View relevant media sections • Receive notifications Onboarding • View relevant banners defined by from your instance your administrators
March, 2021 5 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.
March, 2021 6 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, 9:41 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 Hello Danielle navigation button. Search for services, articles, or people 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 Diversity, inclusion and example My work, My Inventory, My cases. belonging Read our The navigation bar is limited to 5 tabs. If you exceed this limitation, journey 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 How can we help you? 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 Ask a Request IT Knowledge HR Label 5 question assistance base information 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. Recommended for you See all Use capital case for your titles. For example, “Team Members”. Limit the New New length of your titles so they are not cut off when they are displayed in the Submit travel expenses Travel Create an expense report for every Lorem navigation bar. If you intend to support multiple languages, consider the business expense incurred on the trip length of titles in each of the languages you intend to support. By Monica Miller Text 2 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. Services Information For Me Notifications Settings
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.
March, 2021 7 Building Mobile Apps with ServiceNow
5.1.3 Applet launcher header The header of the applet launcher defines how the title of the screen appears and what information is shown in the header. The available a Home header header types are Home and Generic. Review the two header types to 9:41 a Name 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 Title add a shopping cart icon and navigate to the shopping cart. a 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 Media and Campaign. Search for services, articles, or people
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 not use those sections to show record information. How can we help you?
Icon section • Limit scrolling where possible. Prioritize the icons, and information your Ask a Request IT Knowledge HR Label 5 users need most and place those items towards the top of the page. Limit question assistance base information
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 Create an expense report for every Lorem Item section incident management are easier to find when placed in the same UI section. business expense incurred on the trip By Monica Miller 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. • Use a section as the launching point of a workflow. If a section has a significant number of records to scroll through, consider linking to a list of records instead.
March, 2021 8 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 do not require counts. Horizontal • If there are more applets in a section than will fit on the screen, users can scroll horizontally to view all the applets. Limit the number of applets in a horizontal section to 4 or fewer to prevent users from My Grouped My WOT Grouped Task Map needing to scroll. Incidents Incidents WOT
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.
March, 2021 9 Building Mobile Apps with ServiceNow
Hide See all NEW • As an administrator, you can decide whether your end users see the “See all” button that appears to the far right of the section title. The Recommended for you See all visibility of the button can depend on the content that appears in your Service Help article Item UI Section. Submit travel expenses Travel policy Create an expense report for every Cras quis nulla commodo, aliquam lectus • If the “See all” button is hidden, an end user has no way to then access business expense incurred on the sed, blandit augue. Cras ullamcorper trip bibendum bibendum. Duis tincidunt urna the list screen from the UI section. All the functions, and additional segments that live behind this section then become inaccessible. Consider the functionality of the list behind the Item UI section before making the decision to hide the “See all” button.
Vertical • Use vertical sections when you want to display a limited number of records within the applet launcher. Vertical item sections are good for My team See all records like critical tasks where you want the user to see details as soon Engineering Erica Martin as they land on the page. Associate Software Engineer • Vertical sections display one or more records at a time. Users can view Engineering more records by scrolling vertically. Jennifer Bowers Software Engineer • Avoid overwhelming your users with too many records in a section. If your users primarily use tablet mobile devices, it is okay to show more records Engineering in the section. Christine Glazer 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 items you want the user to see. Recommended for you See all
• 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 “Create case” or “Book conference room”. Create an expense report for every Cras quis nulla commodo, aliquam lectus business expense incurred on the sed, blandit augue. Cras ullamcorper trip bibendum bibendum. Duis tincidunt urna • To enable a horizontal item section for core app purposes, a new table non pretium porta. Nam condimentum needs to be created that holds the information. You then be able to vitae ligula vel ornare. Phasellus at semper turpis. Nunc eu tellus tortor. create a data item and list view of the new table. “list item” Navigation Etiam at condimentum nisl, vitae sagittis orci. Donec id dignissim nunc. Donec elit functions can be used to enable the drill down into the mobile enabled ante, eleifend a dolor et, venenatis facilisis dolor. In feugiat orci odio, sed service portal form. lacinia sem elementum quis. Aliquam consectetur, eros et vulputate euismod, nunc leo tempor lacus, ac rhoncus neque eros nec lacus. Cras lobortis molestie faucibus. March, 2021 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 indications on trends or items which require their attention. Hello Kelly • Users can access a chart applet from a chart section within an applet Search for services, articles, or people launcher. The chart section displays a preview of the chart, which users
can tap to access the chart applet using a navigation function. My team incidents KPIs • Use a single score chart section to display reports and performance All incidents per team & priority 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
• Add a section title if the charts are not self-explanatory, or you need to WOTs per priority group multiple charts under a single title. Critical (115) • You can configure report section so that a user can tap a score to Low (105) 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 MyWork TeamsInventory DashboardsArticles 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: 4% • Use horizontal sections to take advantage of screen space. % of cases resolved in first response • Place multiple charts in a chart section. These charts will appear side by side in wider format screens. Real-time 100 • Consider the number of reports presented in mobile. Present only the My team Incidents most used and useful reports to make navigation easier and avoid a 3% Jul 2020 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.
March, 2021 11 Building Mobile Apps with ServiceNow
• 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 Teamsteams dashboardsDashboards
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%InventoryJul 30 Articles Notification Settings )
March, 2021 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 We're delighted you're joining our diverse and • Media sections can display a single line header, and up to two lines of talented team. additional to text. You can define a navigation function and the text to 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 of your applet launcher if further branding is desired. • Create images optimized for use in media sections by using a height of 160px and a width of 1366px. If your users primarily use iPhones, use a height of 160px and a width of 375px to 600px.
March, 2021 13 Building Mobile Apps with ServiceNow
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 a Video redirected to web pages, or navigated to defined areas on their mobile device. Mobile campaigns enable you to share curated content using a scrolling list of images in a carousel format. You can mix any of three card types in the carousel: video, image, and text. At the bottom of the carousel images, dots represent up to eight images and numbers more than eight images. You can choose for the mobile campaign to automatically scroll the cards or to manually scroll them yourself. b Image It is recommended to place the campaign component at the top of your first tab ALP, ideally present no more than 5-7 content cards and keep the card visualization within the same color theme to avoid users visual fatigue. You must have the HR Service Delivery Content Delivery plugin [com.sn_ Get The App! With Now Mobile, employees can get stuff done from a content_delivery], installed to create a mobile campaign. modern mobile app powered a the Now Platform. Use campaigns when delivering multiple messages to your user while using the HR Service Delivery Content Delivery plugin. For other use cases like single messages, company branding and when not using HR plugin consider using c Text the Media Section. • Create images optimized for use in campaigns sections by using a height of 212px and a width of 375px or keep aspect ratio of 16:9. Happy Pride Day!
March, 2021 14 Building Mobile Apps with ServiceNow
5.2.2 Global search Configure your application launchers with a global search bar to give your users the ability to quickly find people, catalog items, and 9:41 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 Search engines NEW The mobile platform supports 2 search engines: Zing – This search engine is included in the platform in New York and later releases. It allows users to search across different data sources. Admins add additional tables as data sources to be indexed. Zing will remain the only search option for the Agent app in Quebec. AI Search (AIS) – An AI based search engine that can be used for Now app in Quebec and later releases. This search engine provides machine learning search capabilities including the user context and intent, popular searches across other users and robust relevancy model. AI search in Quebec supports only the employee related data sources (people, catalog and knowledge) and can be opt in only for the Now client. AI Search One of biggest benefits of Zing is its flexibility to add any 9:41 additional data source to the search index, while AIS is limited (in Quebec) for the employee common data sources. iphone 11 pro Cancel
People Services Items Articles Filters Now customers who are looking to gain AI based search capabilities can do so by opting into for AIS while looking Showing results for iPhone Typo handling into the following considerations: Search instead for ipone 1. Customers should validate that there are no customized IT Hardware and Software data sources configured in Zing which may not be iPhone 11 Pro supported by AIS (cases for example). You choose storage and color Genius card options 2. In case non-supported data sources exist, customers can create a mixed search experience that on one hand Request item use AIS for people, catalog and knowledge while keeping
Zing for non-supported data sources. IT Hardware and Software Result card iPhone 11 3. To support this mixed mode, we recommended app You choose storage and color options owners to create dedicated application launch pages IT Hardware and Software for AIS non-supported data source and associate a Zing iPhone screen issues Request a repair for the following search bar to these application launch pages while keep commonly reported issue: iPhone screen is cracked and you can’t read… the global search using AIS. Additional configuration can be done both for AIS and Zing:
2 • In Zing, app owners can limit the number of search results My items Services Information Notifications Settings shown to the user and the number of suggested results
March, 2021 15 Building Mobile Apps with ServiceNow
when the user start typing characters in the search bar. • In AIS, the following configuration can be made: • Control the number of search results – app owners can change the default search result entries (10) but should be aware thar the engine will show the most relevant answers at the top of the list. • Control the number of genius results – Customers can decide to present up to 3 cards. One for each data source type (people, catalog, and knowledge) if there are results for that data source. In many cases, a single genius card will provide the requires answer while keeping the screen from not being overloaded. • Enable typo handling – Admins should be aware that that for most users, the device auto correct will still be working and correct text as it typed. • Navigation tab labels – Admins can choose to use their company terminology and change the filter labels as needed (example: People to Employees or Users etc..).
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.
March, 2021 16 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 are best used for tasks that users need to perform regularly. In Android, quick actions appear when the user selects the plus icon at the bottom of the applet launcher page. The button remains on the bottom of the page regardless of where a user scrolls, to remain easily accessible. In iOS, Quick actions appear when the user select the plus icon in the applet launcher header, near the header action. • In cases where only one action is configured in the quick Actions menu, you can define a specific icon to be displayed. • Limit quick actions to required or frequently used actions based on the purpose of your applet launcher. Chat is a good example for using a quick action. • Keep consistency of quick actions on your applet launchers.
IOS Android
9:41 Request IT assistance Hello Kerry Hello Danielle
Search for services, articles, or people Ask an HR question Diversity, inclusion and belonging
Diversity, inclusion and Cancel Read our belonging journey
Read our journey How can we help you?
How can we help you?
Ask a Request IT Knowledge HR Label 5 question assistance Base Information
Ask a Request IT Knowledge HR Label 5 question assistance base information Recommended for you See all
Recommended for you See all Tag Tag Title 2 lines max Title 2 lines max New New Sub text one line Sub textRequest one line IT assistance Submit travel expenses Travel Create an expense report for every Lorem Ask an HR question business expense incurred on the trip
By Monica Miller Text 2 Request Information User Notifications Settings
Services Information For me Notifications Settings
March, 2021 17 Building Mobile Apps with ServiceNow
5.2.4 Applet launcher examples
Example 1
9:41
Actions which appear in all the Hello Danielle ALP screens should appear in the Search for services, articles, or people quick actions and will be avilable from the ... in the top.
Diversity, inclusion and Dispaly an image using a media belonging section in the top of the ALP with an engaging action. Like in this Read our journey example the image can include the action and engage the user to tap on the image. How can we help you? Use the icon section to enable users to easily access applets.
Ask a Request IT Knowledge HR Label 5 question assistance base information
Recommended for you See all Use an item section to recommend items to the user.
New New Submit travel expenses Travel Create an expense report for every Lorem business expense incurred on the trip
By Monica Miller Text 2
Services Information For Me Notifications Settings
March, 2021 18 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
March, 2021 19 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.
March, 2021 20 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 the image. Discover
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
By Ariel Shadmon as the title of the media section provides the title for the screen.
Wellness Newsletter - Healthy Tips and Recipes 4,757 Views
By Cosmin Irimia
Security compliance video 4542 Views
WorkBy ArielInventory Shadmon Articles Notifications Settings
March, 2021 21 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
March, 2021 22 Building Mobile Apps with ServiceNow
Example 6
9:41
Brand the app and tailor to your Hello Steve unique company identity. Search for services, articles, or people
Use a campaign section to deliver multile messages to your users in a carousel 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 • In this example, a title for the status 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
March, 2021 23 Building Mobile Apps with ServiceNow
Example 7
9:41
Brand the app and tailor to your Team 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
March, 2021 24 Building Mobile Apps with ServiceNow
6 Applets
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. 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. • 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. • Applet name Applet names appear on a tile in the application on a mobile device. Applet names can be static, empty, or dynamic. • Use a static name when the name is descriptive and provides value to the users. • Consider not displaying an applet name 9:41 9:41 (empty), if the name is repetitive, gives no Work Back WOT0020322 additional value, or duplicates information that appears elsewhere in the applet. My tasks See all New WOT0020322 Upgarde sensors and firmware In progress WOT0020015 In Progress NUMBER • Use a dynamic name for an applet to Ravinia Hospital Router repair or replace fan KX12000 Router Upgrade Opened by Mary Miller provide Unity Hospital Unity Hospital Details Activity Related lists Opened by Inbal Litvin Text 2 the user with additional information or to Parent assist with orientation. WO00010017 My team tasks See all Location Use this capability to display short but New WOT0020322 New 2200NUMBER Powell Street, San Francisco, CA
Upgarde sensors and firmware Install JK20 Infusion Pump valuable information like an incident Actual travel start number or employee name. Avoid using fields Ravinia Hospital Lockwood Clinics 2019-02-20 08:46:23 Opened by Mary Miller Text 2 with long text, which might not be fully visible. Actual travel duration 58 minutes
The names are inherited dynamically, either Duration My schedule 28 days 22 hours and 12 minutes from the previous applet or from a field in the current record, in the case of a form. Map view
Use part Close complete In this example, when tapping on a category, Timesheet the category number is displayed in the Work Inventory Articles Notifications Settings Work Inventory Articles Notifications Settings header of the subsequent screen.
March, 2021 25 Building Mobile Apps with ServiceNow
7 Lists applets
7.1 List Use a list to provide a list of records. Lists display in a card format, showing a limited selection of the information in the record. Work in progress WOT0020015 KX12000 router upgrade Carefully consider what record data is important to present on the list Cyberdyne Inc. | 2019-01-05 12:00:00 screen. Each field added to a record’s pattern increases the space needed 2200 Powell Street, San Francisco, CA 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 displays that information. 2200 Powell Street, San Francisco, CA
List screens have a filter option to give users the ability to find items in the list Assigned WOT0050022 matching criteria they define. This filter is done on the local device and filters Server T4100 floor B1.930 down only the records retrieved based on the item view fields. Consider hiding the Cyberdyne Inc. | 2019-01-08 09:00:00 filter to save screen space in situations where the filter does note add value. 2200 Powell Street, San Francisco, CA 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 Status Address The architecture of a list view is extremely flexible and provides many configuration options. Please see below.
March, 2021 26 Building Mobile Apps with ServiceNow
7.2 Item stream segments on list A list can be made up of multiple item stream segments. You can use different segments to convey different sections to the user. For instance, Open Completed
“open” cases as the first segment and “closed” cases as the second. Work in progress WOT0020015
However, it is important to note that if using a vertical applet count, the KX12000 router upgrade count only displays the numbers of the first segment. Cyberdyne Inc. | 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA Segments act as a tabbed interface to display different types of information in your list screen. Use segments to organize information into Approve Lenovo - Carbon X1 related sections, which help your users find what they need quickly. A Not in budget | $1,100 list may contain any number of segments. Only three segment titles can Request for Danielle Miller appear on your list screen at once. Avoid a negative performance impact Pending REQ00004162 and provide a cleaner user experience by limiting to three or fewer segments. Apple Macbook 13in $2199 | Quantity 2 2 days ago 7.3 Item streams on list In progress HR0000037 A list or list segment can be made up of multiple item streams. An item New hire onboarding stream can have a separate data item and master item. Therefore, you For Megan Anderson can display multiple tables/views in one list. For example, “My To Do’s” 3 days ago can include Approvals, Tasks, and assigned cases. The sort & order of the list is configured on the field “Interleave Order”. Note, Studio does not currently support this and is a platform only feature. Consider using similar item view formats for your item stream to give your list a uniform appearance. Because these lists contain data from multiple tables, the filter options may contain many filter elements, which may impact performance. Consider hiding the filter on these lists, or create a curated experience using a selective filter option that can be achieved by defining a category per item stream (Incidents, requests, work order 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
March, 2021 27 Building Mobile Apps with ServiceNow
7.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.
7.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 along with an icon or image. Megan Anderson 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 Phone your mobile device. You can +1 999-555-1212 My team See all configure functions to enable Location Location phone calls, email, and SMS Annie Williams 2225 Lawson Lane, Santa Clara, CA Senior Solution Consultant messaging. Manager Maria Davies Megan Anderson LinkedIn • Add actions to your employee Solution Consultant URL directory to provide options https://www.linkedin.com/megan 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.
March, 2021 28 Building Mobile Apps with ServiceNow
7.6 Calendar Use a calendar applet to provide a list of time sensitive information in a 2018 August 2018 Sep calendar format, such as holiday schedules or scheduled tasks. Users can M T W T F S S see a calendar view with indicators for dates that relate to your records. 29 30 31 1 2 3 4 You can see information on these records in a card view interface below 5 6 7 8 9 10 11 12 13 14 15 16 17 18 the calendar. 19 20 21 22 23 24 25 • You can configure swipe actions on the card items below your calendar 26 27 28 29 30 31 1 2 3 4 5 6 7 8 to access quick actions like deleting a record or change its state. Security training Decline Accept Event Meeting a Swipe • You can configure top actions in the calendar applet for more complex actions or global actions, such as creating an appointment. 11:00 Setup the configuration 12:00 Work Order Task • 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.
7.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 location from the Locations
(cmn_location) table. 86.1.8 Map a Multiple pin grouping • Displaying too many pins on a map can create a bad user experience 3 and impact the performance of your mobile application. Consider b Single pin using a filter on your data item to ensure that only the most relevant information displays on your maps. c Item card view
March, 2021 29 Building Mobile Apps with ServiceNow
7.8 Filters 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 9:41 filter criteria on the records stored in the database. Cancel Filters Apply Filters appear by default on any list and include all the fields defined in the card configuration (item view). Product description
Admins can customize the filter fields by adding or removing fields, changing fields order, or selecting different picker types according to data Delivery date type of the filter fields. Any date
Consider hiding the filter to save screen space in situations where the filter Approval manager does not add value. Any
Color Build an effective filter configuration Any When you create a new list or map, the instance creates a filter that includes Price $5 - $5000 the same fields selected in the card in the same order, and assigns the system default pickers according to the data types (eg: date field will show as a Start- End picker). Quantity By using the filter configuration in Studio, admins can change field order, add From To or remove fields (in case they want user to have different fields than the ones $ - $ included in the item view) and assign picker types which are more appropriate for the field’s intent (For example, set date field to a single date instead of a range Clear 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 across several data stream, and which fields are relevant only to a single stream. This configuration is available in the platform using a category concept and a definition of a filter instance per data stream.
March, 2021 30 Building Mobile Apps with ServiceNow
7.9 Empty states NEW Empty states are moment in a user’s experience when there is no data to display on the screen. A useful empty state will let the user know what’s 9:41 happening, why it’s happening, and what to do about it. Work My tasks ServiceNow® mobile apps come with a default empty state which is displayed in all screens which do not contain data. You can configure this default empty state to suit your requirements. You can also configure different empty states for particular lists, map, or calendar screens. Different empty states exist for search results. A default one is displayed when a search for a term does not produce any results. When an empty state is not defined for specific screens the default empty state is used. • Try to use the same template on all your screens for a coherent user experience. No tasks today • Consider adding an action to an empty state to assist in the user flows Add tasks and what he should do next. For example, for My requests list consider adding “Open new request”. Day off • Define an empty state per screen to create a message relevant to the specific page the user is viewing. You can provide a heading, descriptive text and up to 3 buttons to trigger actions in global context.
Work Inventory Articles Notifications Settings
March, 2021 31 Building Mobile Apps with ServiceNow
8 Chart applet
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
9 URL applet Axis Y 500 Use a URL applet to open a URL from within a ServiceNow mobile application. Configure relative URLs to direct to pages within the ServiceNow platform, such as a service portal pages or knowledge 0 base articles. Configure an external URL such as your company’s Team A Team B Team C Team D commercial site. Consider URL applets to link pages with complex logic, such as catalog items in a service portal page. When using URL screens to link to other Critical High Moderate Low pages, consider the design and color of those pages to give your users an experience consistent with your mobile applets. Work Inventory Articles Notification Settings Use native instead of web pages when possible. Web pages are not necessarily designed for use on mobile devices and may not provide the best experience for your mobile users.
9:41
Knowledge search
March, 2021 32 Building Mobile Apps with ServiceNow
10 Form applet
Use form applets to display the content of a single record. You can Work in progress WOT0020015
KX12000 Router upgrade configure functions on form applets to allow users to make edits and take Cyberdyne Inc. | 2019-01-05 12:00:00 actions. Form screen supports top menu functions, footer functions, and 2200 Powell Street, San Francisco, CA Details Activity Related lists a Segmented smart buttons. control
Parent WO00010017 b Navigation You can configure access to forms directly from an applet launcher icon to Parent Location Smart button or navigation bar tab, or as a secondary screen in a list, map, or calendar. 2200 Powell Street, San Francisco, CA c 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 Work in progress WOT0020015 remotely. Also consider placing the most used information towards the KX12000 router upgrade top of the form, to help your users find what they need without having to Cyberdyne Inc. | 2019-01-05 12:00:00 scroll down. 2200 Powell Street, San Francisco, CA
• Forms can contain multiple segments. Segments act as a tabbed Details Activity Related lists interface to display different types of information in your form screen
help to filter and organize information. A form applet may contain any Add comment number of segments. Andrea Smith • The Android version of the apps display up to three segment Additional comment Sep 24, 2020 at 9:41
titles on a form screen at once. Additional screens can be The router turned out to be faulty. Will provide a access by scrolling horizontally. new one instead. • The iOS version of the apps can display up to five segment Andrea Smith File uploaded Sep 24, 2020 at 9:41 titles on a form screen at once. If there are more than five segments, a “More” segment displays to display the remaining Order45218.pdf File segments. Limit the number of segments to improve usability. 40.24 KB Wider segments are easier to tap. • In both operating systems, try to limit your forms to 2-3 segments to avoid negative performance impact and provide a cleaner user experience.
March, 2021 33 Building Mobile Apps with ServiceNow
Form screens can include segments from the following types: activity 9:41 stream, related lists, embedded List, details screens or browser screen. Back My tasks • A form header can display an item view. • The header item view can act as a navigation button. Use this feature Work in progress WOT0020015 in forms to navigate back to a parent record. When configuring your KX12000 Router upgrade 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
types. For example: Parent WO00010017 • In a home applet launcher, you can configure the employee image to navigate to a form record displaying the user profile. Location 2200 Powell Street, San Francisco, CA • Configure an entry in an item section to navigate to a form. Actual travel start • Configure an option in an employee profile navigate to the 2019-02-20 08:46:23 employee’s manager profile. Actual travel duration • A form can be standalone or be navigated from a list, map, calendar 58 minutes
screen. In case the form is not standalone, the item view which appears Duration in the form header can match the item view in the previous screen or 28 days 22 hours and 12 minutes 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 form could be used in other areas of your app to display user records that Work Inventory Articles Notifications Settings are not necessarily employees.
March, 2021 34 Building Mobile Apps with ServiceNow
10.1 Screen field types Use screen fields to improve the usability of your form details screen. Keep your form screen focused. Do not overload your form with more a Checklist information than your users need to perform their tasks. If many screen Have user try accessing a different website fields are necessary, consider dividing the content into different forms or segments. Have user try A
Use Screen UI Policies when showing fields on the details screen, give your Have user try B users the information they need when they need it. For example, show Reject reason only if the state is Rejected. a. Checklist b Attachment
• Checklists are a platform component that will also render in the My driver license app. Checklists can be used for to do’s and tasks. b. 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 c Video function of upload attachment. For example, Task of “Upload your profile photo.” On the Form screen add an upload attachment button and allow the user to see the uploaded image with the Attachment screen field. c. Video • Use a video field to embed a video within the form. • Video content cannot be hosted on your instance. Use externally d Image hosted videos on Youtube or Vimeo. d. Image • Use an image field to embed an image in the screen. e. 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. e HTML • Use an HTML field when need to add information to a screen Relocation agreement
based on an HTML field within your instance. The component Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the works best with limited information as the height of the HTML 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 field is limited. Style your HTML content to match the style of the book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the app to have a coherent design. 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker • HTML fields are not intended to display an embedded website. including versions of Lorem Ipsum. Doing so can result in unpredictable behavior. Consider using a
March, 2021 35 Building Mobile Apps with ServiceNow
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. f. Rating types NEW New screen fields are available as part of supporting native knowledge articles in Quebec. Users can now rate articles using two rating types: f Rating types select and spannable. Was this article helpful? • Select ratings: this allows users to select one rating, such as a thumbs up or thumbs down. • Spannable ratings: this allows users to select a spanned rating, such as 4 out of 5 stars. Rate this article Rating icons are configurable. Use different icons for unhighlighted and highlighted (unselected and selected) ratings. When configuring your own rating icons, be sure they are easy to understand and follow accessibility Was this article helpful? color and size standards. You can not configure more than one select or spannable rating on a screen. For example, you have two spannable ratings on one screen.
March, 2021 36 Building Mobile Apps with ServiceNow
10.2 Activity stream Use an activity stream segment when you 10:03 9:41 want to show the history of updates for My to dos a record. Activity streams also allow your Cancel Compose Post Complete onboarding users to post information such as additional Share comments Due in 2 days comments, work notes, files, or images. If enabled, everyone can see this comment New hire onboarding for Jessica Miler Use activity stream segment for records the industry's standard @m where update history is important. Incidents To do Information Messages Mary Adam [email protected] and requests that have pending activity Mary Adams Add comment should include the activity stream segment. [email protected]
Mary Viegelmann However, if you are looking at a user profile Andrea Smith [email protected] record, activity stream may not be needed. Attachment uploaded Sep 24, 2020 at 10:03 Mary Barnes You can add an Activity stream as a [email protected] Angelo Martinez AM segment in a Form screen or have it as a [email protected] standalone screen. David Murch DM [email protected] The term “activity stream” may not be q w e r t y u i o p understood by some users. Consider a s d f g h j k l renaming this tab to a term your users are Andrea Smith File uploaded Sep 24, 2020 at 10:02 familiar with, such as “Updates”, “History”, z x c v b n m or “Notes”. space return report.html 123 File 40.24 KB • In Quebec and later releases users can Services Information For me Notification Settings @mention someone in the activity stream and the mentioned user will receive an email and push notifications based on admin and user preference. Supporting @mention mobile push notifications requires configuration and is not supported by default for all tables. Consider adding support for tables which require collaboration between users to increase communication efficiency.
March, 2021 37 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
10.3 Related lists
Use related lists to display related Work in progress WOT0020015 Work in progress WOT0020015 information to the record. This is great to KX12000 Router upgrade KX12000 Router upgrade Cyberdyne Inc. | 2019-01-05 12:00:00 Cyberdyne Inc. | 2019-01-05 12:00:00 use when you have more than 1 related 2200 Powell Street, San Francisco, CA 2200 Powell Street, San Francisco, CA list the user will need to see. The user will Details Activity Related lists Details Activity Parts see the list of related lists and the count of Affected CIs 0 a Related b Embedded lists lists records in each list. Work order tasks 21
2 If there is only one related list to show, you Task SLA may want to consider using an embedded list. This will directly display the list view as a segment on the form and will save the user a tap.Work in progress WOT0020015 KX12000 Router upgrade Cyberdyne Inc. | 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA
10.4 Embedded list Details Activity Parts
Use embedded lists to display lists of related b Embedded 9:41 lists 9:41 information in an easily accessible form segment rather than having your users My timesheets Back KB0004129 navigate away to a related list. For example, Pending 6 tips for encoder repair and troubleshooting you could add a list of part records to your 09-15 July, 2019 22h By Maggy Doe Updated 1 year ago 19 20 21 22 23 24 work order form. For example, you could All Mon Tue Wed Thu Fri Sat 240 views Week display a list of timecards related to your 8h 7h 0h 2.5h 4.5h 0h Article Comments Related timesheet form. Submited
Project Name • ID0123456789 In hac habitasse platea dictumst. Vivamus 10.5 Embedded browser NEW System readiness tests adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis 11-15 January, 2021 28h Use an embedded browser screen to tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem display web pages within a form segment. Pending tincidunt euismod. Fusce rhoncus porttitor When using an embedded browser screen, ID0123456789 velit, eu bibendum nibh aliquet vel. Fusce On-site support consider the following: lorem leo, vehicula at nibh quis, facilisis 11-15 January, 2021 0h accumsan turpis. • Ensure the design and color of the Pending web pages are consistent with those ID0123456789 of the form applet, to give your users a Install new server similar experience. 11-15 January, 2021 14h • Whenever possible, use native instead of web pages. Web pages are not necessarily designed for use on mobile devices and Services My stuff Notifications Label Work Inventory Articles Notifications Settings In hac habitasse platea dictumst. Vivamus may not provide the best experience for adipiscing fermentum quam volutpat your mobile users. aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed • Not to configure an embedded browser screen to be accessible offline, ullamcorper tellus erat, non ultrices sem as users will not be able to view the content. tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis.
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem March, 2021 38 tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis. Building Mobile Apps with ServiceNow
10.6 Dynamic segments NEW New in Quebec, the form screen supports dynamic segments. Unlike static segments, dynamic segments display a subset of relevant records, rather than a whole list of records. Tapping a segment creates a dynamic link between the elements at the top of the screen and the contents displayed below. For example, dynamic segments can be useful to build a timesheet experience where each segment represents a day of the week and shows the number of hours logged each day. You can define the height and width of segment buttons to be small\ medium\large and define the mobile view to achieve the needed design.
9:41
My timesheets
Pending Form screen 09-15 July, 2019 22h header
19 20 21 22 23 All Dynamic Mon Tue Wed Thu Fri Week 8h 7h 0h 2.5h 4.5h segment
Header segment Submited
Project Name • ID0123456789 System readiness tests 11-15 January, 2021 28h
Pending
ID0123456789 Embedded list On-site support 11-15 January, 2021 0h
Pending
ID0123456789 Install new server 11-15 January, 2021 14h
Services My stuff Notifications Label
March, 2021 39 Building Mobile Apps with ServiceNow
11 Saved views NEW
Saved views option allows users to save any applet 9:41 they frequently use and access it in one click. It supports saving of forms, lists, calendar, charts, maps More Saved items and URL screens. Recently viewed Sorting menu
The saved view tab is delivered by default for the My tasks Saved view entry Agent client, but admins need to add the saved view Just saved Created on web application launch page to the navigation bar in Now TSK12345 Saved 1h ago application. We recommend that Admins place the tab as one of the 4 visible tabs to allow user access their Zoom troubleshooting Saved 1d ago saved views easily. My upcoming visits When users save a list or a map, the filtered values are Saved 10d ago saved as well. This allows Mobile app users to get a My team calendar filtered list without the need to re-do the filter criteria. Saved 11d ago This productivity enhancement allows app owners to My timesheet Saved 20d ago deliver non-filtered lists (such as ‘All incidents’) where each user can filter the list with the values relevant for TLV tasks Saved 21d ago him/her and save it in saved views (‘My incidents’, ‘My SD Tasks team critical incidents’ etc..). Saved 21d ago Admins who wish to block certain views from being saved into the user saved view because of data sensitivity (this does not replace the ACL option), can do Services Information For me Saved More so using a deny list supported for this feature. In offline mode, users can navigate to their saved views only if they were downloaded to their mobile device and the downloaded screen is supported in offline.
March, 2021 40 Building Mobile Apps with ServiceNow
12 Actions and functions
User can perform Actions which change data, navigate to new screens, open mail, make phone calls, or open URLs.
Action function Use Actions to add, edit or delete records on your instance. • An action can be generic and include multiple fields like Edit. Or be focused on a specific operation like that includes a single field. For example, a “Reject” action can include a string field where the user can input the reason for the reject. Use an overlay representation for actions which include only one string input parameter. • Use Screen UI Policies when creating an Action Function with multiple parameters, give your users the information they need when they need it. For example, for an Edit Action add the Reject reason only if the state was changes to Rejected. • Use signature credential if required before action submissions. You can add an Acknowledgment Message as well prior to action submission. • Messages disrupt the user experience and should only be used in important situations like destructive actions (such as delete) or notifying users about problems. Use Confirmation and Success messages infrequently to ensure that your users take them seriously. • Keep the number of actions limited while keeping each action focused on the needed use cases. Use conditions to limit when actions appear to reduce the number of actions show to your users at once.
March, 2021 41 Building Mobile Apps with ServiceNow
12.1 Action completion NEW
We recommend defining the desired app behavior after an action is completed to achieve the required flow. The desired app behavior could be combined from the refresh behavior, should the app remain on the screen the action was triggered from and is a navigation to another screen required. • Refresh options • Refresh the current full screen after action completion without user interaction. Consider using this option for global actions in cases where the action changes the existing form screen or embedded lists. • When returning to the previous screen, show a refresh indicator to the user. Consider using “show refresh on the previous screen” in cases where the actions update a record and update is presented in the item view in the previous screen or adding a new record. If marked a “New update” indication will appear on the previous screen.
• Presented screen upon action completion. 9:41
• Return one screen back from the place the action was initiated. Submit Consider using this option when after this action the user does Cancel Safety Inspection Submit not need to continue and work on the record, for example: Mark as completed action.
• Stay on the current screen. Consider using this option if after Clear all | Select all an edit action users would expect to see the change they just made or continue and working on the current record. Which areas did you inspect? • Navigate to a new destination screen. Consider using this option for new record creation or for creating a flow. Lobby • Supported options for navigating to screens: Security Station • You can navigate to any screen. For new actions we recommend
navigating to a form screen of the new record created. Garage • Navigation is supported automatically without user interaction or by defining a success message with a navigation button so Utility Closet the users can decide if they would like to navigate.
12.2 Parameter screen NEW
*Note: In the Quebec release, the parameter screen includes a subset of features. Future releases may include additional functionality. Next The parameter screen is a new way to let users enter data in the mobile app. With the parameter screen, you can paginate inputs, enable
March, 2021 42 Building Mobile Apps with ServiceNow
“Resume on Cancel” (Save), and add a header mobile view. For reference list inputs, you are able to use the new mobile views to display the list items. Here are some best practices to consider:
Creating data entry forms • Do not make a user have to enter too many mandatory inputs. If necessary, consider enabling the “Resume on Cancel” feature so that users 9:41 can exit the form and continue later without having to restart from scratch. Submit Cancel Departmental survey Submit • Place mandatory inputs before non-mandatory inputs. • When configuring inputs and choice items, always enter an order Add attachment number to avoid errors and confusion.
Inspection-checklist.xls • Use the “Description” field on an input to provide context or instructions File 40.24 KB to users entering data • Users can now attach files and photos when creating a record using a parameter screen in a single flow. Previously, users were only able to upload attachments to existing records. • Consider configuring success messages, confirmation messages and action completion to work with the new parameter screen for a complete experience. 9:41 • Modify the label of the action based on the use case. Consider using labels such as Apply, Submit, Save, Done appropriate. Back Rooms • When possible, map more than one table value in your reference lists to Search make searching easier. For example, when searching a person include the user’s name, title, and image. Albion Capacity: 18 • Consider how you can improve your workflow and user experience by moving existing actions using UI parameters to the new parameter screen. PreviousBuffalo Next Capacity: 14
Cutty Sark CS Capacity: 14
Clifton C Capacity: 14
Eureka Capacity: 25
Done
Town Center, Building D
March, 2021 43 Building Mobile Apps with ServiceNow
Creating a survey experience • Use the “Pagination = All” configuration to show one question at a time, with “Next” and “Previous” buttons. This provides a survey-like experience. 9:41 The “Next” and “Previous” labels are also configurable. Submit Cancel Safety inspection Submit • Use Mobile UI rules to create dependency questions. An example use case: if a user answers the first question a certain way, you can make the System components inspected next question mandatory, or hide it completely. Note: Field Services has an out-of-the-box native surveys experience on mobile, which takes assessment records and dynamically generates a native mobile survey from the record. Customer admins are not able to Door Control Door Access Wide Angle do this themselves. Please refer to the Field Services out-of-box app for Boxes Readers Cameras this feature.
Outdoor Camera Monitoring Array Consols
Previous Next
March, 2021 44 Building Mobile Apps with ServiceNow
12.3 Swipe actions location
Swipe actions allow your users to quickly perform common actions directly from the list. These actions should be for decisions that your users can make based on the limited information that appears on the list. If the user must tap into a record for more information, consider a top menu or footer action. Swipe actions are the most common actions and are sometimes less discoverable. When creating a swipe action, consider also using the action as a top menu action or footer function to ensure your users see the action.
9:41 a
Back My tasks a Top menu Action 1 actions Action 2 Approve iMac 24in
| $2,550 Reject Approve Action 3 Request for Jamie Andersson b Swipe actions Action 4
Approve Lenovo - Carbon X1 Action 5 6 days ago | $1,100
Request for Danielle Miller Cancel
Destructive Secondary Primary c Footer actions Default actions without icons
12.4 Footer actions location Use footer actions for commonly used actions that should be easily accessible while looking at fields in the form. They are also useful when a user navigates to a form screen directly without accessing a list. Actions that appear as a footer function should not appear in the top menu. Associate colors to your footer functions to indicate their function. Positive colors may have a primary or secondary button emphasis. You can add up to 3 footer functions which will appear in a line. Recommended for use cases like approve, reject.
Footer use cases
Add comments Add comments Find part Cancel Submit Reject Comment Approve
Only 1 action needed use primary 2 primary calls to action 1 primary and 1 secondary if you need Primary, secondary and destructive a button to not compete with the primary
*Note: Buttons should always go from right to left.
March, 2021 45 Building Mobile Apps with ServiceNow
12.5 Top menu actions location Use top menu actions for less frequently used actions, and on forms where you have more actions than will fit conveniently in the footer. 9:41
Top menu actions can be at the record level (on a form screen) or in a My tasks global level (on a list or form screen). Top menu actions a Keep the length of the top menu actions limited to 7 actions. If the top menu actions have too many actions, users must scroll to see them all. Scrolling requires extra time, and can cause users to make an unintentional choice by tapping a button.
12.6 Jump to navigations Use Jump to navigations when you want the user to navigate to a related record using a parameter. Navigations can be powerful Megan Anderson Solution Consultant for drilling down to see further Customer Support Email information. For example, while in [email protected] a user’s profile record, having a Business phone navigation function that jumps to +1 999-555-1212 their manager. Location 2225 Lawson Lane, Santa Clara, CA When using jump to navigations, Manager Maria Davies a Jump to limit the level of drill downs to 3 - 4. navigation Avoid looping the application. LinkedIn https://www.linkedin.com/megan
Private home phone +1 999-991-0001
12.7 Smart buttons Smart buttons can be used to utilize a field’s data directly from the app. For example, a phone icon to dial a number or send Megan Anderson Solution Consultant an SMS or a URL link to navigate Customer Support Smart buttons outside of the application. Email [email protected] a Email
Business phone Phone +1 999-555-1212
Location Location 2225 Lawson Lane, Santa Clara, CA
Manager Maria Davies
LinkedIn URL https://www.linkedin.com/megan
Private home phone +1 999-991-0001
March, 2021 46 Building Mobile Apps with ServiceNow
12.8 Deep links NEW A deep-link is a specific type of hyperlink that allows users to be navigated directly to a specific piece of a mobile app. Deep-links contain all the relevant information needed to navigate from one app to another. Not all mobile apps support deep-linking. If the target mobile app supports deep-linking, documentation is available regarding how their links should be formatted. These links can be placed anywhere within our ServiceNow mobile apps to allow end users to seamlessly navigate to another target app. Find out if an external mobile app supports deep-linking by searching through the external app’s product documentation. For more information around configuration, please see our product documentation.
Back Active major incidents
1 - Critical INC000482 Email server is down. State In progress
Assigned to Patty Luminouz
Details Activity Related Calls
Description Unable to send or receive emails.
Reassign
Edit
Create incident
Contact via Teams
Propose major incident Add comments Receive
Cancel My work My team MIM Notifications Settings
March, 2021 47 Building Mobile Apps with ServiceNow
13 Mobile styles
13.1 UI styles Use UI styles to associate a color with a field value within an applet. For example, you could create a UI style to give the state field a different Work in progress INC0020470 color for open, closed, and rejected states. Try to avoid using multiple UI Performance degradation - low disk space Cyberdyne Inc. styles in a single applet to provide a cleaner user experience. UI styles are Megan Anderson intended to provide focus on a specific field within a list or form. Keep consistency in your color decisions throughout the app. As with Awaiting approval INC0020475 icons, associating specific tasks or workflows with colors helps users know Keyboard is broken when they’re not in the right place. Acme Corporation Daniel Miller In areas where text appears, give your text and background a high level of contrast to accommodate both low vision and color-blind users. Pending INC0020482 WCAG 2.0 compliance requires a contrast ratio of at least 3:1. There are Unable to log in to computer several tools online available to help with gauging color contrast. Acme Corporation Robert Geller Avoid using too many colors. Using fewer colors and selecting colors that work well with your application branding results in a cleaner, more Work in progress INC0020491 accessible layout. Computer reboots unexpectedly Cyberdyne Inc. UI style allows you to set an icon based on a field value. Jenna Jones UI style allows you to hide/show an item view element. For example if you use an item view which includes a divider and sometimes there is no text in the left side of the divider you can define a UI style so that the divider will not appear in such cases. You can define a placeholder in case an image is missing. You can have a different placeholder for a missing person image and a missing device. You can define the format of a date field. For example instead of presenting date time format show a string with business meaning based on time ago logic. You can define the font and background color of an item view element which is not mapped to a field. For example the dot color near the word pending is changing based on the status.
March, 2021 48 Building Mobile Apps with ServiceNow
13.2 Mobile UI rules NEW Use Mobile UI Rules for specific styling and alteration to the Mobile UI. Mobile UI Rules can alter the UI for parameter screens and any other screen that contains a card. Use these rules to control the visibility of specific elements, for example: • Determine when a parameter input should be visible, read-only or editabl. • Perform an arithmetic calculation between multiple parameter screen inputs. 9:41 9:41
• Apply a styling to a specific element in Hello CJ Desai Cancel Calc rule Submit mobile cards. Search for services, articles, or people
As an example, while on a parameter screen Quantity 10 My timesheets admins can configure 3 different inputs. They can configure a quantity, a cost, and Cost per mile 10 Submit issue a final total. With a UI Rule, the admin can cost 100 make the final total input a calculated input, Team approval requests See all where when the end user enters an integer Submited for the quantity, and a cost, the final total 25-29 January, 2021 24h input will automatically be populated with Jessica Miler the calculated arithmetic value. Providing another example for a similar use Submitted Saturday 0 Done 25-29 January, 2021 32h case, UI Rules can also be used to control 1 2 3 ABC DEF the visibility of specific fields. Going back Darlene Johnson Sunday 0 4 5 6 to the example with the 3 different inputs, GHI JKL MNO quantity, cost, and final total; the admin 7 8 9 PQRS TUV WXYZ can define an additional fourth input called remaining balance that only appears to . 0 the end user when quantity and cost has Timesheets My stuff Notifications Label been populated.
March, 2021 49 Building Mobile Apps with ServiceNow
14 Icons
Icons appear in your navigation bar and applets to give your users a quick visual reference to the purpose of the applet or navigation tab. Find an icon image that best relates to the task that applet performs.
14.1 Applet icons Consider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users find related tasks quickly. Where text appears, ensure your text and background have a high level of contrast to accommodate both low vision and color-blind users. Avoid using too many colors. Using fewer colors and selecting colors that work well with your application branding results in a cleaner, more accessible layout.
Example 14.Blue2 Navigation = My Approvals icons / My Team Dashboard NavigationGreen = bar Upcoming icon color Shifts is determined / Time-off by your Requests application’s theme. Select an icon that best represents the actions or information presented Red = P1 Incidents / Resolved P1 Incidents in that part of your application. Avoid using the same icon for more than one navigation so users can quickly find what they need. For a reference guide to icons you can use in the navigator, see the mobile icons documentation on the ServiceNow doc site.
March, 2021 50 Building Mobile Apps with ServiceNow
15 Using color
Keep consistency in your color decisions throughout the app. Associating specific tasks or workflows with colors helps users know when they’re in the right place. Consider using the same, or similar colors for related applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users get to related tasks quickly. Avoid using too many colors. Simple designs of two to three colors result in a cleaner, more accessible layout. Color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background have a high level of contrast to accommodate both low vision and color-blind users. WCAG 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.
Example Blue = My Approvals / My Team Dashboard Green = Upcoming Shifts / Time-off Requests Red = P1 Incidents / Resolved P1 Incidents
March, 2021 51 Building Mobile Apps with ServiceNow
16 Mobile Cards NEW
In Quebec and later releases, we support two methods to determine the formatting and appearance for fields in your applets. You can continue and use item views which were supported since Madrid or use a mobile view (Combination of view template & view config). For most places, you can choose between using item views and mobile views. In some cases, like dynamic segment form headers, you must use mobile view, the same if you intend to have buttons in your cards. Main differences between mobile view and item views: • Date formatting is supported in item views only. If a card contains formatting of date (for example “three days ago”) item view is used. • UI Policies are supported on item views. • Mobile UI Rules are supported on mobile view. • In Quebec and later releases, an admin can configure card actions on the card layout, supported only in mobile view.
16.1 Mobile views NEW The new mobile view can be easily modified according to your needs using the Mobile Card Builder. Mobile Card Builder includes a few Hyderabad, India templates built based on our recommendations. Samina Arizmendi We recommend to use the Mobile Card Builder when creating cards. Manager, Marketing Systems Global Marketing Operations Department • Use card actions as icons in cases where the icon is self-descriptive and clear and the number of card actions is small. Email Call mobile • Use card actions text label in cases where there are no appropriate icons and it is important that the action will be visible on the card without additional tap. Awaiting approval • Use a menu card actions in cases where you have multiple actions Time off Requested by Donna Martin that you would like to show. Menu card actions increase the visibility of the actions. Andrea Silver • Be consistent on the way card actions are disapplied on a screen. Do Supervisor not combine both a menu and swipe actions. Do not have some of the Project Management
cards in a list as icons while others are text labels. Call Email Chat • In cases where a list is combined with different data sources, consider using the same card layout. • Card actions can be used simultaneously in a list and as an item section in an applet launcher. In such a case, verify the action completion flow is clear to the end users when triggered from both locations.
March, 2021 52 Building Mobile Apps with ServiceNow
16.2 Item view Item views determine the formatting and appearance for fields in your applets. When you select a screen template when creating an applet, Help with an issue you are selecting the item view. Item views use JSON to determine the Report issue by taking a picture or submittong a ticket configuration for fields in your applet. Modifying or creating new item view records is not recommended, however if you decide to do so, consider the following information. Megan Anderson Solution Consultant • Begin by copying or reviewing an item view that most closely matches what you intend to create. Service • Many item view records are not editable due to protection policies. In Submit travel expenses these cases, you can create an item view record and copy the JSON Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum into your new record. bibendum duis… tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus • Make small changes and test often. at semper turpis. Nunc eu tellus tortor. Etiam at condimentumPending nisl, vitae sagittis orci. DonecINC0020482 id dignissim nunc. Donec elit ante, eleifend a dolor et, • Remember that item view records you have modified are not upgraded Unablevenenatis to facilisis log in dolor. to computer In feugiat orci odio, sed lacinia sem elementum quis. Aliquam consectetur, Acme Corporation if you upgrade your instance to a later patch or version. eros et vulputate euismod, nunc leo tempor lacus, ac rhoncusRobert nequeGeller eros nec lacus. Cras lobortis • Validate the item view you modified on both platforms – iOS and molestie faucibus. Android. • Item sections height is fixed. In case you use the modified item view in a horizontal item section verify all information is visible. Studio may not recognize an item view record you have modified as a working pattern. In this case, Studio displays a warning and a link to the item view [sys_sg_item_view] record, which contains the JSON for the selected pattern. A pattern that is not recognizable may still function as expected in the mobile app but is not editable in Studio.
March, 2021 53 Building Mobile Apps with ServiceNow
17 Native features
ServiceNow apps can use your mobile devices native features to make calls, send SMS messages, and display navigation information. Use the camera on your mobile device to scan barcodes, create image attachments, or use photo search to get assistance quickly.
17.1 Phone Enable your users to communicate using your mobile device with your apps. You can configure a quick action to communicate using your Call +1 (999) 999-9999 phone for calls or SMS messaging using a phone number listed in a field record. Send message
17.2 Camera Cancel You can configure your apps to use the camera on your user’s mobile devices. Users can use their camera to upload photos, perform image- based searches, or scan bar-codes to catalog your assets.
17.3 Geolocation Take photo Use geolocation for tracking location of your users and assets, as well as presenting location data. Location is stored on your instances using Open gallery GPS latitude and longitude coordinates. Geolocation is stored on the Location [cmn_location] table on your instance. To take advantage Record video of geolocation features, your records must have a location field that references a record on this table. Cancel • Users need to opt in on the phone for location services. • Geolocation can be sent as a parameter during an action. For example, when a user reports an incident, you can send the coordinates of where it was reported in the background.
March, 2021 54 Building Mobile Apps with ServiceNow
17.4 Push notifications
• Push notifications are configured exactly like other notifications on platform 1 • Target notifications to specific user groups and use cases. Consider the Notification badge time of day notifications are sent. Limit the amount of notifications you
send to users, recommended at most one per day if non-critical. AGENT now INC00053: Keyboard broken • Notifications should be concise with a clear title and short description. Assigned to you. The recommended length is 40-50 characters. Use words that spur action or attention for users. • Users should be able to click on a push notification to redirect to the related record. This function uses deep linking, described in the deep link section. • Troubleshoot notifications via the System Logs for Push Notifications. If the notification is not found in the logs, then it did not fire.
Actionable push notifications When possible, use the OOB actionable push notifications provided. If you are creating custom new push actions, iOS users need to close and restart their apps. Create buttons with short names that clearly describe the results of the action. Actions can also contain a follow-up text response, e.g. “Reject Reason”. Only 9Tuesday,:41 6 June one text parameter is supported to be sent from an action on a notification. Think carefully before providing destructive actions in a notification.
AGENT Notifications management INC00078: Server ugrade requested in The toggle to enable or disable all notifications has moved to a new page building A21001. Requested server is T140 in Settings: Notifications preferences. Here, the admin can also allow users to enable and disable individual notifications. Notifications are organized Assigned to you. via notification categories. Be sure that your notifications are in the right categories, and that they are easy to understand for the user. Approve
Reject with comments
March, 2021 55 Building Mobile Apps with ServiceNow
17.5 Siri shortcuts • The Now app contains four default Siri shortcuts (currently not available in Agent or Onboarding apps). Hey Siri open my approvals • Open a chat window. • Browse items and services. • Open my tasks. • Open my requests. • Admins can enable/disable these four Siri shortcuts as well as change the target destinations. However, admins can not change the Shortcut name or create new ones. • Users can also configure what words to trigger the actions. If an admin makes changes to the Siri shortcut configuration in the instance, users must delete and re-record their Siri shortcut for the changes to take effect.
17.6 Deep linking • The mobile apps can be opened with record context directly from a URL. You need to set up the URL in the correct format for this to work. See documentation for deep linking. Deep links can be provided within emails, webpages (including mobile webviews), and Virtual Agent topics. • The mobile apps can link into other external apps. However, this requires external apps to also support this functionality.
March, 2021 56 Building Mobile Apps with ServiceNow
18 Offline
Offline Mode allows users without an internet 9:41 connection to continue working from their mobile Settings device. Administrators can control many of the aspects Settings of this feature through system properties. For details on Sarah Milton these properties, see Configure Offline Mode behavior Last login: 2018-02-19 23:07:30 on the ServiceNow doc site. Offline mode Offline more is designed for situations where users expect to be in a location with limited or no internet 9:41 connection. The user must download records used Settings OfflineOffline modeMode during offline mode before they enter an area with Offline mode limited no internet connection. The app records Offline cache Cached data size: 23.31 MB changes made to these records in an outbox queue. Last cached: 45 minutes ago When the user returns to an area with connectivity, Expires: about 23 hours Download data a Download data the changes in the outbox and synchronized with your for offline use instance.
Downloading large amounts of data can be time Offline mode b Enable offline mode consuming and is not the purpose of mobile offline.
When configuring offline mode, consider what Outbox 10 Items waiting to synched c Outbox shows a information and actions a user needs while offline. You users performed may, for example, limit the download of task records to offline actions only those tasks assigned to the user. Admins can control many of the aspects of this feature through system properties. Toast confirmation For details on these properties, see Configure Offline
Mode behavior. Work in progress WOT0020015 As of Orlando, offline is for Agent only. KX12000 Router upgrade Cyberdyne Inc. | 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA 19 User acceptance testing Action saved offline Once you’ve completed the apps, you need to get feedback through UAT. You can start by setting up smaller groups of users and having them run through use-case scenarios. Ensure there is enough data to properly test. This does not need to be on a production environment but having production data does help put the testers into real life scenarios. Once you’ve gotten feedback and made iterations in the apps, consider deploying to a smaller but wider audience before the full deployment. During each stage, ensure you have the user review app downloading, login, main use-case scenarios, and usability.
March, 2021 57 Building Mobile Apps with ServiceNow
20 Branding
20.1 General Use custom branding to create a visually distinct version of ServiceNow mobile apps that you can tailor to your unique company identity. Branding available with iOS and Android include an app icon, app name, and a branded splash screen for your ServiceNow mobile applications. This is a premium service offered by ServiceNow, please contact your account team for pricing details.
20.2 Apple iOS ServiceNow’s mobile publishing program complies with Apple’s suggested practice for custom app releases and gives you a guided path to achieve your branding goals. For an iOS deployment you will need to have signed up for Apple’s VPP program and have a valid Apple Customer DEP ID. This will enable ServiceNow to publish an app to your ACME CORPORATION Apple Business Manager (ABM) store on your behalf. Apple then allows you to distribute the app to your employees via MDM or through store redemption codes.
20.3 Google Android ServiceNow’s white label program complies with Google’s suggested practice for custom app releases and gives you a guided path to achieve your branding goals. For a Google deployment using push notifications, you will need to have signed up for Google Firebase and have a Firebase token. ServiceNow will provide a branded APK. Google allows you more flexibility to distribute the app to your employees via MDM or through any other internal method you choose.
March, 2021 58 Building Mobile Apps with ServiceNow
21 Integrations The mobile studio or platform does not have additional integration capabilities, however, can leverage what already exists in platform through Integration Hub. Furthermore, when defining data items, scripted data items can be used to run server-side script in order to pull together data. This can be stored in ServiceNow tables or in remote tables.
22 Migration
All mobile content is contained within scoped applications, which are automatically associated with update sets. Update sets can be migrated between instances using several methods. For details on update set transfers, see the update set transfers documentation on the ServiceNow doc site.
23 Deployment ServiceNow does have best practices for app deployments. Best practices and guidance can be found on the Customer Success Center.
24 Security
24.1 General ServiceNow Agent app consists of the ServiceNow server instance and the native apps for iOS and Android. The mobile client apps communicate over a wireless connection with the server and pull live data for the end user. The application can be pulled, dynamically configured, and distributed using MDM (more information available in MDM section). The ServiceNow apps conform to the highest security standards and goes through regular Penetration testing. Full details on mobile security practice can be found in the ServiceNow doc site under Device Security for ServiceNow Mobile. Some components of ServiceNow mobile, such as image search and voice search, require that data be sent to a third party to be interpreted. Information on these processes can be found in the documentation for those features.
March, 2021 59 Building Mobile Apps with ServiceNow
24.2 Working with MDM and MAM Internal distribution of the ServiceNow Mobile app is supported through all major EMM vendors. Customers are able to pull the app for iOS or Android from the Apple App store and Google Play respectively, dynamically configure the apps to point to the correct ServiceNow instance, and distribute using the EMM hub. This way, the MDM can fully manage the app as part of a customer portfolio. Note: ServiceNow does not currently distribute the IPA files, or any other unpublished app to customers as it breaches the Apple Enterprise Developer License Agreement. In Paris, there are apps available in the app store that support the Microsoft Intune and Blackberry Dynamics. These apps allow your organization to apply MDM/MAM policies from your console directly on these apps. In the Mobile branding and publishing process, organizations can select the Intune SDK or Blackberry SDK to be embedded in the app. In the future, there may be more options.
March, 2021 60