Skip to Content

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:

/wp-content/uploads/2012/12/pic_163170.jpg

 

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:

Presentation2.gif

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

To report this post you need to login first.

29 Comments

You must be Logged on to comment or reply to a post.

    1. Former Member

      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

      (0) 
      1. Former Member

        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

        (0) 
    1. Uwe Klinger

      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

      (0) 
      1. Sergio Ferrari

        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.

        (0) 
        1. Former Member

          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,

          (0) 
  1. Former Member

    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

    (0) 
  2. Former Member

    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….

    (0) 
    1. Former Member

      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

      (0) 
      1. Former Member

        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.

        (0) 
    1. Former Member

      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

      (0) 
      1. Former Member

        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

        (0) 
  3. Wouter Peeters

    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

    (0) 
    1. Former Member

      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

      (0) 
  4. Former Member

    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.

    (0) 

Leave a Reply