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
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
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/
When we test the service, we will get the list of the functions
inside the ODATA.
Click next to continue.
Then we will customize the template according to our need. Note
that the template has limited number of fields; we can add more as per
requirement.
Now we have created our first Fiori application, without a single
line of code!!!
The following structure is created.
The output will be like:
We can customize this application according to our requirement.
In the next blogs we will see:
1.
GIT functionality
2.
Project structure details
3.
HANA cloud connector (installation and
configuration)
That’s all!
