HowTo run SAPUI5 on Portal – Portal Runtime Integration (Quirks & Co.)
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="/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="/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="/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
Really a wonderful finding I was waiting for this one from long time had been sick of doing work arounds that never worked around 😥 thanks a lot for sharing.
Regards
Jeet
Hi Jens,
excellent blog, thank you.
Andy.
Jens
Very helpful blog.
Regards
Sandip
Great blog, Jens!
I think many customers have this problem, so I hope that also SAP will address that topic soon.
Regards
Stefan
very nice blog
nice one!
Very good blog. I'm struggling with this exact issue now in ie8 and EP 7.3.
It looks like Code Exchange has been shutdown so do you have any idea where I can find com.sapconsulting.portal.utils.html_api.jar?
Your github repository is empty.
Thanks!
Hennie
Hi Hennie,
sorry, my fault. Forgot to commit 😉
The SCA is in github now. Just import within Development Infrastructure Perspective!
Regards,
Jens
Hi Jens, thanks for all this info, it's really priceless!!
I need the jar mentioned by Hennie, but I can't find your github repository, could you share please?
Thanks in advance.
Best Regards,
Marcelo
Hi Marcelo,
the above link is still working well. I just checked it again...
anyway here is the direct link.
https://github.com/jedrogi/EResponse4PortalAndSAPUI5/blob/master/MHPCompone00_0.sca
Just click the "raw" button and the download will start.
Regards,
Jens
I've overlooked completely that link! What a blind I was!
Thanks Jens!
Best Regards,
Marcelo
Hi Jens,
I didn't have the time to read all of your blog (yet). But this is definitely something that is important for a lot of our customers as many of them have issues combining WD and SAPUI5 (Running IE in compatibility mode because of WD)
Will read up on this, so thank you for doing the ground work 🙂
Hi Jens,
thanks for sharing your interesting feedback and lessons learned from the project.
I'd like to point you to some SAP notes for further information that may help you address the issues mentioned in your blog:
Let me know if this helps...
best regards,
Thomas
Thank you Jens,
This is going to help me a lot to design my solution for SAP UI5 development on portal.
Regards
Vijay.K
Thank you for this useful blog.
Hope that SAP will release an AFP theme that would look like SAPUI5 soon.
regards
Michal
Was pretty helpful, good job !
A great blog, I wonder if there any update from SAP on this issue? Also have you solved or had any insights into the Framework Page issues?
Thanks for sharing.
Martin
Hi Martin,
take a look at Thomas' comments above. Given notes will give helpful background information. (Thanks Thomas 😉 ) .
Especially note 1713259 could be usefull in some cases.
Nevertheless I do not have a good solution in placing sapui5 apps within the AFP itself. The AFP is still supposed to render in Quirks-Mode only(note 1900896)... Using URL iViews is currently the only option I know.
One trick I am currently using for displaying sapui5 dialogs crossfading the whole portal is following approach:
1. Add a component to the AFP which enriches the frameworkpage with an additional JS function. When it is triggered it will generate a new iframe crossfading everything
uiFrame = jQuery("<iframe border='no' frameBorder='0' allowTransparency='true' scrolling='no' style='visibility:hidden; background-color: transparent; width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; z-index: 5004;' src='/irj/go/portal/prtroot/<component>'/>");
2. When the component is loaded succesfully set the iframe visible
uiFrame.css("visibility", "visible"); (e.g. within the onAfterRendering-Method of the MVC controller)
3. When closing the dialog, I take care to destroy the iframe again:
uiFrame.remove()
Regards,
Jens
Thanks for this, I passed this onto our basis team to patch a system for us.
Martin
Jans, does this dialog loads on the whole portal with modal true (doesn't seems like) or only the content area? Do you've code ref?
And on the main blog subject, did you ever tested with the next version of Portal 7.30 with real time appl'n? Does it work, any recommendations/suggestions?
Hi Naga,
yes the dialog/iframe is layed over the whole Portal. You can set it modal easily via css.
New SAPUI5 versions are using more and more HTML5 features, so unfortunately this trick is not working anymore in IE using quirks mode.
So best would be to get rid of quirks AJAX FWP and use the standards mode one 😉
Regards,
Jens
Thanks Jens, well my custom AFP with 'Edge' rendering mode allowed me to display UI5 application without any issues.
Hi Jens,
I used the SCA you provided in this blog and did the same thing (create EP app and use EnhancedResponse to write necessary UI5 scripts to make UI5 JS & HTML working). I think I got the same result like yours, but I found some UI5 CSS styles are not display correctly in AJAX & classic framework. My portal is 7.31 SP11 and browser is IE9. I also read note 1900896, 1713259 and set iView property "Isolation Method" to "Embedded". None of them can fix this problem. Have you experienced same problem? Thanks.
I also tried UI5 iView and the result is the same.
Only if I change iView's property "Launch in New Window" to "Display in separate headerless portal window (standard mode)". CSS styles back to normal. But, it's hard to accept system behavior like this.
PS) Today I found the root-cause of this problem. Because IE renders UI5 content in IE8 mode (only support CSS2.1). Many CSS3 attributes are not supported such as rem and SAP UI5 CSS files use lots of CSS3 attributes. I overwrite some SAP CSS3 settings in my-own CSS file. Now, UI5 web page looks better.
Regards,
Nick
This blog was definitely useful when we used a custom light framework page in our earlier project. But, in my current project, we used ajax framework page where SAPUI5 applications are shown in URL iviews(isolation mode), so there is no issue in rendering the UI elements as the UI5 application is rendered in separate iframe which will be marked with <!DOCTYPE HTML>. For integration with portal framework like ajax, i used a simpler workaround, which was also successful. Refer to my blog Share data between portal and SAPUI5 through javascript for an alternate way to integrate SAPUI5 applications with portal framework.
Regards
Vijay.K