Technical Articles
SAP Fiori + Vue = ？An introduction of SAP Fiori Fundamentals
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.
can we say that even SAP understood that entire UI5 library was not very suitable for modern web development?
I wonder when will they stop this oData. Even their developer replied for an oData question;
So they don't much care about oData and simply gave a generic answer "we hope to explore new sap techs" eheeh 😀
I don't disagree, but I would just point out that you should be able to use OData just fine 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 definitely way too monolithic and outside the JS standard approach on modules and tooling. They are working on improving that situation, but I can definitely 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.
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 fine and the spec itself is constantly improving. I’d be really surprised if SAP wouldn’t “care about OData”.
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://jeffhandley.com/2018-09-13/graphql-is-not-odata is a good article about an ex microsoft and a new SAP Concur employee.
🙂 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...
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 definitely break but we are trying hard to make it (more) stable and feature rich.
Christian Kienle Thanks for the work you are doing
Thanks Jerry Wang
Christian Kienle Where can I get more information regarding deployment?
Thank you