Scribd
Upload
186 views

Build and Deploy Simple UI5 Application

The document provides steps to build and deploy a simple UI5 application including: 1) Installing SAP Cloud Connector to expose an on-premise system to SAP Cloud Platform. 2) Using Build.me to quickly prototype a UI5 application without coding. 3) Importing the prototype into SAP Web IDE and connecting it to backend oData services. 4) Deploying the application to an ABAP system, and creating related semantic objects, catalogs, and tiles to launch the application from the Fiori launchpad.

Uploaded by

Wagner Fernandes
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
186 views

Build and Deploy Simple UI5 Application

The document provides steps to build and deploy a simple UI5 application including: 1) Installing SAP Cloud Connector to expose an on-premise system to SAP Cloud Platform. 2) Using Build.me to quickly prototype a UI5 application without coding. 3) Importing the prototype into SAP Web IDE and connecting it to backend oData services. 4) Deploying the application to an ABAP system, and creating related semantic objects, catalogs, and tiles to launch the application from the Fiori launchpad.

Uploaded by

Wagner Fernandes
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Build and deploy a simple UI5 Application

Initial Setup:

Installing and configuring Cloud Connector

Download SAPCC version 2.8 or higher from https://tools.hana.ondemand.com/#cloud.

Select Windows x86_64 version 2.8.0.1 or higher.

Download JAVA JDK. Or, if you prefer, you can download SAP JDK 8.

Once downloaded, install the JDK on your VM or physical machine:

By default, the installer selects the folder C:\SAP\scc20\.

Secure port: 8443.

The installer finds anyexisting JDK in your system.

d.

e. Accept the defaults.

Make sure the service has started as shown below:

Now open your browser and go to https://localhost:8443 to access the SAP HANA Cloud Connector
Administration.
7. The default User ID is Administrator and the password is manage. These values are case-sensitive.

a. After logging in the first time, select the Installation Type. The example uses the Master (Primary
Installation).

Click Apply.

Change the default password.


Click Save.
Landscape: select hanatrial.ondemand.com from the drop-down list

Account Name: your user ID including trial. (for example, myIDtrial)

Display Name: same as the Account Name

Account User: your userID without the word trial

Your password for HCP

HTTPS Proxy: If your environment requires you to use a proxy to access the Internet, the necessary
information
You should see the following screen:

The next step is insert On-premise landscape to cloud connection scenario.

On left menu click on Cloud to On-premisse

In Cloud to On-Premisse click in insert button


Select ABAP System and click in next

Select protocol of your system


Provide internal host ( ip or hostname ) and system port

Select Use Internal Host ( only use virtual host for mask real system name ).
Fisnish!

You should see the following screen:

In Resources section click on insert button.


Fill “/” on Url Path and select Path and All Sub-Paths.

Now your On-Premise system as exposed to SAP Cloud Platform!

Note: SAP Cloud Connector works like a VPN, all systems exposed uses your PC connections for provide
access to SAP Cloud Platforms without network configurations.

Next Step:

Configure destinations for On-Premise systems.

Logon on SAP Cloud Platform Trial:


Scroll page and click on Access Neo Trial link.

Expand Conectivity menu and click in destinations:


Click on New Destination

Fill Connection informations like above:


Additional Parameters:

sap-language=EN

HTML5.SocketReadTimeoutInSeconds=300

WebIDEUsage=odata_abap, bsp_execute_abap, odata_gen, ui5_execute_abap , dev_abap

WebIDEEnabled=true

ProxyType=OnPremise

sap-client=928

WebIDESystem=UYT

Save and Check Connection:

The next step is prototype application in build.me

Build.me is a tool to create and create prototypes of Ui5 and Fiori Like applications without codes. It can
be used to speed up the creation of applications.

Register or Logon in https://build.me


Before login, click on New Project:

Click on Create New Project

Fill Project name and Click on Start With Template


Select one of pré-build templates or select a blank template:

Design application in accord of your propose (the editor is very simple and uses WYSWYG):
After the design as completed click on Share button:

Select Download Tab and click in Download Zip of Prototype

Rename and save file in your computer:


Back to SAP Cloud Platform Trial (https://cockpit.hanatrial.ondemand.com/cockpit/#/home/trial) and
click on SAP WEB Ide button:

On your SAP WEB Ide give click on mouse right button and select Import -> File or Project
Select file of build previously downloaded

Project imported

Now it’s time to provide connection with odata service and adjust input fields with the provided data
from sap Gateway:
Select Manifest File and Go to data Source tab:

Click on add button:

Select Service catalog, select your system and search for gateway service for your project.
On next screen select default model, click in next and finish
Done! Your backend data source now is mapped in project:
Now mapping fields of data source endpoints in your screen fields:

Save and test application (CTRL + S / ALT + F5):


Data loaded for endpoint

After perform all fields mappings and setup all business rules in your application, it’s time for deploy
application em abap system.

In SAP WEB Ide using right button mouse, click over your project Deploy -> Deploy do SAPUI5 ABAP
Repository

Select your front-end system and click next:


Set Application name, description, package and click next
Select a TR and click next
Done! Finaly your application will be deployed in front-end system.

The next step is create semantic object, catalog and tiles:

To create create semantic object, in your front-end system go to /UI2/SEMOBJ_SAP, click on edit and
select new entries button:

Fill all fields of semantic object and save:

Now it’s time for create business catalog;

Open /n/iwfnd/flpd_conf (Fiori Launchpad Designer), the computer browser will be opened

In page opened click on add button:


Fill title, ID of catalog and press save
Now a empty catalog as created.

It’s time to create a static tile, click on add button:

Select App Luncher -Static


Fill title, icon, action, semantic object (same created on /UI2/SEMOBJ_SAP) and save.

Tile Created!

Now select Target Mapping tab and click in Create Target Mapping
Fill semantic object and action:

Select a type of application, fill title, URL (application path in the sicf transaction) and ID (application ID
in manifest file)

Done! Your UI5 application as completed deployed in the system.

You might also like