Develop UI5/Fiori Application in Visual Studio Code- Part-I
In this Blog post, we will see how to create SAP UI5 application in Visual studio code. Before we Start, I just want to highlight one thing, SAP Business Application Studio(BAS) does not require any kind of installation on your system, as its all on the cloud, but in case of Visual Studio Code, you would be required to install node.js and other dependencies on your local system. To create SAP UI5 application, we can create in two ways.
- Using NPM Commands
- Using Yeoman Generators
In this blog we will create our application in both the ways.
Before we start, we need to ensure that our computer is setup properly. Node.js should be installed and configured properly.
- Node.js – https://nodejs.org/en/download/
- VsCode – https://code.visualstudio.com/download
How to check node has installed.
- Type cmd and Run as Administrator . one popup will come click on ‘Yes’.
2. Now check node intalled or not , by using command node -v and npm -v in the command terminal.
Congrats..!!, Node.js has installed successfully in your system. Now we will quick starts developing UI5 application in VScode. As I have said above We can create in two Ways.
Lets Start with Yeoman Generators.
1. Using Yeoman Generators.
Step 1. In Visual Studio Code’s Activity Bar, click the icon for extensions.
Step 2. Type SAP Fiori Tools in the search bar, and press enter.
Click the extension called “SAP Fiori tools – Extension Pack”, and then click Install.
Recommended Extension to install
- SAP UI5 Extension
- XML Toolkit
Once you install the Extension pack, it is recommended that you restart Visual Studio Code.
Now that everything has installed properly, its time to create UI5 application with OData Services. We will be taking help of Application Generator, i.e. a wizard-style approach to create apps based on SAP Fiori Elements page types and UI5.
Step 3. In Visual Studio Code, open the Command Palette.
Step 4. Type Application Generator, and click on it.
Step 5. Now the command pallete will close and a new window would open. Here, You will see Application Type , comes in ComboBox, where you can select your application type i.e. either you want to create SAP Fiori elements application or SAPUI5 freestyle.
As we will create UI5 Application, so I have selected SAPUI5 freestyle. In that , select SAPUI5 Appplication and click on Next.
Step 6. In the Next step, we have to define our datasource for our application. If you don’t have any services then select None and proceed. But in our case , we are using OData Service. So we have to select ‘Connect to an OData Services’. Copy and paste the URL of your OData Service.
URL : – http://hostname:port/sap/opu/odata/SAP/ZCRUD_SRV/
After successfully connecting to the supplied OData service, click Next to customize the template.
Step 7. Give the View Name and click on Next.
Note: If you are creating Fiori Application, then two more fields will appear. One for the Main Entity and another for the Navigation Entity.
Step 8. With the page type and data source defined, the next step is to configure the main project attributes and at last click on Finish.
Here is the Application, which gets created with Yeoman Template.
Step 9. To run this application, right-click on the project folder, select Preview Application. Four options will come, from that select Start and press Enter.
Note : If you want to create more view and controllers, you have to create it manually with this approach. There is no option like it was in WEBIDE. 🙁 .
Hope, this blog was helpful to quick start creating UI5 application in Visual Studio Code.
We will see the other way i.e. Using NPM Commands in my next blog(Part-II). 🙂
Thanks and Cheers!!
hi, nice getting started guide!
you might also want to check out the "easy-ui5" generator for UI5 scaffolding. gives you lots of bang for the buck for OpenUI5 development!
Hi Volker Buzek,
Yeah, thought to show "easy-ui5" generator , but unfortunately it got skipped.
Thanks for bring it out here.
Hi Chaitali Pandya ,
Thank you , it is very informative with clear steps. I have below doubts. Could you please help me to sort it out.
Thanks in advance,
Hi Jayakrishnan Chandramohan,
Thanks for the comment. For your 1st query, you have to reinstall extension again, if the issue still there , install extension package through CLI, then it will be resolved.
and for your 2nd query , you have to right click on manifest.json-> select open service Manager . There you can add Multiple services.
Hi Chaitali Pandya ,
Thanks for your reply. I tried to install the extensions via CLI. It is installed but while creating the
project from CLI/VS Code wizard there are some decencies are missing.
i.e.) node modules, package.json, UI5.yaml and some of the files are not generated
i am suspecting in the npm registry level.
As i am using the client network, they are restricting the npm registry. so i am accessing the registry to proxy URL. Do you have any idea on this?