Static HTML elements are written directly in SAPUI5

SAPUI5 allows developers to use their own static HTML elements alongside UI5 controls. It is not a closed framework − you can use the sap.ui.core.HTML control to write plain HTML within any area rendered by UI5, making it easy to mix static HTML and UI5 controls in the same view.

HTML created by UI5 controls is generated dynamically at runtime. This is how most JavaScript UI libraries work when providing higher-level UI elements that would be complex to write in static HTML alone. However, SAPUI5 gives you the flexibility to embed your own static HTML whenever needed.

Syntax

The basic syntax to embed static HTML in a SAPUI5 view using sap.ui.core.HTML is −

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

The content property accepts any valid HTML markup as a string. The control renders this markup directly into the DOM within the SAPUI5 view.

Example: Embedding a Static HTML Block

In this example, we embed a static HTML block with a heading and paragraph inside a SAPUI5 JS view −

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

This creates a view that renders a styled div with a heading and paragraph as static HTML content within the SAPUI5 application.

Example: Mixing UI5 Controls with Static HTML

In this example, we place a static HTML element between two UI5 controls inside a vertical layout −

sap.ui.jsview("myApp.view.Mixed", {
   createContent: function() {
      var oButton = new sap.m.Button({
         text: "Click Me",
         press: function() {
            sap.m.MessageToast.show("Button pressed!");
         }
      });

      var oHtml = new sap.ui.core.HTML({
         content: "<div style='padding:15px; margin:10px 0; " +
            "background:#e3f2fd; border-left:4px solid #1565c0;'>" +
            "<p>This is static HTML content mixed with " +
            "UI5 controls.</p></div>"
      });

      var oInput = new sap.m.Input({
         placeholder: "Enter your name"
      });

      return new sap.ui.layout.VerticalLayout({
         content: [oButton, oHtml, oInput]
      });
   }
});

This view renders a button, followed by a static HTML block, and then an input field − all within a single vertical layout. This demonstrates how SAPUI5 allows seamless mixing of static HTML and UI5 controls.

Example: Using preferDOM for Better Performance

The preferDOM property tells SAPUI5 to reuse the existing DOM element if available, which improves rendering performance −

var oHtml = new sap.ui.core.HTML({
   preferDOM: true,
   content: "<table style='border-collapse:collapse; width:100%;'>" +
      "<tr><th style='border:1px solid #ddd; padding:8px;'>" +
      "Name</th>" +
      "<th style='border:1px solid #ddd; padding:8px;'>" +
      "Role</th></tr>" +
      "<tr><td style='border:1px solid #ddd; padding:8px;'>" +
      "John</td>" +
      "<td style='border:1px solid #ddd; padding:8px;'>" +
      "Developer</td></tr>" +
      "</table>"
});

Setting preferDOM: true is recommended when the HTML content does not change frequently, as it avoids unnecessary DOM re-rendering.

Key Properties of sap.ui.core.HTML

Conclusion

SAPUI5 is not a closed framework − it allows you to embed static HTML within views using the sap.ui.core.HTML control. You can pass any valid HTML markup through the content property and mix it freely with UI5 controls in layouts. Use preferDOM: true for better performance and sanitizeContent: true when rendering user-provided HTML to prevent security risks.