SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals

[JerryWang]

A kind reminder: I am not responsible for the topic introduced in this blog, but just told by one of my colleagues about the existence of this url:

https://github.com/SAP/fundamental-vue

So I played around with it a little bit and share my experience with you via this blog.

On March 28, year 2017 I had once visited to one CRM customer in China and discussed with their architect regarding the choice of UI framework for their custom development, UI5 or Vue.

I documented the whole story in my blog: Is jQuery based UI Framework Obsolete?

And today, my colleague sends me a url: https://github.com/SAP/fundamental-vue

which makes me spend times to google, and find this new from experience.sap.com:

Some key messages:

1. It's well-known that Fiori represents the leading design principles for all SAP applications providing a harmonized user experience across on premise and cloud solutions, while SAP UI5 is a concrete implementation framework for Fiori.

And the reason why SAP decides to decouple Fiori UX from UI5 is already clearly explained in the news:

The key of the decoupling is SAP Fiori Fundamentals, a light-weight presentation layer, which is not a new UI technology but a collection of stylesheets and HTML tags ready for direct consumption by UI developers.

As is emphasized in the news, SAP Fiori Fundamentals will never replace UI5, but enables Fiori UX to be more open and flexible enough to support other popular UI framework like React, Angular, Vue etc.

It's time for practice now.

Jerry's team is currently responsible for some prototype development, and my colleagues prefer to use Vue, so in this blog let's try Vue with Fiori Fundamentals.

You can find a Hello-World Vue application from my blog: Step by step to run Vue application in BSP.

Once handled by webpack, it displays a Hello World string as below:

The project hierarchy looks as below:

Now let's make some minor changes on it for Fiori Fundamentals enablement.

1. Install fundamental-vue via npm.

npm install --save fundamental-vue

Once done, check package.json, we can see it's still beta version.

2. This link lists all supported Vue components by SAP Fiori Fundamentals.

Here is a screenshot of a rendered Vue Table component, it's not difficult to figure out that it has exactly the Fiori UX we have already been familiar with.

Press "Show Code" button, and the source code for this Vue Table component will be displayed, just as what we did the same in our UI5 demo kit.

Paste the source code of Table component to the index.vue file in src folder of our Vue application：

And still in file index.vue, implement Button click handler function, addCurrentEntry in module.exports, and hard code some test data:

Add the below two lines in main.js:

import FundamentalVue from 'fundamental-vue';

Vue.use(FundamentalVue);

As the last step, declare css file of Fiori Fundamentals hosted in CDN. For sure you can also download it and use the local one by command:

npm install --save fiori-fundamentals

So far all work is done. Package this Vue application use webpack and use command npm run devto start wepack-dev-server, and then we can see the following UI in localhost：

Specify first name and last name, click Add Entry button, and we can see it could be inserted to the Table Component as expected.

For the runtime behavior, you can refer to this video I uploaded in Tencent platform.

Or try this demo application hosted in my github.

The behavior of this application accessed from my mobile phone:

For more details, please search keyword "Fiori Fundamentals" via search engine.

Thanks for reading.