Get Started with Visual Studio Code for Fiori development using Fiori Tools
In this blog, we will look into a different possibility of Fiori development in local environment using Visual Studio using Fiori Tools.
We will mainly cover 2 topics here, i.e.
1. How to set up Visual Studio on your system
2. How to download SAP Fiori Tools from Microsoft's Visual Studio Marketplace
Before starting with this, I just want to highlight its totaly upto you, if you want to use SAP Bussiness Application Studio(a hosted Environment) or Visual Studio Code(a local Environment). SAP BAS does not require any kind of installation on your system, as its all on cloud, but in case of Visual studio code you would be required to install node.js and other dependancies on your local system.
SAP Fiori tools is an extension pack available for Visual Studio Code and SAP Business Application Studio that is designed to increase the efficiency of SAP Fiori elements app development. SAP Fiori is SAP’s user experience, intended to provide end-users with apps that are role-based, adaptive, coherent, simple, and delightful. SAP Fiori elements provides predefined page types for SAP Fiori development, allowing users to quickly create SAPUI5 apps while taking advantage of the user interface provided by SAP. SAP Fiori tools allows users to easily generate SAP Fiori elements apps, modify the app’s functionality, generate new pages, and preview the application with both backend and mock data.
In this tutorial we will be using SAP Fiori tools to create an app featuring a list of objects, with additional pages that provide more detailed information about the items in the list. You will be able to preview this app using real backend data provided by SAP, as well as mock data.
As a prerequisite, you must be having an access to Gateway Demo System i.e. ES5 account, i.e. https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/
If you dont have access to this system, you can register to it using: https://developers.sap.com/tutorials/gateway-demo-signup.html
1) Lets being with downloading Visual Studio Code from the officail website:
Here are some resources to help you get started with Visual Studio Code
Visual Studio Code Introductory Videos
2) Now that you access to Visual studio code, you need to install the suite of SAP Fiori tools extension.
In Visual Studio Code's Activity Bar, click the icon for extensions.
Next, clear the Search Box at the top of the Extensions view, type SAP Fiori tools, and then press Enter.
Click the extension called SAP Fiori tools - Extensions Pack, and then click Install.
Once you install the Extension pack, it is recommended that you restart Visual Studio Code
Now that our Fiori Tools are installed in Visual Studio Code, we can now start developing a Fiori Application. In our case let's create an SAP Fiori elements list report page displaying a list of products.
3) We will be taking help of Application Generator, i.e. a wizard-style approach to create apps based on SAP Fiori Elements page types.
In Visual Studio Code, open the Command Palette using CMD/CTRL + Shift + P, type Application Generator, and select SAP Fiori tools - Application Generator: Launch.
5) In the next step, we define our data source for our application, i.e. in our case "Connect to an OData Service". Copy and paste this URL: https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/
After successfully connecting to the supplied OData service, click Next to customize the template.
Two more fields will appear. One for the Main Entity and another for the Navigation Entity. Since this list report is intended to display products, select SEPMRA_C_PD_Product for Main Entity. The application is simply meant to display a list of products, so set the Navigation Entity to None.
Click Next.
With the page type and data source defined, the next step is to configure the main project attributes:
| Field Name | Value |
|---|---|
| What is the module name for your application? | demofioriapp |
| What is the title for your application? | Fiori App |
| What is the namespace for your application? | demo |
| What is the description for your application? | A demo Fiori application. |
| Choose your project folder | Click the folder selection icon and select where to save your project. |
Click Finish.
At this point, your application folder will be generated based on the input you have provided.
Once your project has been generated, you will have the option to add it to your existing workspace. Verify that your project has been created and it looks similar to this:
Since the given OData service came with pre-configured backend annotations, you can preview your app right away.
6) From the Visual Studio Code Explorer on your left, right-click your project and select Preview Application.
From the options, you will need to select a npm script. Select start and press Enter to preview your app with backend data. A new browser window will open with your List Report Object Page application running.
I hope this tutorial was helpful in understanding the basics of SAP Fiori tools in Visual Studio Code. Moreover we learnt how to gevelop a list report page fiori elements project generated by SAP Fiori tools and a running application using real backend data.
Stay tuned for my futher tutorial blogs!
