How to Deploy and Run SAPUI5

application on ABAP Server

created by Chandrashekhar Mahajan on Jun 15, 2013 6:55 PM, last modified by Chandrashekhar Mahajan on
Jul 31, 2013 12:55 PM
Version 2
Tweet

Introduction -

In my earlier blog, we saw how to create SAPUI5 application consuming OData service.

In this technical article, we will see how we can deploy and run SAPUI5 application on SAP
ABAP server.

Prerequisite -

To run application on ABAP server, we need to have ABAP Development tools and SAPUI5
ABAP Repository Team Provider plugin installed into your Eclipse IDE.

And on backend SAP system, you need to have below components.

Before deploying this application into SAP ABAP AS, if we see Run As menu, it will display
below options. Once it will get successfully deployed, it will show option for testing on ABAP
server.

Procedure -
As displayed below, we need to right click on Project and go to menu Team --> Share Project.

Select repository type as SAPUI5 ABAP Repository.

In this step, you need to configure connection to SAP system where you want to deploy your
SAPUI5 application.

After successful connection to SAP system, it will display properties of connection.

On click of Next button, logon screen will be displayed. Provide credentials of SAP system.

Now you will be provided with 2 options as below. We will select option to create new BSP
application. By default, name of BSP application will be selected as your SAPUI5 project name.
But in that case, you will get error message as displayed in below screen.
You need to give Z* name to your BSP application. Also you can browse package and select
required package in which you want to save your BSP application.
In this step, you can perform selection of Transport Request. You will be provided with below 3
options.

You will get below kind of popup message for Server Runtime Version Check. Click OK.
Final step of the deployment will be submitting the project. Select option Team --> Submit.

As displayed below, it will ask resources to submit. Click on Finish.

With this step, SAPUI5 application will get deployed to SAP ABAP AS Server and SAPUI5
project structure will look like as below.

Notice the changes between before and after deployment.

Also you will see now Run on ABAP Server option got added as displayed below. By selecting
this option, SAPUI5 application will run on ABAP server.

Here you can see URL path which is nothing but the BSP application URL path got created in
SICF transaction.
If you see in backed SAP system, BSP application will get created as displayed below.

Also you can see service getting created under the path /sap/bc/ui5_ui5/sap/zflightdemo in
SICF transaction.
Closing Remarks -
We can easily deploy and run SAPUI5 application on ABAP server. Basically, in the backend
SAP system, BSP application gets created when we share and submit SAPUI5 project.

Updates (Resubmitting UI5 project) -

We can easily resubmit the changes done to the UI5 application. after doing changes in UI5 application,
you need to again submit the project. in that case, you will see below screen with operation as Update.

I created UI5 application with input field and submitted as explained in this technical article. below is the screen of
BSP application executed which I created for UI5 application.

After that, I added TextView UI element and again submitted the project. I again executed BSP application which
reflected back the changes I did to my UI5 application.