BSP Fiori Application geliştirme. Eclipse.How to Deploy and Run SAPUI5 application on ABAP Server

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.

ui5_abap1.jpg

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

ui5_abap2.jpg

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.

ui5_abap3.jpg

 

Procedure –

 

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

ui5_abap4.jpg

Select repository type as SAPUI5 ABAP Repository.

ui5_abap5.jpg

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

ui5_abap6.jpg

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

ui5_abap7.jpg

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

ui5_abap8.jpg

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.

ui5_abap9.jpg

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.

ui5_abap10.jpg

In this step, you can perform selection of Transport Request. You will be provided with below 3 options.

ui5_abap11.jpg

You will get below kind of popup message for Server Runtime Version Check. Click OK.

ui5_abap12.jpg

Final step of the deployment will be submitting the project. Select option Team –> Submit.

ui5_abap13.jpg

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

ui5_abap14.jpg

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.

ui5_abap15.jpg

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.

ui5_abap16.jpg

Here you can see URL path which is nothing but the BSP application URL path got created in SICF transaction.

ui5_abap17.jpg

If you see in backed SAP system, BSP application will get created as displayed below.

ui5_abap18.jpg

Also you can see service getting created under the path /sap/bc/ui5_ui5/sap/zflightdemo in SICF transaction.

ui5_abap19.jpg

 

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.

 

resubmit.png

 

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.

before_resubmit.png

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.

after_resubmit.png

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)