Last Update: Jan 6, 2023
Platform: Web
Designer: Kathrin Fischer
Intro
Form-with-one-input-1.74
Form-message-popover-1.96
In a creation process if content in a dialog form will be validated usually one or several validation messages will be thrown on top of the initial dialog, to display errors or warnings. In SuccessFactors we have the requirement to gather and combine those validation message, to prevent messages from being stacked on top of a dialog. For this reason an extension request was created. The request was delivered with the Fiori guideline version 1.108.
Usage
Use the field validation via a central message button if:
- you want to validate a form with several validation fields in a dialog
- you want to improves the clarity of message handling and bundel several messages to one list.
In SuccessFactors, for example, the central validation button is used for 2 use cases in the Time Management module:
As an employee I want to get a purchase additional leave days, so that I can tend to a sick relative or so that I can do the world cruise that I always wanted to do.
--> Create Request to Purchase Time Dialog
As an employee I want to get a payout for my remaining leave days, so that the leave entitlement does not expire.
--> Create Request to Pay Out Time dialog
Types
There is only one type of central form field validation on dialogs in use.
Structure & Components
- Header
- Subtitle Area
- Content (Form)
- Footer
- Message Popover (List of validation messages)
- Central Message Button (in Footer)
image2023-2-1_14-17-42
image2023-2-1_14-25-29
Behavior & Interaction
Usually a validation occurs in three cases:
- Focus out: Validation occurs when the value in the input field has changed and the focus leaves the field.
- On Enter: If the user selects a value by pressing Enter
- On create or save: By clicking the create or save button the entire form is validated
In all cases the message button appears and specific fields will be highligted. The user can click on the message button, to display a list of messages within a message popover.
If the issues have been resolved, and the user is able to proceed, remove the corresponding messages.
Responsiveness & Adaptiveness
The planning calendar is based on a UI5 control and thus follows the requirements of responsiveness. In UI5, the Planning Calendar is offered in 3 different sizes: S, M and L. More information can be found in the Fiori Guideline in the respective chapter:
Application-specific examples
The Planning Calendar is used as a standard component in several SuccessFactors modules without variations.
UX Writing Guidance
When creating a message text:
- Keep the title short and crisp.
- Don´t use abbreviations.
- If you have a choice, use a familiar term rather than a technical term.
- Don't use synonyms.
- Use active formulations.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
The Planning Calenadar is a UI5 composite component. It is based on several UI5 controls and thus follows the requirements of the A11y standards.
Resources
Regarding to the standard component of the Planning Calendar there is more information in the Fiori Guideline that is worth paying attention to: