Skip to Content

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

/wp-content/uploads/2014/01/image2_357050.gif

Sharing the project :

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

/wp-content/uploads/2014/01/img3_357051.png


Select SAPUI5 ABAP Repository and click on next

/wp-content/uploads/2014/01/img4_357052.png

Picture1.png


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

Picture2.png


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

Picture3.png



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


Picture4.png

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

Picture5.png

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.

Picture6.png

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


Picture7.png


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

You would see the submitted application as shown

Picture8.png

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.

Picture9.png

Open the Iview and Provide the following properties.


HTTP Request Method:HTTP GET

Picture10.png


System             :(Sytem alias)

Picture11.png


UI5 Relative Path:Path to the backend application.


Picture12.png


Finally Add this iview to a role.

Picture1.png


To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Dwity krushna Panda

    Hi ,

    Very Nice Blog.

    But i am facing issue in bringing the UI5 application into EP.

    I followed the above steps, but still its not working

    The error being the ‘Xframe in SAME ORIGIN’

    Regards

    (0) 
  2. Dhara Patel

    Hi,

    I have created SAPUI5 iview and i want to show standard fiori application in EP portal 7.4 sp11.

    Set the relative path for Manage Purchase Order: /sap/bc/ui5_ui5/sap/MM_PR_PRCS1

    but when i trying to open this iview, it gives error: File sap/MM_PR_PRCS1/index.html NOT found!


    I think in Wave 2 application ,there is no index.html.


    BR,

    Dhara

    (0) 

Leave a Reply