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
We were able to release version 0.8.1 of Fundamental Library Styles more than 10 days ago but I didn't have time sit and list all the improvements and features we included in the version.

Removing SAP Icons and 72 fonts from the distribution package


As of version 0.8.0 Fundamental Library Styles does not include the SAP Icons and font 72 as part of the package. The main reason is that those assets are not part of Fundamental Library. They come from the package @Sap-theming/theming-base-content and in case there are changes or updates they should come from the original package. Also this way the application can add the specific font file instead of downloading all the files. This change will have a positive performance effect on the application - less data will be transferred over the internet.

Example: If you are not supporting IE11, the recommended format is woff2. If supporting IE11, use woff.

After importing fonts and icons from `@sap-theming/theming-base-content`, add the following to your css:
@font-face {
font-family: "72";
src: url("path/to/fonts") format("woff"); // Bold, Light, Regular available in woff and woff2
font-weight: normal;
font-style: normal;
};
@font-face {
font-family: "SAP-icons";
src: url("path/to/icons") format("woff"); // available in woff, woff2 and ttf
font-weight: normal;
font-style: normal;
}

 

Message Box


Message Box a special dialog that allows you to display messages to the user. Compared to the message popover, you can use the message box to display messages that are not related to a field on the UI, such as technical errors. These messages could be Standard (Default), Confirmation, Error, Success, Warning and Information (Neutral). The Message Box component inherits the look and the basic behaviour (excludes dragging and resizing) of the Dialog component.

The Message Box follows the Dialog structure.


The available options are:


Standard Message Box


Confirmation Message Box


Error Message Box


Success Message Box


Warning Message Box


Information Message Box.

There is a way to render the Message Box without icons. Also the component offers different horizontal paddings.

 

Object Status


The object status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Object Status can display the semantic status of an object:


Negative, Critical, Positive, Informative, and Neutral


Object Status with icons only


Object Status with text only


Object Status with 8 generic indication colors

The Object Status can be put as a link, which has hover effect for non-touch devices.

The component also supports optional inverted visualization - Inverted Object Status. It determines whether the background color reflects the set state instead of the control’s text. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually



Inverted Object Status with 8 generic indication colors

 

Calendar/Date Picker


This was the biggest change in the current version.

The calendar control lets users select a single date, multiple days, entire week(s), or a date range using touch, mouse, or keyboard input. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.


An example of the calendar with days. It includes some special days. The library support up to 20 different colors for special days - highlights. A legend can be used to define the meaning of the highlights.



An example with Month View


An example with Year View


An example with Year Ranges View


Compact Mode of the Day View


Landscape Mobile Day View


Portrait Mobile Day View

 

The full release notes can be find 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.