Build Angular Application with SAP Fiori Fundamentals
I believe that SAP Fiori will be more and more open for the popular H5 frameworks, like Angular, VUE etc. And now SAP has published SAP Fiori Fundamentals wich is based on SCSS, which make web application looks like a Fiori sytle application.
So I tried to create Angular project and use Fiori Fundamentals to render it. Below is the recording and screenshot of demo:
Is it a Fiori-look application??
Next, I will give the steps I’ve completed.
- create Angular project with scss style.
ng new project_name
- install Fiori fundaments in this project.
npm install fiori-fundamentals --save-dev
- add below code in src/style.scss
$fd-icons-path: "~fiori-fundamentals/scss/icons/"; $fd-fonts-path: "~fiori-fundamentals/scss/fonts/"; @import "~fiori-fundamentals/scss/all.scss";
- add below code in your scss file corresponde to your component:
@import "~fiori-fundamentals/scss/settings"; @import "~fiori-fundamentals/scss/mixins"; @import "~fiori-fundamentals/scss/functions";
- Then you can refer to SAP Fiori Fundamentals to create your html template file. Now let’s take tile page for example.
<div class="fd-tile-grid fd-tile-grid--1col"> <div class="fd-product-tile" role="button" style="margin-left: 0.5rem" routerLink="/files"> <div class="fd-product-tile__media" style="background-image: url('https://experience.sap.com/wp-content/uploads/2019/05/INM-CEI.jpg');"> </div> <div class="fd-product-tile__title"> <h3>Files Repository</h3> </div> <div class="fd-product-tile__content"> You can find all of the files here. </div> </div> <div class="fd-product-tile" role="button" style="margin-left: 0.5rem"> <div class="fd-product-tile__media" style="background-image: url('https://experience.sap.com/wp-content/uploads/2019/05/Picture1-800x400.jpg');"> </div> <div class="fd-product-tile__title"> <h3>Simulate Tile</h3> </div> <div class="fd-product-tile__content"> This is just a fake tile. </div> </div> </div>
- in the above code, you can see that I used fd-tile-grid and fd-product-tile as my class, which make the home page looks like launchpad tiles.
I thought about how to deploy it to the launchpad, and found a solution, that is create a static tile in launchpad designer, and do not use semantic object and actions, just configure the angular application url as the target url. In this way, even if customer is using their own web server for angular based applications, it’s also easy to integrate them to Fiori launchpad.
Any suggestion or revise is welcomed! If you’re also interested in this topic, don’t hesitate to add the comment.
Very nice! And it made me learn something on a Monday beyond this blog. I had to look up Angular It is another tool to add to my growing tool belt.
Thanks for sharing Amy Li!
Hey Amy LiAmy Li! ,
thanks for the blog post ! But could you may add information on how to start the app/component? When i just try to open the components html file with Chrome, it does not render the fiori elements.
Thank you very much!
Thanks for the wonderful article.
Our Angular App also does SAP ODATA calls. Can you please share some details on how can an Angular App running in SAP Launchpad get the CSRF tokens from Launchpad environment and then use it to do CRUD ODATA operations.
Thanks in advance.
Some product ID, does not have good name 🙂
Thanks very much for your remind Tahir. I just havn't noticed it before and I just retreive data from some on premise system...
Hello Amy ,
Could you please publish one blogpost on how to deploy Angular App as an MTA ?
Thanks in advance !