Integrating SAPUI5 Application into Portal

Integration of SAPUI5 Application in Enterprise Portal

Prerequisites:

1. Make sure you install the SAPUI5 Application Development feature as well as the SAPUI5 ABAP Repository Team Provider feature in you Eclipse installation.
2. Make sure that the software component SAP UI5 TEAM PROVIDER ON 731 (UI5_731) is installed on the 7.31 ABAP backend
3. 7.31 ABAP backend.

Sharing the SAPUI5 Application Project with the SAP Gateway(ABAP) Server:

Create a SAPUI5 project in Eclipse and test locally

Sharing the project :

Right click on the Application created,Team and select share project.

Select SAPUI5 ABAP Repository and click on next

Provide the ABAP system details to which you are going to upload the data and click on Next.

The SAPUI5 application project can either be shared with an existing or with a newly created BSP application.

Select Create a New BSP Application and enter name, description, and package

Create a new transport request or select an existing request and then click on finish.

Submitting the SAPUI5 Application Project to the ABAP Repository

Right click on the project which has been shared in Eclipse,Go to Team and select Submit.

Select all files and click on Finish.

This will created as an BSP Application in ABAP System.

Now logon to the Abap system to see our application.

Go to the transaction SCIF

Enter the created Application name in Service name field and execute.

You would see the submitted application as shown

Integrating SAPUI5 Application in Portal:

1. Navigate to the Portal System administration and create a system object pointing to the target ABAP system
2. Create an SAPUI5 iview with properties(System,UI5 Relative Path,HTTP Request Method) in Content Admin

      Go to Content Administration Portal Content Management  Portal Applications com.sap.portal.appintegrator.sap UI5

      Copy the UI5 application iView and paste it in your own folder.

Open the Iview and Provide the following properties.

HTTP Request Method:HTTP GET

System             :(Sytem alias)

UI5 Relative Path:Path to the backend application.

Finally Add this iview to a role.