SAP Fiori with SAP Web Integrated Development Environment

SAP Web IDE is a next generation, browser based solution which will help developers to work in collaboration and design highly effective UI’s that will work with other SAP applications. Essentially it is Eclipse inside a browser.

Advantages of Web IDE:

1. Browser based IDE

2. Easy wizard based UI

3. Integrated GIT for easier versioning

4. Ideal for asynchronous developments

5. Uses standards such as Orion, GIT.

6. Designed to support end to end lifecycle for SAPUI5 applications

7. Extend existing Fiori application

8. Create new HTML5/ Fiori applications

9. Always available to the developer.

SAP Web IDE is a part of SAP HANA Cloud Platform. SAP Web IDE accesses destinations defined in HANA Cloud and connect them using a HANA Cloud Connector.

Prerequisites

1. HANA account

2. HANA Cloud Connector (when connecting to the on premise systems)

Step-by-Step Procedure

1. Subscribe to SAP Web IDE

2. Web IDE basic information

3. GIT information

4. Creating destinations in HCP

5. Create a simple Fiori application

Subscribe to SAP Web IDE

1. Go to https://account.hanatrial.ondemand.com/ and login to the cockpit.

2. Go to subscriptions section.

3. In the HTML5 subscription dashboard, link to the RDE is provided

4. In the roles section, we can define custom roles that will access application deployed or subscribed I your account. Currently we will not define any roles.

5. Click on the application URL and it will take you to the Web IDE.

WEB IDE basic

1. On the top we have options which are similar to the Eclipse.

2. We can create a blank project or select from the templates or select an existing application and start customizing it!

Below images shows the same.

GIT Information

To use GIT in SAP Web Ide, we need to provide username and mail id of the GIT account. We do that in tools->GIT settings

Main operations that we can use using GIT

1. Configuring GIT for create, read, update, delete repositories

2. Clone existing GIT repository

3. View changed files

4. Commit changes

5. Push changes.

We will study GIT in detail in the next document.

Creating Destinations in HANA Cloud Portal

Here, in this example we will use public Gateway service to build a Fiori application. So we don’t have to use HANA Cloud Connector. We will simply use destination functionality of HCP.

Destinations in HCP help us to connect to the remote system.

Sapes1.sapdevcenter.com provides open ODATA services, which we will use in creating destinations.

In the cockpit go to Destinations, provide name and relevant details.

We need to ad few new properties which will make the connection to the desired SAP system which will provide us the ODATA.

Save the destination.

Now we will configure destinations for UI5. The HCP needs to know that we are building applications using UI5.

Create 2 destinations as follows. One for UI5 distribution and another for UI5 test distribution.

So, currently we have 3 destinations.

Restart the Web IDE.

Create a simple Fiori application

Now we will see how simple it is to use the ODATA service and to build a Fiori application. Create a new project and select project from template option.

To get access of the ODATA, we need to register for the services. Once registered, we will get the mail with the logon details. Please follow the procedure as mentioned in

http://scn.sap.com/docs/DOC-40986

We will name it as Test1 and click next.

Now, we need to pass the ODATA reference. As we have mentioned destination in the HCP we will use service URL as an option. Notice that in the destination section we have given only the domain name of the system which we want to connect. So, we will just give relative URL of the service.

We will use sales order service for our demo. /sap/opu/odata/sap/ZGWSAMPLE_SRV/