Show TOC

HTML TemplatingLocate this document in the navigation structure

To build semantic HTML templates, SAPUI5 uses handlebars. You can either use standard expressions and helpers together for the context of a template instance, or you can use the custom helpers for handlebars provided by SAPUI5, which you can use together with the SAPUI5 models.

The HTML templating concept in SAPUI5 enables you to bind texts against properties in the model. If the property in the model changes, the text is updated accordingly. You can create and bind the value DOM elements including their DOM attributes. For input DOM elements like INPUT, TEXTAREA or SELECT, SAPUI5 establishes a two-way binding: On change of the DOM element value the model is updated if the value is bound against a SAPUI5 model. You can also define controls in the template similar to the declarative support but in handlebars helper notation.

Prerequisites

To get started with HTML templating, you must comply with the following requirements:

  • An inline template is defined.
  • The templating framework is triggered to parse the inline template.

Example:

<div id="myControlTemplate" data-type="text/x-handlebars-template">
    
        <h3>Control Template (using "control" expression)</h3>
        {{control sap-ui-type="sap.ui.commons.Label" design="Bold" text="{/title}"}}
        <ul>
        {{#each path="/persons"}}
            <li>{{control sap-ui-type="sap.ui.commons.TextView" text="{lastName}, {firstName}"}}</li>
        {{/each}}
        </ul>
    
    </div>
// register all available templates in the document
sap.ui.template();

SAPUI5 looks up all DOM elements with a data-type attribute and checks if the respective data type is supported. If yes, SAPUI5 creates a new instance of sap.ui.core.tmpl.Template which represents the raw template and contains the markup of the template that is later used by the templating engine to create the final HTML markup. You can use the placeAt method to add the template instance to the DOM. If you define a template in the head with a SCRIPT tag, for example, SAPUI5 only creates the template instance. For inline templates, this instance is then placed at the same location of the document.

You can use the factory function sap.ui.template to parse all templates defined in SCRIPT tags in the head or in DIV tags in the body. If you do not specify a parameter, SAPUI5 templating looks up all available templates.


In this section: