Input form screen

Resources

Overview

Input form screen provides the recommended interface for users entering data in the mobile app. From the Utah release, you can utilize all the ServiceNow platform features for input forms.

Anatomy

1. Top navigation bar: The Input form screen top navigation bar includes the “Save” button. This allows users to save their progress to the cloud prior to submission.

2. Page title: When there is more than one page, it is recommended to add a title to each page. It is advisable to maintain a concise, clear and short title for each page. 
( Page titles are optional on input forms).

3. Grouping into sections: The input form screen has an option to divide it into different sections. Each section can have a title, but this is optional. Dividing the input form into different section helps the user better process a long form.

4. Input types: There are different types of inputs on the form screen. Users can use different attributes to configure the inputs. Available input types include:

   • Attachment; Allows users to upload files, such as documents, images, or videos, to the form.
   • Barcode; Enables scanning and capturing barcode information directly into the form.
   • Boolean; Provides a toggle switch for selecting true/false or yes/no options.
   • Choice; Selecting a single/multi options from predefined choices.
   • Custom map; Allows users to interact with a map, such as selecting a location or viewing geolocation data.
   • Date/time; Enables users to input a specific date and/or time.
   • Number; Lets users enter numerical values.
   • Ranking; Allows users to rank items in a list based on priority or preference.
   • Reference; Provides a lookup field to select and reference data from other records.
   • Signature; Users can capture their signature by using their finger or typing their name via the keyboard.
   • String; Single or multi line text input
   • Screen; Use a screen input to transform a list screen into a multi selectable list input.

5. Footer actions: There are three types of button configurations: Navigating forward and backward between pages (previous/next) and submitting the form. The labels are configurable.

6. Tab bar: Tab bars help people understand the different types of information or functionality that an app provides. They also let people quickly switch between sections of the view while preserving the current navigation state within each section.

Please note: The tab bar will not show by default when creating new input forms - As the default presentation style is "Modal". The Admin needs to actively change it to "Screen" presentation style in order for it to show the tabs below.

Usage

Input form screens display inputs to enable your users to enter information into mobile apps. Use input form screens to create or edit records, complete surveys, or any other situation where your users must enter information. Input form screens work in offline mode, so users don't need an internet connection to input information into the app.

Configurations

Learn how to customize the input form screen by configuring the available properties.

Full screen or modal

The input form screen can be configured as either a screen or a modal. The primary difference is that a screen configuration allows for actions to be set per input. a modal only supports one action - the submit button.

Recommendation:

Use the modal for basics ad-hoc tasks that the user submits immediately. Use a screen for more advanced or complex use cases.

Actions:

Each input can have one or more actions:

• Add comment
• Add attachments
• Navigation to other screens

Sections

You can group inputs together in a section, which creates a clear hierarchy and makes things easier to scan.

One page vs Multi page

You can configure the form to appear on a single page with scrolling, either long or short, depending on the number of inputs on the screen. Alternatively, the input form screen can be divided into multiple pages, with navigation between pages handled via footer buttons.

Save form

Currently the only action available is writing to the database. This saves or store the information so it can be accessed later.

The user can initiate the action from two different locations:

1. Top navigation: A button embedded in the top navigation bar, by tapping the icon directly. (for example cloud icon).
2. Ellipsis icon: The save button would be within the ellipsis menu. Tapping on the ellipsis menu will open an action sheet and reveal the save action.

Recommendation:

Place the save icon in the top navigation for quick access. If you need to introduce more actions, group them under an ellipsis icon.

Responsive behaviors

Learn how Input form screen responds to changes in screen size or orientation.

Landscape mode

This is what the Input form screen looks in landscape mode:

iPad version

This is what the Input form screen looks on the iPad version:

Internationalization

This is what the Input form screen looks like when configured for a right-to-left (RTL) language: