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
Another Fundamental Library Styles milestone has been achieved - version 0.10.0 has been released!

There are new and completely refactored components included in this release in order to make them match the latest and greatest Fiori 3, support accessibility and theming.

Here is the list of the components:

Panel


The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen. You can use the component when you need to group or display information; when you want to give users the options of hiding this information; or want to show additional information on demand.


Expandable (collapsed) panel


Expanded panel


Fixed panel

Layout Panel


The Layout Panel are used to encapsulate part of content, form elements, lists, collections, etc., on a page.



Tiles


Generic Tile


Generic Tiles can be used to represent an app similar to the SAP Fiori launchpad home page. They can display different types of content, which are based on the data supplied by the app. They can contain an icon, a title, an informative text, KPIs, counters and charts.

The tiles have 2 sizes: large(11 x 11rem) and small(9.25 x 9.25rem)


The generic tile control supports two tile dimensions - 1×1 (default) and 2×1:

  • Large Tile (1 x 1) - 11 x 11rem

  • Large Tile (2 x 1) - 22.5 x 11rem

  • Small Tile (1 x 1) - 9.25 x 9.25rem

  • Small Tile (2 x 1) - 19 x 9.25rem




Launch Tile



Launch Tile With Numeric Content and Launch Icon

 


Launch Tile With Combined Header and Content

 


Launch Tile (Profile)

 


Launch Tile (Logo)

 

KPI Tile with Numeric Content


Key Performance Indicators (KPIs) are used to measure and monitor a company’s performance at a strategic and operational level. The KPI Tile control supports a limited number of digits which varies depending on the size of the tile.


KPI Tile with L-Size Numeric Content

 


KPI Tile with M-Size Numeric Content

 


KPI Tile with S-Size Numeric Content

 

Feed Tile


The Feed tile can be used to show new notification content in a news feed.



Badge Tile


Badges are used to display very short and important information. Use a badge on a Tile if the Tile is new or has been newly added to a page. Tiles do not display badges in action/edit mode.




Slide Tile


The Slide Tile contains a news headline, a background image, the news source, and a time stamp. A start and pause button are always displayed on touch devices and can be revealed by hovering the mouse over the tile on desktop devices. The dots on the bottom of each tile identify the number of pages they contain.




Tile in Action Mode


In action mode view, the close button is displayed on the top right-hand corner of the Tile. The action icon is only an indicator and is displayed on the bottom right-hand corner. The click/touch area fills the entire Tile, excluding the click/touch area reserved for the close button.




Line Tile


The line tiles are a text only version of a launch tile. It acts as a link agglomeration in one container. The title is mandatory while the subtitle is optional.



Toolbar and Overflow Toolbar


The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. It is most commonly used to display buttons, labels, selects and various other input controls.

Toolbar offers few design types (solid, transparent, auto, info, and title.

The component also offers 2 types of spacers (auto and fixed). You can add also separators between the items.

The Overflow toolbar can be used to add additional elements when extra space is required.





Step Input


The step input component allows the user to change the input values in predefined increments (steps). You can use the step input if you want the user to adjust amounts, quantities, or other values quickly, or toadjust values for a specific step (for example, in a shopping cart).



Accessibility


When it comes to accessibility guidelines we take the task very seriously and work hard to meet those guidelines. Delivering accessible applications is a task that involves all the layers and roles during the design and development phases. We can only achieve this if we work together. It requires the design language and guidelines to reflect certain qualities such as color and contrasts. It requires the components to be accessible and respect the ARIA specifications. It requires keyboard support, and many other requirements.

Accessibility cannot be achieved only by one team or one library.

Fundamental Library's team is working with design teams, application teams, accessibility experts. Fundamental Library Styles is applying the Fiori 3 design which is created with accessibility in mind. The library is also trying to apply the right ARIA attributes so the components are accessible.

 

The full release notes can be find here.

More cool and new things to come. We are more than excited to keep this momentum.

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.