This is the biggest release yet! It includes 12 new components were introduced and two components (Tree and Notification) have been re-implemented to reflect the latest Fiori 3 design. Tons of other improvements and fixed were included in that release.
Let’s go over the new components:
The wizard guides a user through a long or unfamiliar task by dividing it into sections, revealing information in an easy and digestible way. It consists of a walkthrough screen, where the user is prompted to input required information and upon completing a section, the next sections subsequently follow in a prescribed order; and the summary page, where the form is displayed in read-only mode for assessment and final submission.
Wizard with labeled steps
Steps without labels
Mobile version with stacked steps
The carousel component is used for browsing through a set of images. One or several items can be displayed at a time, and the user can navigate to either the next or the previous item.
A Card is an app content container that represents a task or a topic on an overview page. It is a smart component that uses UI annotations to render its content. Cards can show application content from different sources side by side – without requiring the user to switch screens. Cards can display different content:
- a chart
- a list
- a table
- a informative text
- a combination of two elements
Unlike tree tables, trees are used for rather basic data. The tree is like a list containing hierarchical data. It acts as a container for items, with the possibility to expand and collapse nodes. The tree changes the indentation per level dynamically when the user expands a node, based on number of levels currently showing.
Tree with semantically highlighted rows
Tree with multi-selection on the left
Tree with single-selection on the left
Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways.
Mobile version of Notification
Mobile Notification Group
A message page gives feedback to the user when an app or list is empty or if an error has occurred.
Grid tables can contain various input elements inside of cells.
The rating indicator displays a group of icons or images (usually stars) that indicate a rating. It allows users to rate content on a numeric scale, typically from 1 (lowest) to 5 (highest).
An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen.
Desktop Action Sheet
Mobile Action Sheet
The feed input component is specifically designed for the users to type their own notes or comments and post them to a corresponding feed.
The object identifier is a short text that represents the key identifier of an object, and can be displayed in various types of containers, tables, panels, popovers and more.
An object number represents a numeric attribute of an object and its unit. The object number should be displayed with semantics to provide more insight to the user about the object’s value.
Object marker indicates the technical status of an object.
A title component whose semantic level and visual appearance can be set separately, providing flexibility in design while adhering to accessibility best practices.
The full release notes can be found here.
Stay tuned for more updates. Want to read more blog posts about Fundamental Library? Check these out.
Feel free to raise any questions or try our libraries in case you didn’t have a chance.