Scribd
Upload
79 views

Microsoft Visual Studio Code - SAP Fiori Tools Installation Guide

Uploaded by

Channel Uchannel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
79 views

Microsoft Visual Studio Code - SAP Fiori Tools Installation Guide

Uploaded by

Channel Uchannel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

SAP Fiori Tools Installation Guide

Since SAP WEB IDE is not available from November, We are going using SAP
Fiori Tools.

This document helps you install SAP Fiori Tools to develop Fiori apps using Fior
Elements.

Business Application Studio is Hosted on Cloud, where SAP Fiori Tools in Visual
Studio Code is on a local machine.(on your computer)

What are SAP Fiori Tools:

SAP Fiori tools makes it much easier for us to build SAP Fiori elements apps. It
eliminates much of the hand coding and poring through documentation to find
the right annotation to make the app work the way we want.

System Requirements:
https://code.visualstudio.com/docs/supporting/requirements
Must have installed nodeJS: https://nodejs.org/en/download/

Downloading Microsoft Visual Studio Code:

1. First we need to download Microsoft Visual Studio Code using the link
https://code.visualstudio.com/download

2. Once the file is downloaded, click on it to install. Following dialog box


appears.
3. Select ‘I accept the agreement’ & click on next , select the installation
path.( keep the default path or your choice of location).

4. Click on next, you will get the below dialog box


.
5. No need to make any changes in the above dialog box, click on next to get
the below dialog box , here make sure you marked the checkbox as shown
in the below screenshot & Click Next.
6. Click on Next, as shown below to start the installation.

7. Once the installation is complete you will get the below screen. Click on
finish to launch.
8. On Launch you will get the below screen. If you reach till here, Visual
Studio Code installation is successful.

Install SAP Fiori Tools:

1. Run Microsoft Visual Studio, click on Extensions as shown below.


2. Search for SAP SE, and select ‘SAP Fiori Tools - Extension Pack’ in the list.
Click on ‘Install’. While will install all the required

3. On Successful installation your screen looks as below.

4. Now click on ‘Explorer’, as shown below.


5. To check if the required ‘SAP Fiori Tools App Generator’ is installed, use
Ctrl+Shift+P to launch command palette and search for Application
Generator and choose that to create SAP Fiori App
6. If everything went well, you should get the below screen.

You have successfully installed SAP Fiori Tools.

Troubleshooting:

Important: If you don’t get ‘SAP Fiori Elements application’ as shown


above, run the below commands.( you can copy paste )

On Windows: npm install -g @sap/generator-fiori-elements


On MacOS: npm i @sap/generator-fiori-elements

● To run the command in windows, open powershell using windows


search and execute.
Type or copy paste the command as shown below and press enter. This
will install required components.

In case you get any error as below

Try to run the command ‘npm cache clean -f’ and re-run the command
npm install -g @sap/generator-fiori-elements

You might also like