Talking about the support of the SAP UI5 framework for some other front-end frameworks such as Vue

We all know that Fiori represents the interface style of SAP's new generation of UI, and UI5 is the specific implementation technology of Fiori UX (User Experience). As can be seen from the news in the picture below, why did SAP decide to decouple Fiori from the specific UI technology?

As we all know, the development speed of front-end technology is very fast, and new concepts, new terms, and new tools are emerging one after another. Technology, Fiori UX will lack enough flexibility, it is difficult to take full advantage of the latest technology in the industry to better serve end users.

At the same time, this move also fully reflects that SAP is indeed listening to the voices of developers in its own ecosystem. This decoupling allows SAP developers to flexibly choose the best UI framework to develop Fiori applications according to actual project needs.

The key to decoupling Fiori UX from the underlying UI implementation framework lies in SAP Fiori Fundamentals, a lightweight presentation layer implementation. From a technical point of view, SAP Fiori Fundamentals is not a new UI technology or framework, but a collection of stylesheets and HTML tags to allow UI developers in the SAP ecosystem to use their favorite UI frameworks, such as Angular, React, Vue, etc. for development, while automatically ensuring that the developed application still has the style and user experience of Fiori.

SAP Fundamentals is a lightweight presentation layer using HTML and CSS. With Fundamentals' library of style sheets and HTML tags, developers can build consistent SAP applications in any Web-based technology.

Using SAP Fundamentals can bring the following benefits to developers and enterprises:

• Fundamentals Library Styles can be applied to any web framework and library (including Web Components)
• Supports the most popular front-end development frameworks, including but not limited to Angular, React and Vue
• Easy adoption by enterprise customers and partners
• Enables easy UI coordination and theming - especially for newly acquired companies or legacy solutions (Legacy Solutions)

Today, the Fiori Fundamentals library has been widely used in various products and business lines of the SAP ecosystem, such as SAP Commerce Cloud, Kyma, Luigi, SAP C/4HANA cockpit, SAP Concur, SAP Customer Data Cloud (aka Gigya), SAP Service Cloud (aka Coresystems), SAP Fieldglass, SAP Ariba, and SAPDataHub, among others.

The appearance of SAP Fiori Fundamentals does not mean that it will replace UI5. In fact, SAP has not stopped maintaining and enhancing UI5.

The relationship between Fiori Fundamentals and UI5 Web Components

UI5 Web Components are a set of encapsulated, reusable, and lightweight UI Elements based on web standards. They incorporate SAP Fiori 3 designs, allowing developers to create consistent user experiences across applications in line with SAP Fiori design guidelines, while It has nothing to do with the specific front-end development framework used.

UI5 Web Components features familiar enterprise-level features from the OpenUI5/SAPUI5 framework, such as stability, internationalization, accessibility, and theme support, and introduces a clear interface between the use and implementation of UI elements.

The UI5 Web Components area core project of the UI5 product line was created as an important part of the evolution of the OpenUI5/SAPUI5 framework towards a modular and generic toolbox, with the aim of providing a set of individual modules that allow web developers to easily Add it to your development project to build enterprise-grade web applications.

Talk is cheap. Show me the code. Below we use some concrete examples to deepen our understanding of SAP Fiori Fundamentals.

Because the team where the author works for prototype development, most of the colleagues in the group like to use Vue, so let's try the combination of SAP Fiori Fundamentals + Vue.

First we have to have a working Vue app and then build on that.

Readers can find a Hello World Vue application on my SAP blog , package it through webpack and run it, and you can see the displayed Hello World in the browser:

This Hello world Vue application, the project structure is as follows:

Below we will work on it.

1. Install fundamental-vue under the project folder. This is a collection of lightweight Vue components implemented for SAP Fiori Fundamentals.

npm install --save fundamental-vue

After installation, you can see in package.json that fundamental-vue is still in beta version,

2. The following link lists the Vue components supported in SAP Fiori Fundamentals, and also describes how to customize a new Vue component.

The following figure is the runtime effect of a Table component. It is not difficult to find that the appearance of this Table is very similar to what we developed with UI5 before.

Click Show Code to display the Vue implementation source code of this Table component, which is similar to the source code of the controls displayed in our UI5 Toolkit in UI5 XML View. The reason is the same.
Paste this bunch of code into index.vue in our Vue application's src folder:

Also in index.vue, implement addCurrentEntry as the Button event handler in module.exports, and hardcode some test data:

Add two lines to main.js:

 import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);

The last step is to import the css file of Fiori Fundamentals located on the CDN in index.html. Of course, it is also mentioned on github that you can also use npm install --save fiori-fundamentals to install it locally.

At this point the processing is over. After packaging with webpack, run npm run dev to start wepack-dev-server, and you can see the following effects in localhost:

Enter the new advisor name and click the Add Entry button to enter it into the form.

The runtime effect of this Fiori UX-style application developed using Vue components is shown on the mobile phone as shown in the following figure:

Summarize

This article first introduces the market reasons that drive the decoupling of the SAP Fiori UX design language and the SAP UI5 implementation framework, which leads to the concept of Fiori Fundamental, and then selects the front-end framework of Vue, explaining how to use the combination of Fiori Fundamentals and Vue to achieve a Simple front-end application with Fiori UX.