Technical Articles
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
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
Follow us on Social Media @
Fundamental Library:
 |
 |
 |
 |
UI5 Web Components:
 |
 |
 |
 |
Imagine the case that I am a front-end architect starting a new project for a customer.
How would I choose between UI5 WebCommponents and Fiori Fundamentals?
Hi Gabriel,
First, thank you for showing interest in Fundamental Styles and Web Components.
You raised a good question! Most of the people I know would ask you some questions before giving you an answer or advice. Let me try to be concise:
It all depends on what you want to develop; what stack you are using.
If you are developing something with SAPUI5 then there is not much value in using UI5 Web Components (at the moment). I’m sure you can use Fundamental Library Styles with SAPUI5. The use case for this may look too exotic, but the library can be used with any web technology and it is developed in a self-contained way so it prevents any styling bleeding.
If you are not on a classical SAP stack, then you most probably have a choice. If you decide to go with Web Components you would need a framework anyway. You would need to pick a framework to manage the lifecycle, data manipulations, etc. In that case, you may look for popular, active, open source ones, such as Angular and React; a framework that is performant, a framework that is pushing any limits. Let’s say you pick Angular. Then you can use UI5 Web Components, Fundamental Library Styles, and Fundamental Library for Angular. I wrote ‘and’ as it is possible to use all of them.
The most logical way is to go with the native components written in TypeScript/Angular (Fundamental Library for Angular). This way you would benefit the most from Angular’s features. One example: let’s take the button component. In Fundamental Library for Angular the button is just a native HTML button with an Angular directive. This way the component benefits the most from the native browser support. The same you can get from links, lists, etc…
If you want to go on a higher abstraction level, then, you can include the platform package from Fundamental Library for Angular. It provides a higher abstraction for the components by hiding most of the internal implementation details, which boosts developer productivity (working with date and layouts such as dashboards, master/detail page, search page).
I hope this helps answer your questions. Happy to keep the conversation going and bring more opinions in!
Cheers,
Mladen
I can't believe this had no likes, yet. Awesome answer! 🙂
Hi, Mladen,
Thank you for your article. It is great that so many innovative ideas coming to SAP's front-end party!
But could you, please, clarify, what the main difference of Web Components and Fundamental Library? As I understood It is parallel projects in SAP? For what reason Fundamental Library was invented if we already have UI5 Web Components?
Hi Sergey,
Thank you for reading the article!
Both approaches have their use cases and as we all know, there is no one frontend framework that rules them all. The frontend world is vast and opinionated and we see quite some benefits out that. Each open source library or framework brings different successful innovations which sooner or later gets adopted by the others.
Fundamental Library was organically created as part of CX, before UI5 Web Components. As you may have seen, the library is actually 4 different libraries. You can read about each of them in this article and on their websites.
The main difference is that we divided the presentation layer (html/css) from the interaction. This approach allows a lot of flexibility and freedom. This way the presentation layer can be used by any web technology including for writing web components. The presentation layer can be heavily reused without forcing any team/application to switch their framework of choice. Teams can even decide to build business web components without thinking about writing much of consistent, theme-able, accessible, Fiori 3 styling.
All the components are theme-able and follow Fiori 3. You can take those components and apply them to any legacy web application and bring this application close to Fiori 3. This has been proven to be a very successful way. Similar to what bootstrap does.
Fundamental Library for Angular, React, and Vue are build on top of Fundamental Library Styles, where they deliver the interaction of the components by benefit from already proven frameworks and libraries (Angular, React, Vue).
Fundamental Library allows for other lines of business that were not originally created inside the SAP ecosystem to adapt to Fiori 3 styles quickly, without rebuilding their internal architecture - using their framework of choice.
As we wrote in the post here, we are not doing all in parallel to UI5 Web Components. We are collaborating with team and see how to work closer with them and create more reusable artifacts such as semantic components styling.
I hope I was able to give you a good answer.
Cheers,
Mladen
Hello, the information you provide is very interesting and very useful, I have a question regarding whether I would like to use the ui5 Flexible Column Layout component in vue js, does this library already include it or how could I integrate it?Great article!
but It raises an interesting question..
is there a reason to choose the SAPUI5 framework instead of React, Vue or Angular with those libraries mentioned above?
and generally, does it mean that sap will abandon UI5 development as a whole framework and will just continue to provide their own UI theme and component libraries for the major three frontend Frameworks?
thanks a lot!
As it stands UI5 will not be abandoned and stay the core UI tech for our standard products.
One main reason being that it has the greatest amount of controls from the Fiori Design System control set integrated - With the other options you will always only get a subset.
However, SAP wants to give customers the ultimate choice and flexibility when they are extending the core with own solutions or extensions on the Business Technology Platform - therefore there is and also never has been a lock-in into SAPUI5, even though it still might make sense in a lot of scenarios, since it has a lot "out of the box" functionality and controls for business and especially sap integrated web apps.
Hi
Both Fundamental Library and UI5 Web Component are maintained by SAP,and both provide UI5 controls which fiori like, both support Angular,Vue.js,React, this seems they are quite similar.
Why we have these two to similar thing?
Thanks
Br
Misher