egroupware_official/api/js/etemplate/Et2Template/Et2Template.md

The template displays a loader while it is loading the file, and is replaced with the actual content once all widgets are ready.

<style>
    et2-template {
        min-height: 5em;
    }
</style>
<et2-template template="template"></et2-template>

Loading

:::tip Since template files are auto-fetched from the server, actual examples here would not work. :::

Template

Use template attribute with <app>.<template> format to specify which template to load.

This will fetch /<app>/templates/<interface>/<template>.xet, where <interface> is the user's current interface, or default.

<et2-template template="infolog.edit"></et2-template>

Sub-templates

If the template file contains more than one template definition, you can load any of the other templates defined after the file has been loaded using either their full ID or a shortened form. This is useful for breaking a template into smaller parts.

multiple.xml:

<overlay>
    <template id="multiple.one" class="one">...</template>
    <template id="multiple.two" class="two">...</template>
    <template id="multiple" class="multiple">
        ...
        <et2-template template="multiple.one"></et2-template>
        ...
        <et2-template template="two"></et2-template>
    </template>
</overlay>

URL

If you need to bypass the autoloading based on template ID, you can specify the full URL to the template file. If there are multiple templates defined in the file and you did not specify template, the last template in the file will be loaded.

Content

When loading Et2Template will use its array managers (content, select_options, readonlys & modification) to set the child widget attributes as it loads them.

Use content to create a namespace, loading the template using only a sub-section of the content arrays.

Content data:

{
  "address_one": {
    "street": "123 example street",
    "city": "Testville"
  },
  "address_two": {
    "street": "321 Industrial Ave",
    "city": "Testville"
  }
}

client/default/view.xet:

<overlay>
    <template id="address">
        <et2-textbox id="street" label="Street"></et2-textbox>
        <et2-textbox id="city" label="City"></et2-textbox>
        ...
    </template>
    <template id="client.view">
        ...
        <et2-template template="address" content="address_one"></et2-template>
        <et2-template template="address" content="address_two"></et2-template>
        ...
    </template>
</overlay>

Result: