Form Field Validation

Intro

This article describes data validation within SAP Fiori apps. This includes information about the validation points and the choreography associated with messaging.

For more information on the messaging concept for SAP Fiori apps, see the article on message handling.

Behavior and Interaction

General behavior

The message popover should only display field-related messages.

Validation Choreography

Focus Out (First Validation)

Clicking or touching another part of the screen (focus out) validates the field.
The mandatory fields are marked.
A semantic button (message button) appears in toolbar (semantic button, icon: alert, counter)

Field validation on focus out

Validation report

Focus Out (Not First Validation, At Least One Message Already Occurred on UI)

If the user closes the message popover, the popover will stay closed.
The message popover counter increases.
If the message popover is open, the list will be updated.

An example of a useful message on the form field

In this example, the message popover counter increases to 2

On “Enter”

The entire form is validated.
If the user selects a value by pressing Enter, the value is selected without triggering validation (for example, when adopting a suggestion or entering a value in a combo box). The user must then press Enter a second time to trigger the full form validation process.
Any errors or warnings are displayed in a message popover.

Loading animation on enter

Validation completed

Validation

Highlight the specific field and include a useful message (with an action word) in the value state. The message should have the following format: Short message description. For example: “Enter first name”.
Display a button on the left side of the footer toolbar.
The button displays the sap.m.MessagePopover. Find out more about this popover.
If the issues have been resolved so that the user is able to proceed with his or her action, there is no need to display those messages anymore.

Include useful messages to support the user in proceeding with the action

Developer Hint

A message manager is generally available, which can communicate with the message popover. For more information, see Message Box.

Guidelines

Depending on the floorplan, certain validation guidelines need to be applied.

Global Edit Flow

This floorplan is significant in that the actions are only displayed in the footer toolbar on the main page of the object. The subpages do not provide action buttons. Therefore, the message popover includes all messages for the whole object (the main object page and all subpages).

The messages can be triggered by the following:

Focus out: Current field, or current field and dependent fields
Action button: Complete object validation including subpages

Information

Messages that occur on subpages should include the name of the line item so that the user at least knows where to find the field to resolve the issue.

Partial Editing

When the user clicks Save, the whole form remains in a busy state until the action has been completed:

If there are no messages: switch to display mode.
If there are messages that relate to a field: highlight the respective field with its value state and do not use the message popover.
If there are messages that do not relate to a field, show a dialog with the message(s).

Message Popover Control

The message popover control should not be used for:

Dialogs
Popovers
Partial edits

Instead, highlight the fields that contain errors to make it easier for the user to understand the issue(s).

Messaging example in SAP Fiori

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Message Popover (guidelines)
Message Box (guidelines)
Message Toast (guidelines)

Implementation

No Links.