Templates are components of the user interface that can be reused. While they are commonly used multiple times, templates are also frequently employed as individual parts. For instance, in a tabbed interface, rather than defining the entire user interface for each tab within a single intent expression, you can construct the UI of each tab as a separate template. This approach allows for the dynamic generation and rendering of the UI as tabs are switched.

In terms of structure, templates adhere to the same principles as body expressions. Each template element is specified using an ‘element’ property, and any child elements are included within an ‘elements’ collection property. Standard HTML elements can be used directly without the need for custom providers. However, custom elements do require custom providers to create and manage the necessary markup.

Templates are specified within a schema under a root-level property named “templates”. This property consists of a collection of individual templates, each distinguished by a unique ‘id‘ property. The contents of a template are defined within the “elements” property.

To utilize a template in the markup, you should create an element of the type “template” and then assign the “template” property to the name of the desired template.

{
    "templates": [
        {
            "id": "myTemplate",
            "elements": [
                {
                    "element": "div",
                    "content": "Hello World"
                }
            ]
        }
    ],
    
    "body": {
        "elements": [
            {
                "element": "template",
                "template": "myTemplate"
            }
        ]    
    }
}

HTMLTemplateElement

In certain situations, it’s necessary to supply a template to a component as an integral aspect of its setup. This approach guarantees that the component meets its internal operational prerequisites. Here’s an example of such a situation.

<my-component id="mine">
    <template>
        <li>${item.code}</li>
    </template>
</my-component>

The component ‘my-component’ needs a template for its internal functions to operate effectively, specifically for generating list items and filling a list.
“html-template” elements allow us this capability.

{
    "body": {
        "elements": [
            {
                "id": "mine",
                "element": "my-component",
                "elements": [
                    {
                        "element": "html-template",
                        "elements": [
                            {
                                "element": "li",
                                "content": "${item.code}"
                            }
                        ]
                    }
                        
                ]
            }        
        ]
    }
}