HTML5 islands: How to integrate HTML5 into your Web Dynpro ABAP applications
Summary
With Netweaver 7.31 SP5, the Web Dynpro UI elements HTMLIsland, HTMLContainer and HTMLFragment have been introduced. They allow you to embed custom HTML5, JavaScript and CSS sources into your Web Dynpro ABAP applications. Using these new UI elements for HTML5 integration, you can create exciting UIs!
Are you ready for an island trip? In this blog post, we will visit some of the use cases of the new UI elements and point out some information sources that will guide you through the process of building an application with an HTMLIsland.
HTML5 integration scenarios
You want to build an application containing a Web Dynpro Table but you want to make it look a bit more eye-catching by adding a background image? Then you should use the new HTMLContainer! It allows you to place HTML5 fragments around existing Web Dynpro UI elements. HTML5 is produced on server side and it is possible to re-render it with each server roundtrip, which is useful for decorating or enhancing existing Web Dynpro UI elements. Your decorated Web Dynpro Table may look like this:
To illustrate the possibilities offered by HTMLIsland and HTMLContainer a bit further, let’s have a look at an employee data maintenance scenario. You want to allow the user to switch between different views showing employee data. Here the HTMLIsland comes into play: you can use it to embed an org chart to visualize employee relations. The HTMLIsland UI element has rich client side functionality. HTML5 is produced on client side and it can survive round-trips without getting rendered each time. This makes it perfectly suitable for embedding interactive, stateful content into Web Dynpro ABAP applications. To create a Web Dynpro ABAP application with an embedded chart, you need to integrate an HTMLIsland UI element, add references to JavaScript sources and CSS sources to it and model a data connection using the Web Dynpro context. The result may look as follows:
Information sources
If you want to know more about what is possible with the new UI elements for HTML5 integration, you should have a look at the Web Dynpro HTMLIsland & HTMLContainer Developer Guideline. You can find detailed architectural information along with a step-by-step description of how you built an application containing HTMLIsland from scratch.
For more information on the restrictions when working with HTMLIslands and HTMLContainers, see SAP Note 1742528 and SAP Note 1753544.
For Help Portal documentation, see SAP Online Help – HTMLIntegration.
** TEAM FPM ** – How to use a Java Script Chart Library in Floorplan Manager Applications
Do you think HTML5 island is also suitable to integrate web apps based on SAPUI5?
Any further consideration about HTML5 island and SAPUI5?
Hi Sergio,
We are currently evaluating the usage of UI5 controls as HTMLIslands. our goal is to make this possible, however no final results on that. Current tests are promisingly.
Kind regards,
Klaus
Sure you'll do it.
thanks
Perfect !!! 🙂
Thanks a lot Klaus its very informative.
Looks this has been posted in 2012, do we have some updates where we can intergrate UI5 Components using this HTML5 Islands.
Thanks!
Rajesh P
Are you aware about any SAP standard Web Dynpro App that uses HTML5 island?
Anything in the latest versions of ECC, SRM, HCM...?
thanks a lot
sergio
Hi Sergio,
No, we are not yet aware of such applications. However there is interest in using it. So you might see it in future applications.
Best Regards,
Uwe
that's fine. thank you
Sergio,.
Are you referring to HR Renewal?
Fernando
Maybe Fernando, I didn't yet got the opportunity to work with HR Renewal.
Going to install EhP6, I'm wondering what I'll find out regarding new UI staff and I always like to adopt new SAP technologies only when standard objects use it.
I do not see much success from Web Dynpro islands.
How many standard WD take advantage of Flash Islands?
How many from Silverlight Islands?
That said, I hope to see several new elegant standard WD using HTML5 island and I hope for a great success, even if the real pity is that WD does not support mobile browsers that nowadays are so relevant and create so many expectations from the user.
But Sergio, since our concern is the UI and UX, what would you suggest when you have a lot of business logic in WD.
Would you say that is preferable to develop Gateway Services and consume them with SAP UI5 and in this way we can put them available in Destktop and Mobile?
or would you suggest something else when we have a lot of services already in WD? do you know if it is possible to embed WD in an HTML5 page?
Thanks,
No suggestion from my side, just considerations about what we learned in the recent past.
Just sad about the missing support for Mobility by WD.
Hi All,
Even if SAP UI5 if “not included” out of the box, I guess that including all SAP UI5 libraries I can use the SAP UI5 elements in this scenario, right?
Thanks,
Fernando
Really helps! But what is a little disappointing is that HTML5 Island need IE10 or above version.
So that means for now I cannot embed it in our WDA since most of our applications are running in IE8....
Hi Steve Mo,
HTML Islands will also work with IE9. However, you'll need to take care that the application runs in HTML Standards mode (see developer guideline for details).
Kind regards,
Klaus
Hi Klaus,
I double confirmed it and you are right. It works in IE9 and Chrome, Firefox etc.
To our product( Solution Manager), I think it may still need some time to popularize IE9 and above. So for now I have to use BSP instead of HTML5. Hope one day I could use this component, I have do some research and it is really easy to use.
Great article. Looks really interesting. I can't wait to try it out with Geolocations in HTML5 and googlemaps.
Hi,
I want to know if is possible to use WDA + HTML5 Island inside SAPGUI.
I am testing using cl_gui_html_viewer, but inside SAPGUI the useragent is always IE7. (tested with http://www.whatsmyuseragent.com/ and the program SAPHTML_DEMO1), so HTML5 is not suported.
Thanks,
Víctor
Hi Victor,
You should not do this, as Web Dynpro inside SAPGUI is deprecated. So using HtmlIsland within Web Dynpro inside SAPGUI is not a very good idea.
Regards,
Klaus
Thanks Klaus,
But if I shouldn't do that, which is the official way to improve screen inside SAPGUI?
In my current project we are using a awesome user interface inside SAPGUI using a "htmlviewer" abap class plus Silverlight. We have all the advantages of be inside SAP ( we can reuse transactions, functions modules and so on) with the advantatges of RIA development.
At this moments I can't see a better way to make user interfaces inside SAP.
Regards,
Víctor
Hi,
I tried out the Developer Guidelines exercise, but is there a way to upload/use a 'bigger' html application with some javascript includes ( URL or MIME )?
HTMLIsland only has the string staticHtml available, HTMLContainer only has the fragments ...
I was thinking of HTMLIslands as an scenario for Charts, Maps which need a HTML file with some javascript API logic. ( where we just pass along the nescecary parameters between Webdynpro ABAP and Javascript )
Thanks
Regards,
Wouter
Hi Wouter,
The character restriction exists only in the ABAP Workbench. You can fill the property "staticHtml" via dynamic programming without size limitation.
Of course, you can upload JavaScript files to the MIME repository and reference them via HtmlScripts (aggregation to HtrmlIsland).
However, including <script>-tags inside the HTML is technically not possibile. As we do not load complete HTML pages in Web Dynpro, but only parts via AJAX requests, these scripts would not be loaded. Therefore you'll need to agregate the HtmlScript elements to the HtmlIsland.
Kind regards,
Klaus
Nice article...Thanks for sharing!
Good article. Thanks .
Seems good old Flash Islands are the thing of past already. Thanks.
Awesome document. Thanks for sharing.
A new HTML5Island BSP Element helps the developer integrate SAPUI5 application, as the BSP Element FlashIslandwas doing for Flash/Flex based application
Note 2361074providesa listwiththe SPs.
I am using the HTMLIsland to integrate my UI5 Apps and it works way better then iFrame.
but i think internally , it calls iframes only since i debugged the tag 😛 but still it loads faster and can bind to value nodes.