SAPUI5 Java Application in Portal
I’m writing this blog post to share my experience on a specific development task on SAP Netweaver Portal 7.3: one of our customers asked for an SAPUI5 Application based on the SAPUI5 libraries deployed on Portal Java AS. It isn’t a common way of integrating an SAPUI5 application, the standard approach is to build an application using the libraries available on SAP Gateway or where the SAPUI5 UI ABAP addon is installed.
In our customer scenario we didn’t have any ABAP server available so we proposed to use the native SAPUI5 portal libraries on Netweaver’s AS Java (this libraries are included in standard installation since Netweaver 7.3 ehp1 SP05).
There is a simple way to check if your portal server has these libraries: try the following url
http://<server-url>:<server-port>/sapui5
if you display a page like this one
you got it and you can start your development!
If you don’t have the libraries available in your portal installation don’t give up, you still have an option: you can use openui5 library (http://openui5.org) deploying it as J2EE application or KM Folder and referencing it in your application. This is an open source version of the library that has almost the same features of SAPUI5 excluding some advanced parts (e.g charts).
Once you have the library we can start developing the application in NWDS: you need to create a new Development Component Project of type Enterprise Portal – Portal Application Standalone.
Choose the related software component and the name of your new DC to go on in the creation wizard.
Once you have the DC you need to create a Portal Application Object of type AbstractPortalComponent that represents the application we’re going to code.
Put the object inside the DC project we created above.
Give your component a name and put it inside a package and it is done, now we can start to code the application.
A SAPUI5 application always starts with an HTML page that loads the sapui5 library javascripts and the application specific libraries. So the first thing we need to develop is this kind of page. Using an abstractPortalComponent the easiest way I found to do this is to create an JSP page and include it in the doContent method of the abstract portal component class.
Here is my simple implementation. In this method you can include any external file you need in your application (external css, javascript libraries…)
package my.sdn;
import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;
public class sdnappui5 extends AbstractPortalComponent
{
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
//Include jsp
IResource reportSource = request.getResource(IResource.JSP,"jsp/sample.jsp");
response.include(request,reportSource);
//Here you can include any external resource such as CSS, Javascripts and so on
}
}
Now we need to create our sample.jsp with the SAPUI5 application logic.
Go to dist/PORTAL-INF/jsp project folder and create an JSP page called sample.jsp.
In this page you can put your SAPUI5 application, here is my sample code:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample SDN Application</title>
<script id="sap-ui-bootstrap"
src="sapui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons">
</script>
</head>
<body>
<div id="content"></div>
<script src="/irj/go/km/docs/documents/sdnsample/app.js"></script>
</body>
</html>
As you can see it is really simple: the only things you have to do is to load the SAPUI5 libraries in the bootstrap script in the head section referencing the SAPUI5 library location (remember to change it to your local folder or application if you deployed openui5 library instead), and then include your script with application logic. I always prefer to create an external app.js file where I put the SAPUI5 application files to separate the business logic and to be independent from the java deploy for the modifications: if I need to change the behaviour of my application I only need to change the corresponding file on portal km without any deploy.
Of course this is a developer choice, you can put your javascript in the html markup or in a project folder too: find your preferred way in sapui5 development!
I won’t go deeper in SAPUI5 application development because there are so many excellent resources on this topic on scn: if you need an help please search and you’ll find almost all you need.
Now that we have developed our application let’s focus on how to display it into the portal: we need to deploy it at first so build and deploy it on your portal application server. Once you deployed your DC you should see it in the Portal Content Directory, in the Portal Applications.
Create an iview starting from this portal application (Right Click – Copy on your application and then Paste as PCD Object in the PCD location you wish).
Once you have the iview you can test you application with the iview preview.
That’s it, enjoy with SAPUI5 development in Java Portal Applications!
Just a note when integrating this kind of SAPUI5 in portal navigation: the old-fashioned portal framework page (classic) works in compatibility mode only, then your SAPUI5 will be displayed in Quirks IE5 mode. This means you can’t use the HTML5 and CSS3 advanced features in this scenario, then take care of this limitations when your SAPUI5 application can’t be integrated in an HTML5 compliant SAP Portal.
Hi Mattia.
Thanks for sharing. Hope to read more from you about these topics.
Keep going
Giuliano
Hi Mattia,
Thanks for sharing document.i was new for sapui5. But same requirement for me also.I was understated what you are explained.I was not getting external app.js. Can you share the sapui5 sample code for external app.js.
Thanks,
Durga Rao
Hi Durga, thank you for reading and commenting my post!
I didn't share the app.js sources because it contains the core application and you can personalize it as you wish.
In my example, the app.js contains the following code:
var btn = new sap.ui.commons.Button({
text:'Hello World',
press:function(){alert('Hello!')}
});
btn.placeAt('content');
What matters is putting your sapui5 controls into the container you specified in the html (in my example the div with id = "content") to make it visible in the application.
That's it, enjoy sapui5 coding!
Hi Mattia,
Thanks for the replay and suggestion.
Why did you not chose to develop and deploy these applications as an EAR file. You can very much use all the functionality of UI5 development including development in XML. There are a lot of articles available for this over SCN.
e.g Steps to Create and Deploy UI5 Project using NWDS on AS Java Server