Building Mobile Apps with ServiceNow - Paris, Sep. 2020
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Building Mobile Apps with ServiceNow Table of Contents 1 Purpose of the document . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2 How to use this document . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3 Native mobile clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3.1 Mobile Agent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.2 Now Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.3 Onboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4 Navigation tab bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.1 Naming conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2 Ordering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 5 Applet launchers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 5.1.1 Applet launcher concept . . . . . . . . . . . . . . . . . . . . . . . . 7 5.1.2 Applet launcher structure . . . . . . . . . . . . . . . . . . . . . . . . 7 5.1.3 Applet launcher header . . . . . . . . . . . . . . . . . . . . . . . . . 8 5.1.4 UI sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 5.1.5 Icon section/Navigation UI section . . . . . . . . . . . . . . . . . . 9 5.1.6 Item section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 5.1.7 Chart section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 5.1.8 Media section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 5.2.1 Campaigns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.2.2 Global search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 5.2.3 Applet launcher quick actions . . . . . . . . . . . . . . . . . . . . .15 5.2.4 Applet launcher examples . . . . . . . . . . . . . . . . . . . . . . . 16 6 Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 6.1.1 List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 6.1.2 Item stream segments on list . . . . . . . . . . . . . . . . . . . . . 24 6.1.3 Item streams on list . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 6.1.4 Grouped list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 6.1.5 Employee directory . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 6.1.6 Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 6.1.7 Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 6.1.8 Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6.1.9 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6.2.1 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 6.2.2 Screen field types . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2.3 Activity stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 6.2.4 Related list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 6.2.5 Applet configurations . . . . . . . . . . . . . . . . . . . . . . . . . 32 7 Actions and functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.1 Swipe actions location . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.2 Footer actions location . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.3 Top menu actions location . . . . . . . . . . . . . . . . . . . . . . . 36 7.4 Jump to navigations . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7.5 Smart buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 September, 2020 2
Building Mobile Apps with ServiceNow Table of Contents (Continued) 8 UI styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 9 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 9.1 Applet icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 9.2 Navigation icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 10 Using color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 11 Item views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 12 Native features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 12.1 Phone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 12.2 Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 12.3 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 12.4 Push notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 12.5 Siri shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 12.6 Deep linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 13 Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 14 User acceptance testing . . . . . . . . . . . . . . . . . . . . . . . . . 44 15 Branding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 15.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 15.2 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 15.3 Google Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 16 Integrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 17 Migration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 18 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 19 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 19.1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 19.2 Working with MDM and MAM . . . . . . . . . . . . . . . . . . . . . 47 September, 2020 3
Building Mobile Apps with ServiceNow 1 Purpose of the document The ServiceNow platform enables you to create powerful mobile experiences. However, creating these experiences for mobile is different than building for desktop. You need to think about the form factor and usability of the device to optimize for mobile users’ behavior and expectations. This document is meant to guide ServiceNow mobile app creators on using best practice mobile design and product principles to create consumer grade mobile experiences. 2 How to use this document This document is organized into sections focusing on different aspects of mobile app configuration. It is not meant to be read cover-to-cover, but looked at individual sections for tips, recommendations, and best practices. As you configure and finalize your apps, refer back to the sections of this document to align with how our designers and product managers optimize the ServiceNow platform for the Now Mobile, Agent, and Onboarding apps. In addition to this document, reviewing the pre-configured apps created by ServiceNow’s BUs is recommended before creating from scratch. 3 Native Mobile Clients ServiceNow platform supports 3 Native clients in the store. All the apps have the same capabilities, but the app name gives indication on the persona and usage. ServiceNow’s approach to app design aligns with how users work in consumer mobile apps. Each app specializes in a specific area of the platform. These specialized apps give your users the best experience, providing them with what they need in that moment. The idea is to keep each app focused on a specific set of tasks to facilitate quicker interactions. When building custom apps, consider the use case and user persona. Understanding that will guide you on the best native client to place your app configurations. service agents who need to work remotely. September, 2020 4
Building Mobile Apps with ServiceNow 3.1 Mobile Agent ServiceNow Mobile Agent delivers out-of-the-box, mobile-first experiences for the most common agent workflows, making it easy for agents to triage, act on and resolve requests on the go. Use the ServiceNow Agent mobile app to update records, coordinate with coworkers, and get work done. Deploy the Mobile Agent app for • Resolve an incident • Coordinate with co-workers • Track or catalog assets on • Manage approvals Agent your instance • View your work schedule 3.2 Now Mobile Now Mobile allows employees to find answers and get stuff done across IT, HR, Facilities, Finance, Legal and other departments, all from a modern mobile app powered by the Now Platform®. Enable your users to submit incidents and requests, manage tasks, and access company resources from anywhere using the Now Mobile app. Deploy the Now Mobile app if your users need to regularly perform these tasks while away from their desk or out of the office: • Submit and view requests and • Upload images and attachments issues to ServiceNow records • Submit approvals • Search people, knowledge Mobile • Edit their profile articles, and catalog items • View a personalized home page • Request help from Agent Chat • View and complete tasks 3.3 Onboarding ServiceNow® Mobile Onboarding empowers new hires to complete tasks, view content, and get help across departments - including IT, HR, Facilities, Finance, and Legal - all from a single native mobile app. Enable your new hires to complete your onboarding processes and get up to speed quickly and easily. Deploy the Mobile Onboarding app for new hires who need to complete onboarding tasks: • Complete onboarding to-dos • Chat with an agent Onboarding • View relevant media sections • Receive notifications • View relevant banners defined by from your instance. your administrators September, 2020 5
Building Mobile Apps with ServiceNow 4 Navigation Tab Bar The navigation bar displays multiple icons, called navigation tabs. Configure these tabs to navigate to applet launchers or an applet Work Inventory Articles Notification Settings within your mobile applications. The navigation bar contains a Settings and Notification tabs. Removing these tabs is possible, but prevents your users from accessing important information and features of the app. Consider changing the order in which they appear in the navigation bar rather than removing them. 4.1 Naming Conventions Give your navigation tabs a descriptive name that provides context. Avoid generic names like “Home” or “Apps”. Note the limited space available for titles in the navigation bar. When testing your application, watch for titles that do not completely display on the navigation bar. The navigation bar can display up to five icons. If you have added more than five, a “More” icon is added to display the additional icons in a list. Try to limit your navigation bar to five icons to avoid requiring your users to take this additional step. Make sure tab bar icons are visually consistent and the text length is balanced. 4.2 Ordering Ordering should be determined by level of importance top to bottom and left to right. September, 2020 6
Building Mobile Apps with ServiceNow 5 Applet Launchers 5.1.1 Applet Launcher Concept With an applet launcher, users can access applets in a variety of formats, as well as search, do quick actions, and find user information. An applet launcher can be accessed at the bottom of the app or through a navigation button. An applet launcher can be defined based on context for example – FSM, ITSM, Finance, Timesheet etc. or to be divided to smaller use cases for example My work, My Inventory, My cases. The navigation bar is limited to 5 tabs. If you exceed this limitation, the last tab on your navigation bar is a “More” tab that will display the remaining tabs as a list. Limit your navigation bar to 5 or fewer tabs to prevent a cluttered appearance and ensure your users can easily see the available options. You can use role restriction to further limit the number of tabs on your navigation bar. The Required Roles field on an applet launcher controls which users can see the launcher. Use this restriction to ensure your user only see tabs relevant to their work. Use capital case for your titles. For example, “Team Members”. Limit the length of your titles so they are not cut off when they are displayed in the navigation bar. If you intend to support multiple languages, consider the length of titles in each of the languages you intend to support. Design your applet launchers to provide information and direct your users to other screens where they perform their work. The applet launcher should not be where users perform most of their tasks. 5.1.2 Applet Launcher Structure Applet launchers contain a configurable header, and UI sections to provide access to applets in several formats. • Note that screen space is limited on mobile devices. Try to limit the information displayed to what your users will need while working remotely. Also consider placing the most used information towards the top of the applet launcher, so you users can find what they need most often without needing to scroll down. Order your sections according to how frequently they are used. Place high usage and important information left to right and top to bottom. September, 2020 7
Building Mobile Apps with ServiceNow 5.1.3 Applet Launcher Header The header of the applet launcher defines how the title of the screen a Home header appears and what information is shown in the header. The available 9:41 a Name header types are Home and Generic. Review the two header types to Hello Danielle b Profile determine which best suits the content you want to present to your users. Search for Services, Articles, or People c Search The header may include a header function. For example, in the first tab if the header type is Home you can add a user profile image and show the b Generic header type users profile. If the header type is Generic for example a store you can 9:41 a Title add a shopping cart icon and navigate to the shopping cart. People b Action Search for services, articles, or people c Search Home Header c More actions Use the Home header type for the first launcher a user sees when logging into an app. The title of the home header is customizable and can include the full or partial name of your user. You can combine a static string together with the name. For example, Hello John or Welcome John Smith. Generic Header Type Title of a Generic applet launcher is a static string that you define. For example, My Work, People, Knowledge. *Note: in New York and Orlando using the name variable will correlate with default name setting in your instance. 5.1.4 UI Sections UI sections display applets and record information on your applet launcher 9:41 screen. The available UI section types are Chart, Icon/navigation, Item, Hello Danielle Search for services, articles, or people Media and Campaign. Diversity, inclusion and • Keep consistency in how you use section types in your app. For example, if belonging Media you use icon sections to access record information, do not use those icon Read Our Journey sections to initiate actions. If you use horizontal card sections for actions, do How can we help you? not use those sections to show record information. Icon section • Limit scrolling where possible. Prioritize the icons, and information your Ask a Request IT Knowledge HR Label 5 question assistance base information users need most and place those items towards the top of the page. Limit vertical item sections to three or four items. Recommended for you See All New New • Group items within a UI section contextually. For example. Icons relating to Submit travel expenses Travel Lorem Ipsum is simply dummy text of the Lorem Item section incident management are easier to find when placed in the same UI section. printing and typesetting industry. By Monica Geller Text 2 • Configure your user’s most used actions as quick actions or navigation bar items. These options are accessible at the bottom of the screen regardless Services Information For Me Notifications Settings of where in the launcher the user scrolls. • Limit your applet launcher to 5 or fewer sections. •U se a section as the launching point of a workflow. If a section has a significant number of records to scroll through, consider linking to a list of records instead. September, 2020 8
Building Mobile Apps with ServiceNow 5.1.5 Icon Section/Navigation UI Section Icon/Navigation section displays applets using the icon that is defined in each applet. Users can tap on an icon to list, maps, calendars, and more. You can create a section header to give an indication of the types of actions within the section. If your applet names are self-explanatory, you can omit this header and save screen space. Navigation UI sections are the next generation of the icon section. Use Navigation UI sections instead of Icon sections to provide the flexibility to redirect to applet launchers, as well as applets. Navigation UI section functionality may be extended in future releases. Vertical Vertical • If the data is actionable, take advantage of the “count” feature so the My Incidents 8 user knows how many records are in the drill down. It is great for task information as well as larger datasets. Grouped Incidents 15 Horizontal • Use this section type to display many applets in one horizontal view. Limit the applet name character count to 20 or fewer characters so it does not get cut off. Use this section type to group related applets that Horizontal do not require counts. • If there are more applets in a section than will fit on the screen, users can scroll horizontally to view all the applets. Limit the number of My Grouped My WOT Grouped Task Map Incidents Incidents WOT applets in a horizontal section to 4 or fewer to prevent users from needing to scroll. 5.1.6 Item Section • Item sections display records which require the user’s attention, such as high priority or overdue items, and unassigned tasks. Users tap on an item to see additional record information or take actions. • Use the “hide section when empty” option to hide sections when they do not have information to display. However, in some cases you may want to show an empty section. A missing section may cause the user to lose context or not understand why a section doesn’t appear. For example, a to-do list. • Item sections can include a “see all” button, which opens a full list of records. The same item view is used for the item section and list view. Make sure that the item view selected is displayed correctly in both the section and the list. The height of cards in horizontal sections are limited. • Based on the use case, If the cards are self-explanatory or the card consists of a full card image, a title and a See All button might not be needed. You can define to remove them from the item section header. September, 2020 9
Building Mobile Apps with ServiceNow Vertical • Use vertical sections when you want to display a limited number of My team See All records within the applet launcher. Vertical item sections are good Engineering for records like critical tasks where you want the user to see details Erica Martin as soon as they land on the page Associate Software Engineer • Vertical sections display one or more records at a time. Users can Engineering view more records by scrolling vertically. Jennifer Bowers Software Engineer • Avoid overwhelming your users with too many records in a section. Engineering If your users primarily use tablet mobile devices, okay to show more Christine Glazer records in the section. Senior Software Engineer • Since the section only displays a few records, use data sorting to ensure your highest priority records are visible. Users can tap the see all button to see a full list of records. • In cases where you do not want to limit the number of records in a vertical section, place the section at the bottom of your applet launcher. This placement prevents the user from needing to scroll past a large section to access other sections. Horizontal • Use horizontal item sections to display a discoverable number of Recommended for you See All items you want the user to see. • Horizontal item sections can be used to create a menu for core app Service Help article purposes. For example, use these sections for “help with an issue”, Submit travel expenses Travel policy Cras quis nulla commodo, aliquam lectus Cras quis nulla commodo, al “Create case” or “Book Conference Room.” sed, blandit augue. Cras ullamcorper sed, blandit augue. Cras ulla bibendum bibendum. Duis tincidunt urna bibendum bibendum. Duis ti non pretium porta. Nam condimentum non pretium porta. Nam cond • To enable a horizontal item section for core app purposes, a new vitae ligula vel ornare. Phasellus at ligula vel ornare. Phasellus a table needs to be created that holds the information. You then be semper turpis. Nunc eu tellus tortor. Etiam at condimentum nisl, vitae sagittis Nunc eu tellus tortor. Etiam a nisl, vitae sagittis orci. Done able to create a data item and list view of the new table. “List Item” orci. Donec id dignissim nunc. Donec elit nunc. Donec elit ante, eleifen ante, eleifend a dolor et, venenatis venenatis facilisis dolor. In fe Navigation functions can be used to enable the drill down into the facilisis dolor. In feugiat orci odio, sed sed lacinia sem elementum q lacinia sem elementum quis. Aliquam consectetur, eros et vulputa mobile enabled service portal form. consectetur, eros et vulputate euismod, nunc leo tempor lacus, ac rh nunc leo tempor lacus, ac rhoncus neque eros nec lacus. Cras lobortis eros nec lacus. Cras lobortis molestie faucibus. faucibus. September, 2020 10
Building Mobile Apps with ServiceNow 5.1.7 Chart Section Use chart sections to display time series, single score reporting charts, 9:41 and performance analytics scores. Charts give your managers or owners Hello Kelly indications on trends or items which require their attention. Search for services, articles, or people • Users can access a chart applet from a chart section within an applet launcher. The chart section displays a preview of the chart, which users My Team Incidents KPIs can tap to access the chart applet using a navigation function. All incidents per team & priority • Use a single score chart section to display reports and performance 1200 analytics scores. • A single score chart section supports horizontal and vertical view. Use 800 a vertical view when you want all scores to be visible on the screen without scrolling, or when your titles or values are long. Horizontal views 0 Team 1 Team 5 Team 9 Team 13 work best with score names and values short enough to fit on screen. Use a horizontal view when you want to display several scores in a scrollable section. My Team WOTs KPI WOTs per priority • Add a section title if the charts are not self-explanatory, or you need to group multiple charts under a single title. Critical (115) Low (105) • You can configure report section so that a user can tap a score to Moderate (85) display its records. From there, users can see additional information and High (40) Planning (5) take actions. • Use a chart section of type report to show a Time Series report, a bar chart, or a donut chart. The Time series chart in the ALP can be tapped and the user can drill into the chart applet. The chart applet allows the My WorkTeams Dashboards Inventory Articles Notification Settings user to interact with the chart, zoom, filter and more. • Optimize your dashboard to match the screen format for devices your users use to access the app. You can optimize your charts for viewing on phone or tablet devices. For example: Single score vertical chart section • Use horizontal sections to take advantage of screen space. 4% % of cases resolved in first response • Place multiple charts in a chart section. These charts will appear side by side in wider format screens. Single score horizontal chart section Real-time 100 My Team Incidents 3% Jul 2020 September, 2020 11
Building Mobile Apps with ServiceNow • Consider the number of reports presented in mobile. Present only the most used and useful reports to make navigation easier and avoid a cluttered user experience. • For better visibility and performance, consider limiting the time frame of the information. Don’t overload with unneeded information for the mobile use cases. • Due to device limited space the X/Y axis labels might be truncated depending on device and orientation. We recommend testing with different datasets. Consider limiting the # of bars in the chart preview in some cases. In some cases, only the label prefix will be shown, consider making sure it is descriptive. • In addition to navigation tabs, you can also configure navigation sections to navigate to your applet launchers. 9:41 9:41 All incidents per team & priority 1200 Hello Kelly Hyderabad Search for services, articles, or people 800 Incidents KPIs Open incidents per team 0 1200 Team 1 Team 5 Team 9 Team 13 800 My Team WOTs KPI 0 WOTs per priority Team 1 Team 5 Team 9 Team 13 Critical (115) Low (105) Moderate (85) WOTs KPI High (40) Planning (5) Breached SLAs 1200 800 Other Teams Dashboards 0 Amsterdam San Diego Hyderabad 10:15 AM Jun 25 33% 10 33% My team incidents Recently solved My Team Incidents Work Inventory Articles Notification Settings Work5(35%)Inventory Jul 30 Articles Notification Settings September, 2020 12
Building Mobile Apps with ServiceNow 5.1.8 Media Section Media sections display an image or video. Users can tap a media section to navigate to another screen. • Add a media section to the top of your applet launcher or create an applet launcher specifically for multiple media sections. • Use media sections to display welcome messages, or company messaging. Welcome to ServiceNow • Media sections can display a single line header, and up to two lines of We're delighted you're joining our diverse and additional to text. You can define a navigation function and the text to talented team. Learn more > appear on the navigation button. • Media sections can display video from YouTube and Vimeo streaming services. • Restrict visibility of your media sections by role, user, or conditions to ensure users only see what’s applies to them. For example, you could create an onboarding message that displays only for employees who just signed in. You could also create a “see you next week” message that displays a week before an employee’s start date. • Media sections are also a way to add a static company logo to the top a Video of your applet launcher if further branding is desired 5.2.1 Campaigns Use campaigns to deliver messages and important information to your users. Users can interact with the promotional displays by viewing videos, being redirected to web pages, or navigated to defined areas on their mobile device. Mobile campaigns enable you to share curated content using a scrolling list of images in a carousel format. You can mix any of three card types b Image in the carousel: video, image, and text. At the bottom of the carousel images, dots represent up to eight images and numbers more than eight images. You can choose for the mobile campaign to automatically scroll the cards or to manually scroll them yourself. Get The App! With Now Mobile, employees can get stuff done from a modern mobile app powered a the Now Platform. It is recommended to place the campaign component at the top of your first tab ALP, ideally present no more than 5-7 content cards and keep the card visualization within the same color theme to avoid users visual fatigue. c Text You must have the HR Service Delivery Content Delivery plugin [com. sn_content_delivery], installed to create a mobile campaign. Use campaigns when delivering multiple messages to your user while Happy Pride Day! using the HR Service Delivery Content Delivery plugin. For other use cases like single messages, company branding and when not using HR plugin consider using the Media Section. September, 2020 13
Building Mobile Apps with ServiceNow 5.2.2 Global Search Configure your application launchers with a global search bar to 9:41 give your users the ability to quickly find people, catalog items, and knowledge base articles within your mobile applications. The search bar Search for services, article… Cancel appears in the header of your application launcher. People Services & Items Articles A search bar’s field can contain placeholder text. Keep this text short to ensure that the text does not exceed the length of the search bar. Search filters You can add additional application search sources to enrich your mobile applications. For example, Incidents, Cases, Requests. Voice Search You can also enable voice search, which uses a mobile device’s native speech recognition capability. Depending on your mobile device’s operating system, the voice recordings you create with the voice search feature are sent to Google or Apple to be processed into a text query. ServiceNow does not have control of the recording once it has been sent. Photo Search Configure photo search to give your users the ability to use their device’s camera to perform image- based searches using the objects around them. To take advantage of image recognition in your mobile applications, you need a Firebase account with the Google Vision API enabled. Google Firebase account and the Google Vision API are third-party services that must be subscribed to separately. September, 2020 14
Building Mobile Apps with ServiceNow 5.2.3 Applet Launcher Quick Actions Quick actions provide your users with a shortcut to an item or action in your mobile apps. Quick actions appear under a plus icon at the bottom a Quick actions with icons of the applet launcher page. This button remains on the bottom of the Action 1 page regardless of where a user scrolls to remain easily accessible. Quick actions are best used for tasks users need to preform regularly. Action 2 • In cases where only 1 action is configured in the Quick Actions menu, you Action 3 can define a specific icon to be displayed. Action 4 • Limit quick actions to required or frequently used actions based on the Action 5 purpose of your applet launcher. Chat is a good example for using a quick action. Cancel • Keep consistency of quick actions on your Applet Launchers. b Quick actions without icons Action 1 Action 2 Action 3 Action 4 Action 5 Cancel September, 2020 15
Building Mobile Apps with ServiceNow 5.2.4 Applet Launcher Examples Example 1 Actions which appear in all the ALP screens should appear in the quick actions and will be avilable from the ... in the top. Dispaly an image using a media section in the top of the ALP with an engaging action. Like in this example the image can include the action and engage the user to tap on the image. Use the icon section to enable users to easily access applets. Use an item section to recomend items to the user. September, 2020 16
Building Mobile Apps with ServiceNow Example 2 9:41 Hello Brandon Search for services, articles, or people Dispaly an image using a media section in the top of the ALP to add look & feel to your app. In this example tapping on the image will not navigate to any other screen, To-do items See all so no call to action appears on the image. Upload profile photo Overdue 1 day Use a vertical item section if you want the user to see all his to do items on the screen. Watch security compliance video Due in 2 days Open requests Work in progress REQ4929301 Apple iMac $1,999 | Est. delivery 02-24-20 Timesheets Services My Stuff Notifications Label September, 2020 17
Building Mobile Apps with ServiceNow Example 3 Use a chart section to show the importent KPIs user should track. Add a title in case it adds additional informaiton and helps the user with orientation. Use a vertical icon section with count to show the user clearly his relevent applets. Presenting the count will help him realize if he should navigate to the list for additional detials. • In this example, a title for the icon section was not added, use it only if it adds value to the user. September, 2020 18
Building Mobile Apps with ServiceNow Example 4 9:41 Hello Helen Search for services, articles, or people Dispaly an image using a media section in the top of the ALP to add look & feel to your app. In this example tapping on the image will not navigate to any other screen, New topics just for you so no call to action appears on Discover the image. The value of the known issue database- Use a vertical item section to show with Gil Pantofaro the user the topics related to him. A 4542 Views title is not added to the item section as the title of the media section By Ariel Shadmon provides the title for the screen. Wellness Newsletter - Healthy Tips and Recipes 4,757 Views By Cosmin Irimia Security compliance video 4542 Views Work Inventory Articles Notifications Settings By Ariel Shadmon September, 2020 19
Building Mobile Apps with ServiceNow Example 5 9:41 Work My Tasks See All Create a visual view of the tasks that the user should act upon by In Progress WOT0020015 In Progress using an item section in the top. Router repair or replace fan KX12000 Router Upgrade Unity Hospital Unity Hospital Opened by Inbal Litvin Text 2 My Team Tasks See All New WOT0020322 New Upgarde sensors and firmware Install JK20 Infusion Pump Ravinia Hospital Lockwood Clinics Opened by Mary Miller Text 2 My Schedule Additional applets are presented using a vertical item section. Map View Timesheet Work Inventory Articles Notifications Settings September, 2020 20
Building Mobile Apps with ServiceNow Example 6 9:41 Hello Steve Brand the app and tailor to your unique company identity. Search for services, articles, or people Use a campaign section to deliver multile messages to your users in a carosel format. Back to the office Now employees can get back saftly with the mobile app My approvals 2 Use a vertical icon section with count to show the user clearly his relevent applets. Presenting My requests 1 the count will help him realize if he should navigate to the list for additional detials. COVID-19 team health status • In this example, a title for the icon section was not added to 10:15 AM keep a clean view. 33% 39 25 KPIs can provide an informative Sick employees In quarantine Returning to work picture, consider using them not 2(8%) May 5 only for mangers use cases. For you Team Services Articles More Get emergency help See all September, 2020 21
Building Mobile Apps with ServiceNow Example 7 9:41 Team Brand the app and tailor to your unique company identity. Dashboard by team location Create a dashabord to provide an overview of your team. Provide drill down to additional dashabords views such as team TLV AMS SD HYD location. Team availability Ordered by status Use a pie to provide a clear overview, tapping on the pie will Available - Working (82) allow the users to see the actual Unavailable - records and take actions if needed. Sick Leave (32) Unavailable - Other time off (30) Reported cases Reported COVID-19 cases by day 1200 800 For you Team Services Articles More 0 September, 2020 22
Building Mobile Apps with ServiceNow 6 Applets Applets are collections of screens within your mobile app, designed for a specific task. Each applet provides one or more screens, which your users see when they select an applet. Applet Types There are several available applet types designed to present actions and information to your users in different ways. Consider what information and actions a user needs to take, and select the applet type that best suits their needs. 6.1.1 List Use a list to provide a list of records. Lists display in a card format, showing a Work in progress WOT0020015 limited selection of the information in the record. KX12000 Router Upgrade Carefully consider what record data is important to present on the list Cyberdyne Inc. 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA screen. Each field added to a record’s pattern increases the space needed to display the record. Using fewer fields will allow you to present a greater On hold WOT0050019 number of records on your lists on the same screen. When you have RT1000 Router Replacement determined which fields, you want on your list, select an item view that best Cyberdyne Inc. 2019-01-08 09:00:00 2200 Powell Street, San Francisco, CA displays that information. Assigned WOT0050022 List screens have a filter option to give users the ability to find items in the list Server T4100 floor B1.930 down matching criteria they define. This filter is done on the local device and filters Cyberdyne Inc. 2019-01-08 09:00:00 only the records retrieved based on the item view fields. Consider hiding the 2200 Powell Street, San Francisco, CA filter to save screen space in situations where the filter does note add value. Use top menu functions to navigate to a screen, group by a specific field. You can also open a URL, start a phone call, or navigate to another screen. For example, you can add top menu functions to call your support number or open your company web site. Consider top menu functions for actions that affect an entire list, like an “approve all” action. Use swipe action functions for record specific actions. Users access swipe actions by swiping a record to the left or right. You can configure a list screen to request user input (Parameter) before the List item parameters list appears. The list uses this input, for example, to perform a search and display the results in the list. You can also adjust the UI input parameter type. Work in progress WOT0020015 For example, it can be a QR barcode scan or date field Other examples KX12000 Router Upgrade include using an input on a list of incidents allow the user to select attributes Cyberdyne Inc. 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA such as severity, priority, group and more. Note that lists containing large Company name | date Number results can impact performance. Consider using data item conditions in addition to the user input to limit list sizes. Short description The architecture of a list view is extremely flexible and provides many Status Address configuration options. Please see below. September, 2020 23
Building Mobile Apps with ServiceNow 6.1.2 Item Stream Segments on List A list can be made up of multiple item stream segments. You can use Item Stream Segments on List different segments to convey different sections to the user. For instance, “open” cases as the first segment and “closed” cases as the second. Open Closed However, it is important to note that if using a vertical applet count, the Work in progress INC0020470 count only displays the numbers of the first segment. Performance degradation - low disk space Segments act as a tabbed interface to display different types of Cyberdyne Inc. information in your list screen. Use segments to organize information into Megan Anderson related sections, which help your users find what they need quickly. A Awaiting approval INC0020475 list may contain any number of segments. Only three segment titles can Keyboard is broken appear on your list screen at once. Avoid a negative performance impact Acme Corporation and provide a cleaner user experience by limiting to three or fewer Daniel Miller segments. Pending INC0020482 6.1.3 Item Streams on List Unable to log in to computer Acme Corporation A list or list segment can be made up of multiple item streams. An item Robert Geller stream can have a separate data item and master item. Therefore, you Work in progress INC0020491 can display multiple tables/views in one list. For example, “My To Do’s” Computer reboots unexpectedly can include Approvals, Tasks, and assigned cases. The sort & order of Cyberdyne Inc. the list is configured on the field “interleave order”. Note, Studio does not Megan Anderson currently support this and is a platform only feature. Consider using similar item view formats for your item stream to give your list a uniform appearance. Because these lists contain data from multiple tables, the filter options may contain many filter elements, which may impact performance. Consider hiding the filter on these lists, or create a curated experience using a selective filter option that can be achieved by defining a category per item stream (Incidents, requests, work order Item Streams on List tasks, etc.). 1 - Critical WOT000074125 KX12000 Router Upgrade 2020-12-05 12:00:00 Work in progress INC0020470 Performance degradation - low disk space Cyberdyne Inc. Megan Anderson Pending INC0020482 Unable to log in to computer Acme Corporation Robert Geller 2 - High WOT000074125 Wireless access is down 2020-01-08 07:30:00 September, 2020 24
Building Mobile Apps with ServiceNow 6.1.4 Grouped List Use a grouped list to provide an easily navigable view of a list of items grouped by a field. For example, you can display a list of incidents grouped by category or priority. You can configure grouped lists to navigate to a second list showing the records in the selected group. 6.1.5 Employee Directory Employee directory applets typically provide a list of employees, customers, or other contacts, but are not limited to 9:41 user records. Employee directory Employee directory displays information from a record Search for people Megan Anderson along with an icon or image. Solution Consultant My manager See All Customer Support Smart buttons • Use functions to give your users Email Maria Davies megan@servicenow.com a Email the option to communicate using Director of Customer Support Business Phone your mobile device. You can +1 999-555-1212 Phone Title See All configure functions to enable Location Location Annie Williams 2225 Lawson Lane, Santa Clara, CA phone calls, email, and SMS Senior Solution Consultant messaging. Manager Maria Davies Megan Anderson • Add actions to your employee Solution Consultant LinkedIn URL https://www.linkedin.com/megan directory to provide options Andrew Richardson Private Home Phone like navigation to an employee Solution Consultant +1 999-991-0001 location or contacting them via phone or SMS message. You can provide additional information, such as a web link to a LinkedIn profile. You can also connect to the user records of the employee’s reportees and managers. • User records can contain sensitive information. Carefully consider what information to display in the applet. Consider what users or roles are given permission to use the applet. • You are not limited to user records. You can use this applet type anywhere you would like to display an image along with record information. For example, you could use this applet type to display a catalog item with an image, header, and short description. September, 2020 25
Building Mobile Apps with ServiceNow 6.1.6 Calendar Use a calendar applet to provide a list of time sensitive 2018 August 2018 Sep information in a calendar format, such as holiday schedules or M T W T F S S scheduled tasks. Users can see a calendar view with indicators 29 30 31 1 2 3 4 5 6 7 8 9 10 11 for dates that relate to your records. You can see information 12 13 14 15 16 17 18 on these records in a card view interface below the calendar. 19 20 21 22 23 24 25 26 27 28 29 30 31 1 • You can configure swipe actions on the card items below your 2 3 4 5 6 7 8 calendar to access quick actions like deleting a record or Security Training change its state. Event Meeting Decline Accept a Swipe actions • You can configure top actions in the calendar applet for more 11:00 12:00 Setup the configuration Work Order Task complex or global actions, such as creating an appointment. • The records you select to display in the calendar applet need both a start and end date to display in the applet. • Displaying too many items in a calendar can create a bad user experience and impact performance. Consider using a filter on your data item. A filter can ensure that only the most relevant information displays on your calendar. • Calendar applets can display records from multiple tables. Use similar card views for each record type shown in a calendar for a consistent experience. 6.1.7 Map Use map applets so that your users can see location-based information on a map from their mobile app, such as daily routes or facility locations. The map screen includes a card list to display additional information for records shown as pins on the map. • For a record to be represented with a pin on the map interface, the record must contain a field that includes a 6.1.8 8 Map a Multiple pin location from the Locations (cmn_location) table. 3 grouping b Single pin • Displaying too many pins on a map can create a bad user experience and impact the performance of your mobile application. Consider using a filter on your data item to ensure c Item that only the most relevant information displays on your maps. card view September, 2020 26
Building Mobile Apps with ServiceNow 6.1.8 Chart Use a chart applet to give your users access to pre-configured mobile 9:41 dashboard views for reports and analytical data on their mobile device. Chart applets display reports and performance analytics widgets charts. All incidents per team & priority • You can configure charts to link to lists, so your users can tap on a chart Tap the sections to view details to display a list of relevant records. • The chart applet can display time series report and Performance Analytics latest score widget, used in the web-based UI. 1000 • Displayed reports and widgets contains the settings and configurations as defined in the instance. 750 6.1.9 URL Use a URL applet to open a URL from within a ServiceNow mobile Axis Y application. Configure relative URLs to direct to pages within the 500 ServiceNow platform, such as a service portal pages or knowledge base articles. Configure an external URL such as your company’s commercial site. 0 Team A Team B Team C Team D Consider URL applets to link pages with complex logic, such as catalog items in a service portal page. When using URL screens to link to other pages, consider the design and color of those pages to give your users an experience consistent with your mobile applets. Critical High Moderate Low Use native instead of web pages when possible. Web pages are not necessarily designed for use on mobile devices and may not provide the Work Inventory Articles Notification Settings best experience for your mobile users. September, 2020 27
Building Mobile Apps with ServiceNow 6.2.1 Form Use form applets to display the content of a single record. You can Work in progress WOT0020015 configure functions on form applets to allow users to make edits and take KX12000 Router Upgrade Cyberdyne Inc. 2019-01-05 12:00:00 actions. Form screen supports top menu functions, footer functions, and 2200 Powell Street, San Francisco, CA a Segmented smart buttons. Details Activity Related Lists control Parent b You can configure access to forms directly from an applet launcher icon WO00010017 Navigation to Parent or navigation bar tab, or as a secondary screen in a list, map, or calendar. Location 2200 Powell Street, San Francisco, CA c Smart button Use a form as a secondary screen to provide record detail on a specific Use Part Close Complete d Footer actions item, for example, an incident record on a list of incidents. • Screen space is limited on mobile devices. Try to limit the information displayed in mobile forms to what your users need while working remotely. Also consider placing the most used information towards the top of the form, to help your users find what they need without having to scroll down. • Forms can contain multiple segments. Segments act as a tabbed Work in progress WOT0020015 interface to display different types of information in your form screen KX12000 Router Upgrade help to filter and organize information. A form applet may contain any Cyberdyne Inc. 2019-01-05 12:00:00 number of segments. 2200 Powell Street, San Francisco, CA - The Android version of the apps display up to three segment titles on Details Activity Related Lists a form screen at once. Additional screens can be access by scrolling horizontally. TS Taylor Smith 10:30 - The iOS version of the apps can display up to five segment titles Lorem Ipsum is simply dummy text of the printing. on a form screen at once. If there are more than five segments, a “More” segment displays to display the remaining segments. Limit the Thu, 28 Dec number of segments to improve usability. Wider segments are easier Attachment to tap. Gal Gadot 11:35 - In both operating systems, try to limit your forms to 2-3 segments to avoid negative performance impact and provide a cleaner user Order45218.pdf experience. 40.24 KB September, 2020 28
Building Mobile Apps with ServiceNow Form screens can include segments from the following types: activity 9:41 stream, related lists, embedded List, details screens. Back My tasks • A form header can display an item view. Work in progress WOT0020015 • The header item view can act as a navigation button. Use this feature KX12000 Router Upgrade in forms to navigate back to a parent record. When configuring your Cyberdyne Inc. 2019-01-05 12:00:00 header for this purpose, be sure to include the parent record ID and 2200 Powell Street, San Francisco, CA indication that navigation is available. Details Activity Related Lists • Form applets can be created independently from lists and other applet Parent types. For example: WO00010017 - In a home applet launcher, you can configure the employee image to Location navigate to a form record displaying the user profile. 2200 Powell Street, San Francisco, CA - Configure an entry in an item section to navigate to a form. Actual travel start 2019-02-20 08:46:23 - Configure an option in an employee profile navigate to the employee’s manager profile. Actual travel duration 58 minutes • A form can be standalone or be navigated from a list, map, calendar Duration screen. In case the form is not standalone, the item view which appears 28 days 22 hours and 12 minutes in the form header can match the item view in the previous screen or include different fields. Consider hiding the form screen name to make a form generic, and Use Part Close Complete reusable in different contexts. For example an applet displaying a User record has a screen name of “Employees”. If you remove the name, this Work Inventory Articles Notifications Settings form could be used in other areas of your app to display user records that are not necessarily employees. September, 2020 29
Building Mobile Apps with ServiceNow 6.2.2 Screen Field Types Use screen fields to improve the usability of your form details screen. a Checklist Keep your form screen focused. Do not overload your form with more Have user try accessing a different information than your users need to perform their tasks. If many screen website fields are necessary, consider dividing the content into different forms or Have user try accessing another segments. browser Use Screen UI Policies when showing fields on the details screen, give your Have user try going online and offline users the information they need when they need it. For example, show Reject reason only if the state is Rejected. b Attachment • Checklist - Checklists are a platform component that will also render in the app. My driver license Checklists can be used for to do’s and tasks. • Attachment - The attachment screen field presents attachments added to the record. The field also provides controls to delete and rename attachments. This is useful for cases where there are a small number of attachments. - You can combine an Attachment screen field with a footer function of c Video upload attachment. For example, Task of “Upload your profile photo.” On the Form screen add an upload attachment button and allow the user to see the uploaded image with the Attachment screen field. • Video - Use a video field to embed a video within the form. - Video content cannot be hosted on your instance. Use externally hosted videos on Youtube or Vimeo. d Image • Image -U se an image field to embed an image in the screen. • HTML - The HTML field replicates the HTML field type in platform. Use an HTML field to display formatted text, including bold, italicized, or resized text. -U se an HTML field when need to add information to a screen based on an HTML field within your instance. The component works best with e HTML limited information as the height of the HTML field is limited. Style Relocation Agreement your HTML content to match the style of the app to have a coherent Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the design. industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. September, 2020 30
Building Mobile Apps with ServiceNow - HTML fields are not intended to display an embedded website. Doing so can result in unpredictable behavior. Consider using a URL screen to direct your users to the original site in these cases. - HTML fields are based on WebView components, which have limitations on the supported behaviors. For example, Javascript is not supported, and web page errors are ignored. Test your HTML fields to ensure that any required behaviors are supported. If you have requirements that are not supported in an HTML field, consider a URL screen to direct users to a site containing that content. Footer actions can have dependencies to show or not show based on a user’s interaction. This includes tapping videos, images, URL screen navigations checklists and attachments. Creating this dependency will only show the footer function once the screen field is interacted with. Examples include, tapping on a URL or watching a video where a footer function then becomes visible. As well a checking items off a checklist and then visualizing a footer function to close the task. 6.2.3 Activity Stream Use an activity stream segment when you want to show the history Work in progress WOT0020015 of updates for a record. Activity streams also allow your users to post KX12000 Router Upgrade information such as additional comments, work notes, files, or images. Cyberdyne Inc. 2019-01-05 12:00:00 Use activity stream segment for records where update history is 2200 Powell Street, San Francisco, CA important. Incidents and requests that have pending activity should Details Activity Related Lists include the activity stream segment. However, if you are looking at a user profile record, activity stream may not be needed. TS Taylor Smith 10:30 You can add an Activity stream as a segment in a Form screen or have it Lorem Ipsum is simply dummy text of the as a standalone screen. printing. The term “activity stream” may not be understood by some users. Thu, 28 Dec Consider renaming this tab to a term your users are familiar with, such as Attachment “Updates”, “History”, or “Notes”. Gal Gadot 11:35 Order45218.pdf 40.24 KB September, 2020 31
Work in progress WOT0020015 KX12000 Router Upgrade Cyberdyne Inc. 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA Building Mobile Apps Details Activity Related Lists with ServiceNow Affected CIs 0 a Related lists Work Order Tasks 21 Task SLA 2 6.2.4 Related Lists Use related lists to display related information Work in progress WOT0020015 Work in progress WOT0020015 KX12000 Router Upgrade to the record. This is great to use when you Cyberdyne Inc. 2019-01-05 12:00:00 KX12000 Router Upgrade 2200 Powell Street, San Francisco, CA Cyberdyne Inc. 2019-01-05 12:00:00 have more than 1 related list the user will need 2200 Powell Street, San Francisco, CA Details Activity Related Lists to see. The user will see the list of related lists Details Activity Parts a Related and the count of records in each list. Affected CIs 0 lists b Embedded lists Work Order Tasks 21 If there is only one related list to show, you may Task SLA 2 want to consider using an embedded list. This will directly display the list view as a segment on the form and will save the user a tap. Work in progress WOT0020015 KX12000 Router Upgrade 6.2.5 Applet Configurations Cyberdyne Inc. 2019-01-05 12:00:00 2200 Powell Street, San Francisco, CA Details Activity Parts b Embedded Filters lists 9:41 List screens have a filter option to give users the ability to find items in the list matching criteria they define. This filter looks for records that matches the Cancel Filters Apply filter criteria on the records stored in the database. Product description Filters appear by default on any list and include all the fields defined in the card configuration (item view). Admins can customize the filter fields by adding or removing fields, Delivery date Any date changing fields order, or selecting different picker types according to data type of the filter fields. Approval Manager Any Consider hiding the filter to save screen space in situations where the filter Color does not add value. Any Build an Effective Filter Configuration Price $5 - $5000 When you create a new list or map, the instance creates a filter that includes the same fields selected in the card in the same order, and assigns the system default pickers according to the data types (eg: date field will show as a Start- Quantity End picker). From To $ - $ By using the filter configuration in Studio, admins can change field order, add or remove fields (in case they want user to have different fields than the ones Clear included in the item view) and assign picker types which are more appropriate for the field’s intent (For example, set date field to a single date instead of a range when looking for all employees born on a specific date). If you are looking for a way to search across multiple fields, use the keywords special filter field. If a list includes multiple item streams or multiple segments it is likely that the default system configuration will need to be edited to provide a better clarity. Ensure your users know how to filter each item stream, which fields can be filtered September, 2020 32
You can also read