Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
deno
Advisor
Advisor
After 2 months of heavy work, we are pleased to announce that version 0.12.0 of Fundamental Library Styles has been released!

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:

Wizard


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



Carousel


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.




Cards


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





Analytical Card



List Card



Table Card



Object Card



Tree


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



Notification


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.




Notification group



Mobile version of Notification



Mobile Notification Group



Message Page


A message page gives feedback to the user when an app or list is empty or if an error has occurred.



Grid Table


Grid tables can contain various input elements inside of cells.


Rating Indicator


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).



Half values



Custom Icons



Different Values



Action Sheet


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



Feed Input


The feed input component is specifically designed for the users to type their own notes or comments and post them to a corresponding feed.




Object Identifier


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.

Object Number


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


Object marker indicates the technical status of an object.




Title


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.