Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
And on backend SAP system, you need to have below components.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Procedure –
As displayed below, we need to right click on Project and go to menu Team –> Share Project.
Image may be NSFW.
Clik here to view.
Select repository type as SAPUI5 ABAP Repository.
Image may be NSFW.
Clik here to view.
In this step, you need to configure connection to SAP system where you want to deploy your SAPUI5 application.
Image may be NSFW.
Clik here to view.
After successful connection to SAP system, it will display properties of connection.
Image may be NSFW.
Clik here to view.
On click of Next button, logon screen will be displayed. Provide credentials of SAP system.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
In this step, you can perform selection of Transport Request. You will be provided with below 3 options.
Image may be NSFW.
Clik here to view.
You will get below kind of popup message for Server Runtime Version Check. Click OK.
Image may be NSFW.
Clik here to view.
Final step of the deployment will be submitting the project. Select option Team –> Submit.
Image may be NSFW.
Clik here to view.
As displayed below, it will ask resources to submit. Click on Finish.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Here you can see URL path which is nothing but the BSP application URL path got created in SICF transaction.
Image may be NSFW.
Clik here to view.
If you see in backed SAP system, BSP application will get created as displayed below.
Image may be NSFW.
Clik here to view.
Also you can see service getting created under the path /sap/bc/ui5_ui5/sap/zflightdemo in SICF transaction.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
