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.

1. create Angular project with scss style.

   ng new project_name​

2. install Fiori fundaments in this project.

   npm install fiori-fundamentals --save-dev​

3. 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";​

4. 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";​

5. 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>​

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

Easy? ?

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.