Integrating SAP Apps from a UX POV: About Fundamental Library and UI5 Web Components

Ensuring a consistent look and feel, while harmonizing multiple products and applications built in variety of frameworks and libraries is a demanding and expensive task. It entails rebuilding them from the ground up and accommodating them to the SAP UX consistency requirements and SAP Fiori Design Guidelines.

Offering a wide array of products, SAP is providing multiple entry points and user interfaces. Oftentimes, these entry points and user interfaces lack in consistency and recognizability. Seamless transition between products is often hard to achieve, and this is one of the cornerstones of a great customer experience.

This is where solutions like Fundamental Library and UI5 Web Components come in. As you may know, both are part of our organization and both work on harmonizing SAP applications from a UX perspective. But how do they work together, and why do we need them both? Let’s start by looking at what each solution does.

Fundamental Library

Fundamental Library is an open-source and community-driven project that aims to provide a consistent user interface across SAP applications. It is aligned with SAP UX and is SAP Fiori 3 compliant. It offers a centralized set of libraries that cover the most common UI components, patterns and layouts.   

Fundamental Library is comprised of a set of four libraries that together make - the Fundamental libraries:  

Fundamental Library Styles: Delivers an SAP Fiori 3 theme-able component library for building SAP user interfaces with any web technology, including components like a UI kit, SAP icons, fonts. Each component is implemented in a self-contained manner
Fundamental Library for Angular: Provides an Angular implementation of the components designed in Fundamental Library Styles

Fundamental Library for React: Offers a React implementation of the components designed in Fundamental Library Styles
Fundamental Library for Vue: Supplies a Vue implementation of the components designed in Fundamental Library Styles

The main benefits the Fundamental libraries offer include the following: 

Fundamental Library Styles can be applied to any web framework and library (including web components)
Easy adoption for customers and partners using the most popular frameworks – Angular, React and Vue (but not only) 
Easy UI harmonization and theming using the presentation library – especially for newly acquired companies or legacy solutions  
The Fundamental libraries are already being used by many stakeholders across various SAP products and lines of business, such as SAP Commerce Cloud, Kyma, Luigi, SAP C/4HANA cockpit, SAP Concur, SAP Customer Data Cloud(a.k.a. Gigya), SAP Service Cloud(a.k.a. Coresystems), SAP Fieldglass, SAP Ariba, and SAP DataHub, amongst others.

On the horizon, as next steps, are the following actions: 

Improve the Fundamental libraries’ positioning as part of SAP’s main open-source projects  
Align and collaborate with UI5 Web Components on a Common Semantic and Layout CSS library 
Enable support of the UI theme designer to create custom themes
Create and support Communities of Practice within SAP and with its partners
Work on the adoption and contribution aspects
Increate the supported components 
Runtime Adaptation, Common Floorplans Layouts, Extensibility, Runtime Adaptation

UI5 Web Components

The UI5 Web Components are a set of encapsulated, reusable and lightweight UI elements built on top of web standards. They incorporate the SAP Fiori 3 design and allow you to create a consistent UX aligned with the SAP Fiori Design Guidelines across applications, irrespective of the framework used.

UI5 Web Components come with the enterprise-grade features familiar from the OpenUI5/SAPUI5 framework such as stability, internationalization, accessibility and theming support and introduces a clear interface between the consumption and the implementation of the UI element.

Similar to Fundamental Library, UI5 Web Components are open source and developed in collaboration with the community.

The UI5 Web Components are a core project of the UI5 product line created as part of the evolution of the OpenUI5/SAPUI5 framework towards a modular and universal toolbox. The aim is to provide a set of individual modules that web developers can easily add to their project to build enterprise-ready web applications.

The main benefits the UI5 Web Components offer include the following:

Easy interoperability and portability with any JavaScript library or framework that works with HTML – Angular, React, Vue, Svelte, Ember, Aurelia, Ionic, or no framework at all
Easy and guaranteed UI consistency as the UI5 Web Components fully encapsulate the styling and the behavior within custom HTML tags. Styles cannot penetrate a component from the outside and styles inside a component won’t bleed out
Small footprint due to the lightweight design and great performance by using optimized rendering techniques
Very simple learning curve as the only required skills are JavaScript (or TypeScript), HTML, and CSS
More future proof than any given JavaScript framework as they are based on web standards, which keep thriving and evolving
The UI5 Web Components are used by several stakeholders across SAP (e.g. Hybris SAP Fieldglass, SAP Web Components for React, SAP Work Zone, Mobile Development Kit). In the community, the UI5 Web Components enjoys great popularity as well. They are rated as the top Web Components UI library of 2020(see here and here) and were well received by the Web Components community

On the horizon, as next steps, are the following actions:

Align and collaborate with Fundamental Library Styles on a common CSS library
Enable support of the UI theme designer to create custom themes
Allow the creation of custom UI5 Web Components in separate repositories
Integration into OpenUI5/SAPUI5 (e.g. using UI5 Web Components inside UI5 Controls, reuse of the UI5 tooling)
Increase the set of reusable UI elements based on stakeholder feedback

Improve the overall developer experience by providing appropriate tools.

How do the Fundamental Libraries and UI5 Web Components work together? Why do we need them both?

Fundamental Library and UI5 Web Components can be used in the same application. For example, SAP Fieldglass is one example consuming Fundamental Styles to apply SAP Fiori 3 on legacy applications and use the date picker UI5 Web Component.

Fundamental Styles can be used to create coarse grain business Web Components without worrying about the theming and styling the components.

Fundamental Library and UI5 Web Components are providing complementary options for achieving consistent UX across popular open source frontend frameworks.

The very first step was to unite around the same design. The next step is to collaborate and share CSS Layer for semantic elements and layouts.

If you have any questions or comments after reading this blog post, feel free to post them in our Slack channels!

Fundamental Library Slack Workspace

OpenUI5 Slack Workspace