02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Community

Ask a Question Write a Blog Post Login

Technical Articles

Jerry Wang
December 19, 2018 4 minute read

SAP Fiori + Vue = ？An introduction of SAP Fiori

Fundamentals
Follow RSS feed Like

6 Likes 2,206 Views 8 Comments

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 nd 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 exible enough to support other popular UI framework like React, Angular, Vue etc.
It’s time for practice now.

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 1/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

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 nd 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.

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 2/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

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 di cult to gure 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 le in src folder of our Vue application：

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 3/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

And still in le 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’;
https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 4/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Vue.use(FundamentalVue);

As the last step, declare css le of Fiori Fundamentals hosted in CDN. For sure you can also download it and
use the local one by command:
npm install –save ori-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 rst name and last name, click Add Entry button, and we can see it could be inserted to the Table
Component as expected.

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 5/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

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:

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 6/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

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

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 7/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Thanks for reading.

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 8/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Alert Moderator

Assigned tags

SAP Fiori | JavaScript | SAPUI5 | angular | decouple |

View more...

Related Blog Posts

Build Angular Application with SAP Fiori Fundamentals

By Amy Li , Jun 24, 2019

You’ve accessed the Extended SAP Fiori Demo Cloud Edition…Now What?
By Liz Cawley , May 07, 2015

mobile service for SAP Fiori

By Britt Womelsdorf , Oct 13, 2016

Related Questions

Why SAP custom ori app is not covering the full screen in SAP Fiori Launchpad on Portal.
By Sandip Mandal , Dec 23, 2016

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 9/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

What's next with SAP Fiori Demo? (2019)

By Carlos Tolosa , Jul 19, 2019

Does SAP Fiori have 'on behalf of' functionality (analogue to the SF Proxy feature)?
By Former Member , Jun 29, 2017

8 Comments

You must be Logged on to comment or reply to a post.

Bilen Cekic

December 19, 2018 at 3:00 pm

can we say that even SAP understood that entire UI5 library was not very suitable for modern web
development?

Supporting only one UI technology does not give us the exibility to take advantage of the latest and
greatest technology on the market

I wonder when will they stop this oData. Even their developer replied for an oData question;

our primary focus is Angular and React applications using JSON. We hope to explore integration with
other SAP technologies in the future

So they don’t much care about oData and simply gave a generic answer “we hope to explore new sap techs”
eheeh

Like (0)

Ethan Jewett

December 19, 2018 at 4:55 pm

I don’t disagree, but I would just point out that you should be able to use OData just ne with Angular/React
using a 3rd party library like the Olingo project’s JS lib. If you want to build on SAP’s stack but don’t want to
use UI5, this would probably be a good solution.

UI5 is de nitely way too monolithic and outside the JS standard approach on modules and tooling. They are
working on improving that situation, but I can de nitely see it making sense for a lot of teams to use other
toolkits and I think it is great that SAP is enabling this by giving tools like these Fundamentals libraries.

Like (0)

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 10/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Boghyon Ho mann

December 19, 2018 at 9:17 pm

I don’t think Zack’s comment represents SAP’s strategic direction with OData. Maybe Ralf Handl can tell
more about this. Furthermore, OData, while having nothing to do with Fundamentals, is doing ne and the
spec itself is constantly improving. I’d be really surprised if SAP wouldn’t “care about OData”.

Like (2)

Bilen Cekic

December 21, 2018 at 12:38 pm

Even SAP itself is not using in many of its products to handle web events. BPC 10, BPC10.1, BPC11 on top of
BW4HANA, EPM Add-in are all working based on simple REST APIs. Somehow SAP is still insisting on it but
later on we can see another fundamentals like here to use maybe graphQL ?

https://je handley.com/2018-09-13/graphql-is-not-odata is a good article about an ex microsoft and a new

SAP Concur employee.

Like (0)

Beyhan MEYRALI

January 27, 2019 at 10:16 am

I could not agree more. That OData thing is so cumbersome. For the moment best way of developing
web apps is creating them on BSP on Gateway with modern frameworks.

View layer will remain on Gateway( Open to web) and Model will remain on SAP local ERP. Create all the logic
with ABAP OO, wrap them with RFCs and used them on model layer of BSP Classes…

Like (0)

Christian Kienle

December 20, 2018 at 5:18 am

Jerry Wang thank you very much for your blog post. I am one of the developers of Fundamental Vue. If you
run into any problems don’t hesitate to ping me.

Please remember: We are at version 0.0.6. So still early one. Things will de nitely break but we are trying
hard to make it (more) stable and feature rich.

Like (0)

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 11/12
02/12/2019 SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals | SAP Blogs

Timothy Muchena

December 21, 2018 at 10:06 am

Christian Kienle Thanks for the work you are doing

Like (0)

Timothy Muchena

December 21, 2018 at 10:07 am

Thanks Jerry Wang

Christian Kienle Where can I get more information regarding deployment?

Thank you

Like (0)

Find us on

Privacy Terms of Use

Legal Disclosure Copyright

Trademark Préférences de cookies

Newsletter Support

https://blogs.sap.com/2018/12/19/sap-fiori-vue-？an-introduction-of-sap-fiori-fundamentals/ 12/12