Last Update: Jan 15, 2023
Platform: Web
Designer: Kathrin Fischer
Intro
The Application Specific Information Dialog allows customers to provide application specific information to their users to better instruct them with specific details and navigation to external documents. The Application Specific Information Dialog supports BBCode to let the customer create and provide application specific content to their needs.
Usage
- You want to instruct the user with specific application details and information, which needs to be customisable by customers with BBCode.
E.g. the purpose of each time type which is applicable to the user so that the user is aware which time type he should record on (Timesheet). - You want to provide text which can be specific to a group of employees differentiated by country, legal entity or location, which needs to be customisable by customers with BBCode.
- You want to provide navigation (links) to external documents and websites, which needs to be customisable by customers with BBCode.
E.g. to company policies, legal and country specific rules and regulations. - You want to provide static help texts for specific input fields.
- You want to provide information which doesn't need to be customizable by customers.
Structure & Components
The pattern of the Application Specific Information Dialog is a combination of an Information button which will be placed into the page header toolbar.
The Information button opens the dialog which displays the application specific information. The button label and the dialog title will initially called Information. Button label and dialog title is customisable by customers.
The dialog provides a dialog title, a content area for the application specific details and a dialog footer with a Close action.
Behavior & Interaction
- Use a text only button. Display "Information" as default button label. The label can be customised by the customers.
- Button Order: The button is a generic button which needs to follow the corresponding Fiori Guidelines and will be displayed on the very right of the header toolbar.
- Navigation: The Information Button will open the Application Specific Information Dialog.
- Display Information as default dialog title. The dialog title can be customised by customer.
- BBCode is supported and BBCode strings will be rendered accordingly
- Customers can create and provide their own application specific information to their specific needs and use cases.
- Display a Close button for closing the dialog in the footer bar of the dialog.
- The dialog size will be adapted dynamically based on the content the dialog needs to display.
- The maximum dialog size is 80% of the browser window.
- Scrolling behavior: Vertical scrollbars will be displayed if the content needs more space than the maximum dialog size provides. Do not display horizontal scrollbars.
Responsiveness and Adaptiveness
The Application Specific Information Dialog is based on a UI5 control and thus follows the requirements of responsiveness. In UI5, the dialog is offered in 3 different sizes: S, M and L. More information can be found in the Fiori Design Guideline article for Dialog.
Application-specific examples (usage in SF modules)
Example for an Application Specific Information Dialog in Time Off:
Showing Time Off Types and Purposes
Example for an Application Specific Information Dialog in Timesheet:
Describing how to use the timesheet.
Accessibility
The Application Specific Information Dialog itself is a UI5 component and thus follows the requirements of the A11y standards. The content which will be integrated by our customers might not follow the A11y Standards.
Resources
Fiori Design Guidelines of the Elements and Controls:
UI5 Implementation: