Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member190085
Participant

Hi Portal-UI5 developers,

  I know that there is a big group of java deveopers like me who started their career as a java developer in SAP Enterprise portal and now moving

their UI development platform from jsps and Webdynpros to SAP UI5. This is my first blog on UI5 as a result of how we managed to implement a SAPUI5 solution in portal which needs to access portal specific data.

Scenario:

As a common scenario, a customer will want SAP UI5 applications to be accessed from Netweaver portal where a portal is already in place. And if the data to

be shown on the UI5 is to be retrieved from an SAP system, the solution will be prefered to deploy UI5 applications on the BSP repository of ABAP system and

consume odata services.

In such a requirement, the customer will also want some portal user specific data to be shown on the UI5 screen (eg., portal user name) or to be sent from

the UI5 screen to the odata service call (eg., portal user id, portal sessionid, etc..) for business purposes.

Restriction:

Either from URL iview or from a SAP UI5 iview, UI5 applications are only created inside an iframe in portal, so it's javascript cannot read anything from

the portal frame. So, a conventional solution to it would be to call a rest service hosted in portal from UI5 application, but it will also be blocked if

the UI5 application is hosted in ABAP repository.

My solution below is very simple to implement and will apply for any UI5 application independent of whether it is deployed on SAP Java Web AS of portal or

on ABAP BSP repository of an ABAP system.

Solution:

We can have an iview hidden in the framework page whose javascript is filled with all portal specific data required for UI5 applications. In this javascript

code, the domain of the application can be set to a customer domain value instead of portal's FQDN. Similarly the domain of the UI5 application can also be

set to the same value, after which UI5 application can read the value set by the APC through javascript, when it is created as an iview. Follow the steps

below for detailed description.

Step1: Create an Abstract portal component(APC) and deploy on Netwaver portal server

Create the APC and fill the doContent() as below to get the user details to javascript. The important javascript setting done here is to change the

domain to the generic customer domain value. i.e, for example, if the portal's FQDN 'devportal.abccompany.com', then change the doamin to just

'abccompany.com'. This will now enable the javascript with the same domain in any iframe to read this javascript.

Step2: Create an iview for this APC and add it to the portal framework page and make it hidden.

After deploying the portal project, Create an iview for this APC and add it to the framework page used by all users. It's preferable to add the iview after

masthead so that it will be loaded first and will always be loaded. And, atlast hide it by setting the height to zero.

Step3: In the UI5 application, read the portal window to get the required data.

The first code to add in the UI5 applications's javascript is to set the domain to the same value set by the APC. After this, we will now have to get the

portal window, where the APC's scripts are written. As the UI5 application is now in the portal frame as an iframe, we can navigate to the parent above till

the outermost portal window is reached, which can be checked by using the location. See the code below to get a better idea.

I have used a count to loop for a maximum of 10 to avoid infinite loops just in case if the UI5 applications is tested outside portal.

I hope the simple snippets are easy to understand and to implement if you face such scenario. Leave your comments if this blog is useful.

Later i found that this approach will also make it possible to use standard portal javascript functionalities like LSAPI, EPCF from the UI5 applications. For example, To use EPCF, the EPCM object can be accessed like below.

portalWindow.EPCM.doRelativeNavigate(args)

Regards

Vijay.K

3 Comments