SAP EP 7.0 INTEGRATION WITH SAP UI5
THROUGH
ENTERPRISE PORTAL CLIENT FRAMEWORK
About this Blog:
Most of the SAP User’s custom applications are written in Java DynPro.
If the user wants to migrate from Java DynPro to SAP UI5 for make the application as mobile enabled, then it likely to take more time.
But we can integrate SAP UI5 and Java DynPro that allows exchange of messages or events or data between Java DynPro and SAP UI5 by Enterprise Portal Client Framework (EPCF).
For Example, if the new ticketing application is developed by SAP UI5, then this UI5 app can be invoked from Portal by passing the ticket ID from old Java DynPro. This blog post is for portal developers who would like to exchange data between the SAP UI5 application and WebDynPro application.
Targeted user for this blog:
- Java DynPro Developers.
- SAP UI5 Developers.
The Problem statement:
Exchange the data between SAP UI5 and Java DynPro.
Since portal applications are rendered in their own IFrame only. It does not have access across the iFrames.
Solution:
Even Though the challenge is quite high, this is possible to make the communication between Java DynPro and SAP UI5 via EP 7.0 by relax the cross origin policy explicitly and EPCF proxy APIs.
Pre- Requisites for develop the sample application development:
- Netweaver Developer studio for Java DynPro development.
- Eclipse with SAP UI5 plugins for SAP UI5 creation.
- SAP EP 7.0 Server for run the portal application.
Relaxing of the Same Origin Policy
The Same Origin Policy (SOP) is a security mechanism that prevents JavaScript code running on a Web page from interacting with any resource not originating from the same site. In SAP applications, the SOP is automatically relaxed by one level by removing the host name from the fully qualified domain name. With the relaxed document domain, applications can share information between frames as long as the systems they run on are in the same subdomain.
For domain relaxing, you have to include the following code before any EPCF method calls:
<script>
var lnDotPos = document.domain.indexOf( "." );
if(lnDotPos>=0)document.domain = document.domain.substr(lnDotPos+1);
</script>
Data flow in our exercise:
The WebDynPro Sender application will pass the Event parameter .The Passed parameter will be captured in WebDynPro Receiver application and SAP UI5 application.
![dataflow.jpg]()
Sample Exercise:
WebDynPro application creation:
- Create the WebDynPro project in SAP Netweaver Developer Studio.
![WebDynpro Porject Creation.png]()
Sender Application creation:
2. Create the “EventSender” WebDynPro application.
3. Create the Component , Window and View for the “EventSender” Application.
4. Create Input field in Sender View and bind the input field to the context value attribute.
5. Create the “show” button and specify the Action for the “show” button.
![Sender App Creation.png]()
6. Raise the Portal Event:
You can fire a portal event anywhere in your WebDynPro application.
In our exercise we have sent the event to the client in onActionShow Event Handler.
OnActionShow Event Handler:
public void onActionshow (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
{
String nameval = wdContext.currentContextElement().getName(); WDPortalEventing.fire("urn:com.sap.tc.webdynpro.example.portaleventing","show", nameval);
}
Listener Application creation:
7. Create the event Listener Application in the created Project – ‘WebDynPro_Portal_Event’ Project.
8. Create the Component, Window and View for the EventListener Application.
9. Once Created the Sender and Listener application, the structure will be look like below.
![webdynpro Project Structure.png]()
10. Create the ‘Text View’ for print the entered value in ‘sender view’ and bind the text view to the 'context value attribute' in the ‘Listener View’
![listener view.png]()
11. Subscribe the Event by write the below code in the Listener View controller ‘WdInit’ method.
public void wdDoInit ()
{
//@@begin wdDoInit()
WDPortalEventing.subscribe("urn:com.sap.tc.webdynpro.example.portaleventing","show",wdThis.wdGetReactPortalEventingAction());
//@@end
}
12. Then Create the Event Handler Action along with ‘dataObject’ parameter and trigger this action from the WDPortaleventing.Subscribe API.
![receiver action.png]()
13. Then Read the data Object and set it to the context value attribute for print the entered value in the eventSenderView.
public void onActionReactPortalEventing(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, java.lang.String dataObject )
{
//@@begin onActionReactPortalEventing(ServerEvent)
wdContext.currentContextElement().setName(dataObject);
//@@end
}
14. Deploy the created WebDynPro Project to the server.
Creation of the PCD Components:
15. Create the SAP WebDynPro iView separately for above created applications and assign it to the page and preview it.
![Webdynpro result.png]()
As a result we can print value in receiver WebDynPro application which is passed from WebDynPro sender application.
Capture Value in SAP UI5 Application which is passed from the WebDynPro Sender APP:
SAP UI5 Application:
16. Create the SAP UI5 application project along with the View.
17. Create the View and Viewcontroller for the created project.
![UI5 app Creatition.png]()
18. Download the epcfproxy.js file from the ECC system.
Path for download the epocfproxy.js
SE80-> click on MIME Repository -> browse to SAP->BW->BEx->JavaScript->epcfproxy.js.
![EPCF donwload.png]()
19. Add the epcfproxy.js file in your SAP UI5 project and Specify the path of the epcfproxy.js file location in index.html
![1.png]()
20. Subscribe the event in the script tag inside the index.html.
For domain relaxing, we have included the respective code before try block.
The highlighted code will subscribe the event and print the value in the alert message.
<script>
var entered_value ;
var lnDotPos = document.domain.indexOf( "." );
if(lnDotPos>=0)document.domain = document.domain.substr(lnDotPos+1);
try
{
EPCMPROXY.subscribeEvent("urn:com.sap.tc.webdynpro.example.portaleventing","show", evtenthnd);
}
catch(e)
{
alert(e);
}
function evtenthnd(event)
{
entered_value = event.dataObject;
alert("The Entered Value in Web Dyn Pro app is----->"+entered_value);
var jsonModel = new sap.ui.model.json.JSONModel();
jsonModel.setProperty("/entered_value",entered_value );
sap.ui.getCore().setModel(jsonModel,"frstModel");
var app = new sap.m.App({initialPage:"First"});
var page=sap.ui.view({id:"idFirst1",
viewName:"com.india.techm.view.First", type:sap.ui.core.mvc.ViewType.JS});
if(app)
{
app.addPage(page);
app.placeAt("content");
}
}
</script>
If you want to explore more on the received parameter fro WebDynPro, then proceed to create the below UI also.
In our sample exercise we are printing the value in the “FirstView”.
For that , we are using property binding in JSON Model for set the received parameter in our index.html.
First.view.js
21. Get the JSON model from the core and read the binded value and print it on the Input field.
createContent : function(oController) {
this.setDisplayBlock(true);
var aControls = [];
/**CREATE THE UI**/
var lab1 = new sap.m.Label("lab1", {text:"Entered First Name" , textAlign:"Left" , width:"250px"});
var inpt3 = new sap.m.Input("idinpt3");
var hbox1 = new sap.m.HBox("hobox1",{items:[lab1,inpt3]});
/**READING THE JSON MODEL AND GET THE VALUES**/
var julimodel = sap.ui.getCore().getModel("frstModel");
oController.getView().setModel(julimodel);
var frstNamenam= julimodel.getProperty("/entered_value");
var frstnmeId2 = sap.ui.getCore().byId("idinpt3");
/**SET VALUE TO THE INPUT FIELD**/
frstnmeId2.setValue(frstNamenam);
aControls.push(hbox1);
return aControls;
}
Upload the SAP UI5 Application in to Gateway server:
22. Once the UI5 application has developed, then deploy this application in to the gateway server.
- (Login in to Gateway server and Execute SE38-->Execute /UI5/UI5_REPOSITORY_LOAD program -->Uploaded the SAP UI5 Project).
![2.png]()
23. Create the UI5 iView / BSP iView / URL iView for invoke the uploaded UI5 application.
![3.png]()
24. Assign the above iView to the already created page.
![4.png]()
25. Preview the Page
Enter the Text in input box of the WebDynPro ‘Sender application’ and click on the ‘Show’ button .
![5.png]()
As a result the entered value in Sender application will be displayed in the WebDynPro Listener application and SAP UI5 application.
Reference:
https://help.sap.com/saphelp_nw73/helpdata/en/4a/2a0116ab9247dbe10000000a42189c/content.htm?frameset=/en/4a/2916943e7b044ee10000000a421937/frameset.htm¤t_toc=/en/4a/ded71e279f4fa5870eb80b36019044/plain.htm&node_id=984
https://help.sap.com/saphelp_nw73/helpdata/en/4a/2a011cab9247dbe10000000a42189c/content.htm
http://scn.sap.com/community/enterprise-portal/blog/2014/09/05/sap-fiori-apllication-integration-with-sap-enterprise-portal
About the author:
I have 11 years of IT experience working as an SAP consultant. I’m currently employed by TechMahindra and worked on projects in various geographies. Have experience in SAP Portal, Java DynPro, Basis Support, SAP UI5 and SAP FIORI.
