SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE

My First SAPUI5 Application using SAP Web IDE

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.

Prerequisites:

  1. You have access to SAP Web IDE. Refer to this article in case you do not have access to SAP Web IDE.
  2. 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

Step 1: Once SAP Web IDE. Click on File -> New -> Project from Template to open the new project creation wizard.
SAP Web IDE and SAPUI5 application
Step2: Select “SAPUI5 Master-Details Application” and click on Next.
SAP Web IDE and SAPUI5 application
Step3: On the Basic Information enter the project name “MyFirstProject” and click on Next.
SAP Web IDE and SAPUI5 application

Step4: 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.
SAP Web IDE and SAPUI5 application
Note: If you do not see Northwind OData Service, then refer to this article and configure that.

Step 5: 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.
SAP Web IDE and SAPUI5 application
Click Finish to create the application.

Step 6: The project “MyFirstProject” will appear in the workspace.
To run the project right click on project and select Run -> Run index.html
SAP Web IDE and SAPUI5 application
Step 7: The project will open in a new tab as below.
SAP Web IDE and SAPUI5 application
Congratulations! You’ve created your first SAPUI5 application using SAP Web IDE.


Support us by sharing this article.



Explore More
Close X
Close X

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy