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 intwo 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.
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
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.