Page build in HTML and wanted to load into JS view in SAPUI5 application.

In SAPUI5, you may need to load an HTML page into a JavaScript view. This is useful when you have pre-built HTML content that needs to be displayed within a SAPUI5 application. There are multiple ways to achieve this, including using sap.ui.core.HTML with an iframe, loading HTML content via an AJAX call, or directly embedding HTML content.

Syntax

Using sap.ui.core.HTML with iframe

new sap.ui.core.HTML({
   preferDOM: true,
   content: "<iframe src='URL'></iframe>"
});

The sap.ui.core.HTML control allows you to embed raw HTML content into a SAPUI5 view. Setting preferDOM: true tells the control to reuse the existing DOM element if available, improving performance.

Using sap.ui.core.HTML with Direct Content

new sap.ui.core.HTML({
   content: "<div>Your HTML content here</div>"
});

Instead of an iframe, you can directly pass HTML markup as a string to the content property. This approach embeds the HTML inline within the SAPUI5 view.

Using jQuery AJAX Call

jQuery.ajax({
   url: "path/to/page.html",
   success: function(data) {
      var oHtml = new sap.ui.core.HTML({
         content: data
      });
      oView.addContent(oHtml);
   }
});

This method loads an external HTML file using an AJAX call and injects the response into a sap.ui.core.HTML control dynamically.

Example: Loading HTML Page Using iframe

The most commonly used way is to embed the HTML page as an iframe inside a SAPUI5 JS view −

sap.ui.jsview("myApp.view.Main", {
   createContent: function() {
      var oHtml = new sap.ui.core.HTML({
         preferDOM: true,
         content: "<iframe src='http://www.yourdomain.com' " +
            "width='100%' height='500px' " +
            "style='border:none;'></iframe>"
      });
      return oHtml;
   }
});

This creates a JS view that embeds an external HTML page using an iframe. The preferDOM: true setting ensures better DOM handling by the SAPUI5 framework.

Example: Loading HTML Content via AJAX

In this example, we load an HTML file using a jQuery AJAX call and display it inside the view −

sap.ui.jsview("myApp.view.Main", {
   createContent: function() {
      var oPanel = new sap.m.Panel({
         headerText: "Loaded HTML Content"
      });

      jQuery.ajax({
         url: "pages/mypage.html",
         dataType: "html",
         success: function(data) {
            var oHtml = new sap.ui.core.HTML({
               content: data
            });
            oPanel.addContent(oHtml);
         },
         error: function() {
            oPanel.addContent(new sap.m.Text({
               text: "Failed to load HTML content."
            }));
         }
      });

      return oPanel;
   }
});

This approach fetches the HTML file from the server and wraps it inside a sap.m.Panel. If the AJAX call fails, an error message is displayed instead.

Example: Embedding Direct HTML Content

In this example, we directly embed HTML markup as a string into the SAPUI5 view −

sap.ui.jsview("myApp.view.Main", {
   createContent: function() {
      var oHtml = new sap.ui.core.HTML({
         content: "<div style='padding:20px; background:#f0f0f0;'>" +
            "<h2>Welcome</h2>" +
            "<p>This HTML content is embedded directly " +
            "inside a SAPUI5 JS view.</p>" +
            "</div>"
      });
      return oHtml;
   }
});

This is the simplest approach when you have a small amount of HTML content. The markup is passed directly as a string without needing an external file or iframe.

Comparison of Methods

Conclusion

You can load an HTML page into a SAPUI5 JS view using three approaches − embedding via an iframe with sap.ui.core.HTML, fetching content dynamically through a jQuery AJAX call, or passing HTML markup directly as a string. The iframe method is best for external pages, the AJAX approach works well for loading local HTML files, and direct content embedding suits small inline HTML snippets.