In previous articles Prerequisite for SAPUI5 and Fiori
, What is SAPUI5?
, What is Fiori?
, we explained the basics of SAPUI5 and Fiori. We also talked about SAP Web IDE and how to get started with that
In this article, we will get our hands dirty and create an SAPUI5 application using SAP Web IDE.
Start your stop watch – this will not take more than 5 minute.
- You have access to SAP Web IDE. Refer to this article in case you do not have access to SAP Web IDE.
- You have configured your OData service in HCP destination. Refer to this article to know how to do it.
Follow below Steps to create SAPUI5 application
Once SAP Web IDE. Click on File -> New -> Project from Template to open the new project creation wizard.
Select “SAPUI5 Master-Details Application” and click on Next.
On the Basic Information enter the project name “MyFirstProject” and click on Next.
On the Data Connection page, click on Service URL
as service source. It will show all the Destination for which WebIDEEnabled is true. Select “Northwind OData Service”.
Enter the relative path to the OData. Be sure not to include any trailing space characters.
In this case the relative path is “/V3/Northwind/Northwind.svc
Click on Test and Next to proceed.
If you do not see Northwind OData Service, then refer to this article
and configure that.
On the Template Customization
page we need to specify the project settings and configure OData field to UI fields. Specify the values as per below image.
to create the application.
The project “MyFirstProject” will appear in the workspace.
To run the project right click on project and select Run -> Run index.html
The project will open in a new tab as below.
You’ve created your first SAPUI5 application using SAP Web IDE.