📢 Introduction to SAP Fundamental Library

Dear SAPLearners, in this blog post we will learn about SAP Fundamental Library (or) SAP Fundamental Styles.

Spoiler Alert: It in not another UI framework from SAP

What is SAP Fundamental Library?

Fundamentals is comprised of a set of libraries that cover the most common UI components, patterns and layouts.

Previously it is called as SAP Fundamental and renamed to SAP Fundamental Library.

It offers a design system and component library that allow teams the flexibility to quickly implement consistent UX with Fiori 3, without needing to change the frontend framework or library.

You can find more details on their website Fundamental Library.

You still have confusion when to use the Fundamental Library. Lets try to understand more.

1. I am SAPUI5/OpenUI5 developer, can i use this in my project?

The answer is NO in fact not needed, because Fundamental library is set of UI components based on Fiori 3 which is already available with SAPUI5.

2. I am front end developer who knows React Js, Vue Js or Angular Js and want to develop SAP user interfaces, can i use?

Yes, you are most welcome to SAP.Fundamental Library Styles delivers a Fiori 3 component library for building SAP user interfaces with any web technology.

Lets look at an example on how to use fundamental library styles.

I am using Vue Js with this example but you can choose other frameworks Angular/React.

🔥 Installation

1. Create a new vue Js application using new Vue CLI. Run the following command in the terminal.

vue create demo-fundamental

2. After successful creation of vue application. Lets run following commands and run the application.

cd demo-fundamental
npm run serve

3. Below is the output of the application

Also Read: How to deploy Vue Js app to SAP Cloud Platform

4. Open the project with any editor, i am using Microsoft VS Code and below the folder structure of the project.

5. Now its time to add Fundamental Library Styles to the project. Run the following command in the terminal.

npm install –save fundamental-vue

6. After the package is successfully added, lets go back to the project and navigate to the main.js file and following lines.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import FundamentalVue from "fundamental-vue";

Vue.use(FundamentalVue);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

7. Now add Fiori Fundamentals SASS/SCSS source.

npm install --save fiori-fundamentals

8. and also

npm install sass-loader node-sass --save-dev

9. Now add a new file called main.css in the src folder and add following code.

$fd-icons-path: "../node_modules/fiori-fundamentals/scss/icons/";
$fd-scss-font-path: "../node_modules/fiori-fundamentals/scss/fonts/";
@import "../node_modules/fiori-fundamentals/scss/all.scss";

10. Import the main SCSS file in your App.vue style block to add Fiori Fundamentals styles to your project.

<template>
  <div id="app">
    <fd-button styling="emphasized">Button</fd-button>
    <fd-alert dismissible>
      Happy building! 🚀
    </fd-alert>
  </div>
</template>

<style lang="scss">
@import "./main.scss";
</style>

11. Finally its time to test the vue application.

Hurray!!! vue application with Fundamental Style library is working as expected.

Conclusion

Congrats!! you have successfully learned about SAP Fundamentals Library. So next time when you are building SAP Fiori 3 user interface using frameworks like Angular/React/Vue, try this library.

Please feel free to comment and let us know your feedback. Subscribe for more updates

If you liked it ❤️, please share it! Thanks! 🙏