Skip to Content

SAPUI5 custom component with HTML as resource

Hello,

Currently I'm diving into creating custom controls for SAPUI5 applications, as described in this excellent blog from Phillip Smith for example. What I notice is that each custom control has a renderer method in which its HTML code is build up with RenderManager methods like write for example.

But is it also possible to load the HTML from a project resource first and then apply attributes and processing based on RenderManager and Control attributes?

Usage case: transform HTML templates delivered by Design Team into SAPUI5 custom controls. I want to prevent transforming whole HTML documents to oRm.write function calls.

Thanks in advance!

Bram

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    May 10 at 09:01 AM

    Hi Bram Keijers,

    Is it SAPUI5 templates or some other 3rd party HTML content?

    Control sap ui.core.HTML can be used to insert any HTML content into the SAPUI5 application.

    JQuery load() function can then be used to load content into that sap.ui.core.HTML control.

    Personally, I would rather create and use custom controls instead of the templates.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Miklos,

      It's 3rd party HTML content which we want to transform to SAPUI5 controls. I want to leave this content in an HTML file in the SAPUI5 App, and load this file from the custom control. In this way I want to prevent having to change oRM.write("<div>....</div>"); calls manually when something is updated . So basically there are two options:

      1. attach the content to the container element of the custom control:

      $(document).ready(function() {
            $(".controlContainer").load("controlHTML.html");
          });
      

      2: use an ajax call:

      $.ajax({
                  url : "controlHTML.html",
                  dataType: "html",
                  success : function (data) {
                      $(".controlContainer").html(data);
                  }
              });

      I'm going to test whether these work in SAPUI5.

      Thanks for helping out!

      Bram