SAP Fundamentals allows you to make Fiori applications using the desired UI framework (React, Vue, Angular) technology.
With this solution SAP provide developers to build Fiori applications using the web-based technology with using open source NPM libraries. This allows developers to have more flexible structure and get benefits of various libraries.
Fundamentals will not replace instead of UI5 framework technology.So the improvements in UI5 will not slow down or become outmoded. So Fiori Developers will not be dependent on a single technology and will have chance to choose their technology freely.
You can follow the latest news from the Fundamental Github page
https://sap.github.io/fundamental/index.html
You can see tecnical details , components below links for each technology.
https://sap.github.io/fundamental-react
https://sap.github.io/fundamental-ngx
https://sap.github.io/fundamental-vue
Let's develop a simple application with React.JS Framework.
To be able to develop a React.JS project, we need to have a package manager program on our computer. Among them the most popular is the NPM. You can also use YARN package manager if you want.
We need to install Node.js from the below link. Node.JS is the runtime environment for run javascript files in our PC. NPM will be installed defaultly if you finish the installation steps.
https://nodejs.org/en/
After the installation, You can open the Visual Studio Code , type the following code on terminal screen for creating the React application.
npx create-react-app <project name>
We should type cd <project name> for being in project folder.
Then we are installing react fundamental components with following command.
npm install fundamental-styles fundamental-react command
When the installation process is finished, project folder will include three folder .
node_modules folder, containing the library files
public folder, that is open to external access,
src folder, containing the source files
No more , So we can use React's Fundamental components.We will create a simply web page with the Title, Text and Buttons in the Panel.
Let's go to the App.js file. We need to import components before using them. Lets add the following code snippets to the top of the file.
Let's delete all code div elements except of "App" class div . And add the following snippets.
After completing all code changes , we can start the application by typing npm start to the terminal.App will view like below screen.
See the sample code in github.
https://github.com/yunustuzun/sap-fundamental
You can review the components above and use them in your developments. For more information click on the components.
Below github address will help to get more information and contribute to the React library.
https://github.com/sap/fundamental-react
https://www.npmjs.com/package/fiori-fundamentals
With this solution SAP provide developers to build Fiori applications using the web-based technology with using open source NPM libraries. This allows developers to have more flexible structure and get benefits of various libraries.
Fundamentals will not replace instead of UI5 framework technology.So the improvements in UI5 will not slow down or become outmoded. So Fiori Developers will not be dependent on a single technology and will have chance to choose their technology freely.
You can follow the latest news from the Fundamental Github page
https://sap.github.io/fundamental/index.html
You can see tecnical details , components below links for each technology.
https://sap.github.io/fundamental-react
https://sap.github.io/fundamental-ngx
https://sap.github.io/fundamental-vue
Let's develop a simple application with React.JS Framework.
To be able to develop a React.JS project, we need to have a package manager program on our computer. Among them the most popular is the NPM. You can also use YARN package manager if you want.
We need to install Node.js from the below link. Node.JS is the runtime environment for run javascript files in our PC. NPM will be installed defaultly if you finish the installation steps.
https://nodejs.org/en/
After the installation, You can open the Visual Studio Code , type the following code on terminal screen for creating the React application.
npx create-react-app <project name>
We should type cd <project name> for being in project folder.
Then we are installing react fundamental components with following command.
npm install fundamental-styles fundamental-react command
When the installation process is finished, project folder will include three folder .
node_modules folder, containing the library files
public folder, that is open to external access,
src folder, containing the source files
No more , So we can use React's Fundamental components.We will create a simply web page with the Title, Text and Buttons in the Panel.
Let's go to the App.js file. We need to import components before using them. Lets add the following code snippets to the top of the file.
import {Panel} from 'fundamental-react/Panel';
import {Button} from 'fundamental-react/Button';Let's delete all code div elements except of "App" class div . And add the following snippets.
<Panel>
<Panel.Header>
<Panel.Head
description="New Fundamental App"
title="Fiori 3.0 with React"
/>
<Panel.Actions>
<Button
compact
glyph="add">
Add Item
</Button>
</Panel.Actions>
</Panel.Header>
<Panel.Body>
Open-source , New UI
</Panel.Body>
</Panel>
After completing all code changes , we can start the application by typing npm start to the terminal.App will view like below screen.
See the sample code in github.
https://github.com/yunustuzun/sap-fundamental
You can review the components above and use them in your developments. For more information click on the components.
Below github address will help to get more information and contribute to the React library.
https://github.com/sap/fundamental-react
Resources
https://www.npmjs.com/package/fiori-fundamentals
https://sap.github.io/fundamental/
https://experience.sap.com/archived/democratizing-sap-fiori-with-fiori-fundamentals/
- SAP Managed Tags:
