Skip to Content
Technical Articles
Author's profile photo Amy Li

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.

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Probhat Deuri
      Probhat Deuri

      Good article.

      Author's profile photo Thanh Phuoc Dang
      Thanh Phuoc Dang

      Nice

      Author's profile photo Michelle Crapo
      Michelle Crapo

      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.

      Author's profile photo Jefferson Januario Santos
      Jefferson Januario Santos

      Thanks for sharing Amy Li!

      Author's profile photo Felix Gloeckner
      Felix Gloeckner

      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!

      Author's profile photo Vishal Khanna
      Vishal Khanna

      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.

      Author's profile photo Tahir Naqqash
      Tahir Naqqash

      Some product ID, does not have good name 🙂

      Author's profile photo Amy Li
      Amy Li
      Blog Post Author

      Thanks very much for your remind Tahir. I just havn't noticed it before and I just retreive data from some on premise system...

      Author's profile photo Brijesh Gandhi
      Brijesh Gandhi

      Hello Amy ,

      Could you please publish one blogpost on how to deploy Angular App as an MTA ?

       

      Thanks in advance !