Native Mobile/Components

ServiceNow AI Lens

Also referred to as: AI Lens

Overview

  • Release version
    Australia
  • Available sinceAustralia
  • A11Y WCAG 2.1 AA

Only compatible with Input Form screen

This component can only be used in the Input Form screen

ServiceNow AI Lens transforms how users complete forms by allowing them to upload or capture images that automatically fill in form details—making the process faster and more intuitive.

ServiceNow Docs link
AI Lens Product Documentation

Conceptual and configuration guidance

Figma link
AI Lens Figma component

Native Mobile Components Figma library

When to use

This component is used for filling out forms using images in the Input Form screen.

When not to use

Do not use this component to extract data from non-image items such as videos and documents.

Anatomy

iOS version

iOS

Android version

Android

  1. ServiceNow Lens icon: A visual indicator icon next to the title that represents the ServiceNow AI Lens feature, helping with visual identification and branding.
  2. Sheet title: Displays the name or state of the sheet.
  3. Sheet action: An action button in the top-right corner that allows users to dismiss the sheet or stop the current process.
  4. Introduction section: An informational text block that explains what the ServiceNow AI Lens tool does and provides important warnings about avoiding sensitive or confidential images.
  5. Image upload section: The area where users can add images from gallery or camera and review uploaded images.
  6. Additional instructions (optional): When configured, users can select an optional instruction from a pre-defined list to guide the AI processing.
  7. Custom instructions (optional): When configured, users can enter optional instructions (500 character limit) to guide the AI processing. Only applicable if no additional instruction is selected.
  8. Start button: The primary call-to-action button at the bottom of the sheet that initiates the AI processing when tapped.
  9. Sheet overlay: Adds a darker background to help user focus on the sheet content.

Variants

The ServiceNow AI Lens has 2 variants: State and User instructions.

State

In default mode, users can close the sheet by tapping the X in the top right corner. When in processing mode, a loading animation will signal the state, and users can halt the process using the "Stop" button on the top right. User cannot make any edits during the processing mode.

Variant State
  1. Loading animation: Appearing as an overlay on the content to indicates processing state.
  2. Sheet title: Displays the name of the sheet. In default mode, the title displays the feature name “ServiceNow AI Lens”. When user starts the process, the sheet title will change to “Processing...” until the process is completed.
  3. Sheet action: An action button in the top-right corner that allows users to dismiss the sheet (shows "X" in default state) or stop the current process (shows "Stop" in processing state).

User instructions

User can add additional instructions from the following types:

  • Text only: 500 character limit.
  • Choice only: Pick 1 choice picker as additional instruction.
  • Text or Choice picker: Select either the Text or Choice picker to input text as an additional instruction or to choose from the available options. If a choice is selected, the text input will be hidden and not considered part of the instruction.
  • None: Extra guidance is not allowed.
User instructions

Configurations

As outlined in the Variants section, user instructions can be configured using the following types:

  • Text only: Users may enter free text up to 500 characters. This limit is enforced by the backend and cannot be modified.
  • Choice only: Admins can configure up to five choice options, each with a maximum length of 50 characters.
  • Text + Choice picker: Offer both Text and Choice picker for users to add additional instructions. The text input and choice picker follow the same constraints described above.
  • None: guidance from user is not allowed.

Alignment and positioning

Align the sheet to top fo the screen excluding the status bar.

Alignment and positioning

Responsive behaviors

Learn how ServiceNow AI Lens responds to changes in landscape mode.

Responsive behaviors

In landscape mode, the sheet takes up the entire screen with an increased margin size to left and right side.

Interactions

Learn how ServiceNow AI Lens responds when a user interacts with it.

Add image using camera

Tap on camera icon to add image using camera. Once the captured images has been uploaded, the screen will automatically revert to the Lens sheet.

Add image using camera

Add image from library

Tap on the Add image icon to choose images from your library. After user have made the selection and tapped Add, the selected images will be automatically uploaded via upload manager screens. Once all images have been uploaded, the screen will automatically revert to the Lens sheet.

Add image from library

Review uploaded images

Review uploaded images with Attachment screens.

Review uploaded images

Add additional instructions using text

User can add additional instructions in the text box.

Add instructions using text
  1. If a choice is selected, the text input will be hidden and not considered part of the instruction. User can de-select the choice picker and the text box will re-appear.
  2. When text exceeds the character limit, the Start button will become disabled.

Add additional instructions using choice picker

User can select one choice picker as additional instruction.

Choice picker

Start AI processing

Tap Start to begin the process. Once started, user will not be able to edit inputs until it is complete or stopped.

AI processing

Review filled form

The sheet will automatically disappear once the process is completed, allowing user to review the filled-out form.

Review filled form