Integrate SAP UI5 Application with Webdynpro and BSP Applications on SAP Enterprise Portal
Consider a common business case where we have SAP Enterprise Portal to host different application like Webdynpro and BSP for different business needs.
SAP UI5 application has a capability to embed in SAP Enterprise Portal 7.3 and can integrate with other applications like Webdynpro and BSP. This article talks more about integrating Webdynpro application, BSP application and SAPUI5 on SAP Enterprise Portal.
This technical article explores how to integrate SAP UI5 application along with Webdynproand BSP Applications on SAP Enterprise Portal.
- How to integrate SAPUI5 Application with SAP Enterprise Portal
- Navigation from UI5 application to external webdynpro or BSP applications.
- Navigating back from webdynpro application or BSP application to UI5 application.
- Returning values to SAP UI5 application from BSP or Webdynproapplications.
In this example assume a scenario where we have a UI5 application for entering material number. After entering this number, we want to display additional material details which are available in another webdynpro or BSP application within the portal.
Below UI5 application allows us to display the material number and two buttons to navigate to a webdynpro application or BSP application:
On clicking on Search button, SAPUI5 application will navigate to Webdynpro application with material number and displays Material# and Material creation date in webdynrpo application:
Similarly clicking on ‘Display material in BSP’ button, SAPUI5 application will navigate to BSP application and display Material description in BSP application:
In both cases, on clicking on Return button, we navigate back to UI5 application and return some value from BSP or Webdynpro application in ‘Material number’ textbox. In my example for sake of simplicity we are returning ‘123’ to ‘Material Number’ textbox of SAPUI5 application:
1. How to integrate SAPUI5 Application with SAP Enterprise Portal
In order to display the UI5 application, we first need to create an iView. An iView is a portal content block representing the application or part of it. Creating SAPUI5 iViews explains how we can make create an SAPUI5 iView.
Since, SAPUI5 iViewsare only available in SAP Netweaver 7.3 Support Package Stack 09, in case of older versions; we can make use of URL iViews. In this blog we will focus on using an existing iView to display our UI5 application:
1. Navigate to the content administration tab in the portal.
2. Select an existing URL iView:
3. Enter the URL of the UI5 application in field URL:
4. To pass any additional values to the UI5 application, enter the parameters in field Parameters to Pass from Page Request (for URL isolation) in the property editor:
5. Now, the UI5 application will now be visible in the portal on clicking the link associated with this iView:
2. Navigation from SAP UI5 application to external webdynpro or BSP applications.
Navigation from SAPUI5 to webdynproapplication:
We would like to enter the material number in the UI5 application and same material number and creation date are displayed in webdynpro application.
To enable passing of the material number to the webdynpro application, we need specify what parameters we need to pass to the webdynproapplication. Inside the webdynpro application, we will extract this parameter value and use it to initialize its content.
This will work as shown below:
1. Search button clicked in UI5 application
2. Navigation to webdynproapplication
The following needs to be done to enable this:
1. Open the property editor corresponding to the iView for this webdynproapplication and specify the parameter to pass to it:
2. In the webdynpro, we need to add parameters to the event handler for the startup plug. This will be called whenever we navigate to this application:
3. We can then use this parameter within our webdynproapplication and update the context node in WDDOMODIFYVIEW method:
4. Now, to pass the material number to this application, we can specify it in the URL for this webdynpro application in the following format:
<Namespace>/<application name>?<parameter name>=<parameter value>
We get the following output:
5. Now that we have the webdynpro configured to accept the material number, we need URL links so that we can navigate directly to this webdynpro application within the portal from our UI5 application. This can be done by appending the PCD (Portal content directory) location to the portal URL.
The PCD location for the webdynpro application is present in the properties editor for the iView:
Using this, the complete URL for the application is:
6. To open this page from the UI5 application, we can use the following code:
location.assign(“https://portalserver/irj/portal?NavigationTarget=ROLES://<PCD_location>?matnr=“ + this.byId(“inpMaterial“).getValue());
Navigation to BSP application
After entering the material number, and clicking on button “Display material in BSP”, we will navigate to a BSP application which will display the material description:
1. ‘Display material in BSP’ button clicked in UI5 application
2. Navigation to BSP application
To navigate to BSP application, we need to repeat steps 1, 4, 5 and 6 to pass the parameter to the BSP application and open it. To enable the BSP application to read the URL parameter, we need to use the following code in DO_REQUEST method of the controller to extract the parameter from the URL:
l_main_view = create_view( view_name = ‘test.htm’ ).
fields = li_field ).
READ TABLE li_field WITH KEY name = ‘matnr’ INTO li_field_line.
UP TO 1 ROWS
WHERE matnr EQ li_field_line–value
AND spras EQ sy–langu.
name = ‘matnr‘
value = l_description ).
3. Navigation from Wedynpro application to UI5 application
In order to navigate from back to the UI5 application, we can make use of an exit plug in the window of our webdynpro application. The exit plug is used to close the webdynpro and its associated webdnyproapplication. Exit plugs can have a special URL parameter so that when we close the application using this method, we can navigate to the web application specified in the URL parameter.
In this case, we have a return button, which will allow us to return to the UI5 application, by clicking on it:
This is done in the following way:
1. Add an exit plug to the webdnypro window and a URL parameter:
2. In the webdynpro view, add a component usage for this window:
3. In the event handler ONACTION for this return button, we need to get the reference to the parent window and then fire the exit plug to exit the webdynpro application and open the UI5 application:
Now, clicking on return button, we can navigate back to the UI5 application.
Navigation from BSP application to UI5 application
In case of BSP application, we can make use of attribute navigation present in the controller class to navigate back to the UI5 application. This can be done in DO_HANDLE_EVENT of the controller class:
In this example, on clicking ’Return’ button, we navigate back to the UI application:
‘Return’ button clicked in BSP application:
1. ‘Return’ button clicked in BSP application
2. Navigation to UI5 application
4. Navigating back to UI5 application with additional parameters
To pass additional parameters to the UI5 application, we can add parameters in the URL in the following format:
<URL of UI5 application>?<parameter1>=<value1>&<parameter2>=<value2>…
For example, to initialize the text field in our application with some value which has been specified by some external application, we can use the following method:
Now, if we add matnr=123 to the URL of the application, we will get the following output:
URL in browser address bar: http://localhost:58207/TestProject/index.html?matnr=123