Dear Portal-Fans,
time is passing by and at long last SAPUI5 itself and the SAPUI5 iView have been shipped out with SP09 and we should be able to code SAPUI5 application within the Portal now, getting rid of WDJava and taking the next level towards state-of-the-art applications.
Now hacks as described hereHowTo run SAPUI5 on Portal 7.3 together with NWDI and NWDS shouldn't be needed anymore. Unfortunately my enthusiastic thoughts have been undercut by reality... It's just not working as supposed. Indeed the new SAPUI5 iView delivered by SAP can be used to consume external SAPUI5 applications, but I could not manage to make SAPUI5 applications runnable which are sited within the Portal itself.
What I as a Portal Developer would like to expect is that I should be able to code a SAPUI5 application and create easily an iView out of it!
Just as well as known by usual portal applications (select application from "Portal Applications", "Copy / Paste as iView" towards the desired PCD Location)
To make it worse, I just was not able to create a working SAPUI5 application within the Portal Runtime by using AbstractPortalComponents.
The application is just not working as supposed... dialogs are not shown.. and it behaves weird if it renders anyway ;-(
To make it clear:
I want to use the Portal Runtime and I want to take advantage of it (EPCM, DSM, DomainRelaxing etc.).
I do not want to code my applications as a usual servlet and I do not want to just integrate it via an URL iView. I do not want to abuse the prtrw-connection or interfere via the "request.getServletResponse(true)" trick (see link above). All this would cause in ignoring the features of the Portal Runtime, too (EPCM etc.).
Instead I want to integrate SAPUI5 iViews within Pages together with other iViews and I want to render the whole page in embedded mode. E.g. so that the SAPUI5 dialogs could crossfade the whole page...
Since this expectation could not be fulfilled within SP09 (or I am just to silly to get the right point...) and I want to start with SAPUI5 NOW, I searched for a solution by my own.
The good news are:
I found one and since I read several blogs concerning the same issue, I want to share how I solved my issue! Maybe you can benefit from it:
Initial position and Analysis
I just created an easy SAPUI5 application showing a button. When you click this button a SAPUI5 dialog will appear. The application is an AbstractPortalComponent just adding the SAPUI5-resources, the SAPUI5 config and bootstrap and includes a little js-file containing the SAPUI5 code itself.
Remember that the PortalConnection is responsible for adding HEAD, TITLE and BODY tags and will add all portalspecific stuff (EPCM etc.). All things, that you are writing back into the response within your doContent-Method will be put within the body of the whole HTML response.
Here is the HTML response when calling it via /irj/go/portal/prtroot/<ApplicationAlias>.<ComponentName> (I set EPCF Level to zero to minimize the output for my tests)
<html><head><link rel="stylesheet" href="https://blogs.sap.com/com.sap.portal.design.portaldesigndata/themes/portal/theme_ford_development/prtl_std/prtl_std_ie6.css?v=7.30.9.0.1" />
<link rel="stylesheet" href="https://blogs.sap.com/com.sap.portal.design.portaldesigndata/themes/portal/theme_xxx_development/glbl/glbl_ie6.css?v=7.30.9.0.1" />
<script type="text/javascript">
/*HTML Business for Java, 6.0*/
ur_system = {doc : window.document , mimepath :"/com.sap.portal.design.urdesigndata/themes/portal/theme_xxx_development/common/", stylepath : "/com.sap.portal.design.urdesigndata/themes/portal/theme_xxx_development/ur/", is508 : false, domainrelaxing : "MINIMAL"};
var popup_emptydoc = "/htmlb/jslib/emptyhover.html";</script>
<title>QuirksTest</title><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
</head><body class="prtlBody urFontBaseFam urScrl">
<script type="text/javascript">window["sap-ui-config"] = {theme : "sap_goldreflection", libs : "sap.ui.commons",debug : false,trace : false};</script>
<script src="/sapui5/resources/sap-ui-core.js" type="text/javascript" id="sap-ui-bootstrap"></script>
<script SRC="/xxx.com~glob_btr~portal~admin~tools/scripts/quirkstest/start.js?2d255bbed31a92e3436e69410628ef2c" ></script>
<div id="QuirksTestUIRoot"></div></body></html>When calling the component and clicking on the button....nothing happens...so why?
First I thought of an CSS issue but I was wrong. And finally I found the guilty one : Quirksmode!
When you change the document mode by hand back to standards (F12-->DocumentMode) suddenly the application is running as supposed.
Searching a way out of hell
As I recognized that it all has to to with Quirks, I really messed-up!
SAPUI5 is not working within Quirks....hmm the whole Portal (AFP) is running in Quirks-mode...!
"Walldorf, we have a problem!"
So how to solve this issue? Taking the whole Portal out of Quirks is no option. (Launch the Portal and change to standard mode and you'll see, what I mean ;-))
Writing an own custom framework without Quirks is also not the desired solution for many customers. They want to keep their Ajax Framework Page.
I knew from the block mentioned above, that integrating SAPUI5 via an URL iView is working. This will result in an additional iframe which itself is not running in Quirksmode.
To let SAPUI5 work well within Portal Runtime I need two things:
1. <!DOCTYPE html> to be the first element of the HTML response and
2. <meta http-equiv="X-UA-Compatible" content="IE=edge"> to be the first meta tag within the head tag
Both together will ensure the html code is recognized as HTML5 and in addition the browser won't enter Quirks mode.
But how to achieve this for a Portal Component?
Writing and registering a custom Portal Connection is no option, since this would interfere the whole Portal.
Therefore I picked up the idea of the EnhancedResponse mentioned in How To Apply Custom Branding Using the AJAX Framework L-Shape APIs by sven.kannengiesser. Take a look at this document how the EnhancedResponse is working...this is really cool stuff!
To sum it up:
The EnhancedResponse gives you the complete HTMLResponse of the request and lets you altering it according your wishes. And the clue is, that if your Portal Component is part of a Page it gives you the whole HTMLResponse of this page (if you run your iViews in embedded mode).
Now we are able to add the doctype as well as the meta http-equiv when we need it.
The solution
Take a look at the following code snippet. This will prevent the Page/iView from rendering in Quirksmode:
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
EnhancedResponse enhancedResponse = new EnhancedResponse(request, true, true);
enhancedResponse.setTitle("QuirksTest");
// //enhancedResponse.setDocTypeToHtml5();
// enhancedResponse.setHttpEquivMetaAtFirstPosition("X-UA-Compatible", "IE=edge");
// enhancedResponse.include(HtmlFactory.createSAPUI5Config("sap_goldreflection", "sap.ui.commons", false, false));
// enhancedResponse.include(HtmlFactory.createSAPUI5Bootstrap(false));
enhancedResponse.initSAPUI5("sap_goldreflection", "sap.ui.commons", false, false, false);
response.include(request,request.getResource(IResource.SCRIPT, "scripts/quirkstest/start.js"));
response.write("<div id=\"QuirksTestUIRoot\"></div>");
}I wrote some convenience methods to setup the core SAPUI5 application elements.
The commented lines explain what the initSAPUI5()-method really does:
1. Setting the Doctype to HTML5
2. Adding the http-equiv tag at the first position (I enhanced the EnhancedResponseClass to make this work)
3. Adding the initial SAPUI5 config script part
4. Adding the SAPUI5 bootstrap
Finally I only need to include the JavaScript for the application itself and add the root-div where to place the SAPUI5 controls to.
I uploaded a SCA containing the EnhancedResponse code you need at github. It can be imported into NWDS:
https://github.com/jedrogi/EResponse4PortalAndSAPUI5.git
The resulting HTML Response now looks like this:
<!DOCTYPE html>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="https://blogs.sap.com/com.sap.portal.design.portaldesigndata/themes/portal/theme_xxx_development/prtl_std/prtl_std_ie6.css?v=7.30.9.0.1" />
<script type="text/javascript">
/*HTML Business for Java, 6.0*/
ur_system = {doc : window.document , mimepath :"/com.sap.portal.design.urdesigndata/themes/portal/theme_xxx_development/common/", stylepath : "/com.sap.portal.design.urdesigndata/themes/portal/theme_xxx_development/ur/", is508 : false, domainrelaxing : "MINIMAL"};
var popup_emptydoc = "/htmlb/jslib/emptyhover.html";</script>
<title>QuirksTest</title><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript">window["sap-ui-config"] = {theme : "sap_goldreflection", libs : "sap.ui.commons",debug : false,trace : false};</script>
<script src="/sapui5/resources/sap-ui-core.js" type="text/javascript" id="sap-ui-bootstrap"></script><script SRC="/xxx.com~glob_btr~portal~admin~tools/scripts/quirkstest/start.js?e7cf8856f829a508842dc34107046ac0" ></script></head><body class="prtlBody urFontBaseFam urScrl"><div id="QuirksTestUIRoot"></div></body></html>Take a look at lines 1 and 2. They are the important ones. Now calling the component and clicking on the button again gives us the desired result:
YEAH! SAPUI5 ROCKS!
I played around with this approach and was able to integrate several combinations of iViews integrated within the same page. The solution seems to work
and enables me to keep state-of-the-art within the Portal as well 😉
Open Issues
Unfortunately the described approach only works as long as you remain within the content area. Integrating the SAPUI5 application within the Framework Page would crash again. SAPUI5, Quirks and AFP rendering compete against each other again...
Yet I do not have a solution for it!
So I hope this information will help you to make your SAPUI5 application running within the Portal Runtime. SAPUI5 is great and should play a great role in future! Also for the NetWeaver Portal!
Regards,
Jens
- SAP Managed Tags:
24 Comments
