Fundamental Library Style 0.13.0 has been released

We are more than happy to share that another big release of Fundamental Library Styles is out. – version 0.13!

The release includes 8 new components and brings support fallbacks in Internet Explorer 11 for all 4 Fiori 3 themes. Another big improvement is updating the documentation for 17-18 components.

The new components:

Buttons with badge

The standard button can contain an optional badge. The badge acts as a visual eye-catcher and attracts the user’s attention. It shows a number and is typically applied in browse and collect use cases. For example, it can display the number of items in a shopping cart.

The number of the badge must always be a whole number (1, 2, 3, …) and cannot be smaller than 1. If 0 or minus items are in the basket, the badge is not displayed. If the number exceeds 4 characters, such as 9999, it is truncated to 999+.

Buttons with badge (Cozy and Compact)

Form Header

This is a small header component that used as part of the forms

Feed List and Item

The feed list displays feed list items that individually consist of a username, a written entry and an optional image. There is also a separate byline below that can contain a time stamp or an attribute in the form of free text.

Standard Feed List Item

It allows you to set image or placeholder, you can link it with use details, show more/less info, add actions, and group items

Slider

A slider is a control that enables the user to adjust single values within a specified numerical range. A range slider is a user interface control that enables the user to select a value range within a predefined numerical interval.

There are 2 main types

Basic Slider

Range Slider

Slider with ticks

Slider with ticks and labels

Object Attribute

Object Attribute is not being used as a standalone component. It is used to display text as part of an Object.

Dynamic Page Layout

The dynamic page is the foundation for all pages in SAP Fiori. It is a generic layout designed to support various use cases; therefore, the content of both the header and page can vary. The header of the dynamic page is collapsible, which helps the users focus on the actual page content but still ensures that important header information and actions are readily available.

This component is one of the most complex ones. In stead of bringing different screenshots you can see all the features here.

Dynamic Page Layout

Dynamic Side Content

Dynamic side content is a layout control that displays supplemental content in a separate area to support the users’ understanding of the main content displayed. Check it out directly on our documentation page.

Object List Item

An object list is a type of list that consists of object list items, where each item provides a quick overview of an object. Object list items should only contain essential information for the user to identify what objects to prioritize. Avoid long descriptive texts as the text space is limited and will truncate.

The item can display the following elements: title, avatar, object display components (such as Object Identifier, Object Number, Object Attribute, Object Marker and Object Status), introductory text, icon.

Object List Item

Object List Item with Row Selection

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.