HTML5 islands: How to integrate HTML5 into your Web Dynpro ABAP applications

[LisaMonshausen]

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