Logo

Template Properties

Template properties enable you to define custom markup for specific parts of components using the <property name="templateName"> syntax.

App Components

ComponentTemplateDescription
ApplogoTemplateOptional template for the app logo
AppHeaderlogoTemplateTemplate for the header logo
AppHeaderprofileMenuTemplateTemplate for the profile menu area
AppHeadertitleTemplateTemplate for the header title
NavPanellogoTemplateTemplate for the navigation panel logo (in vertical layouts)

Form Components

ComponentTemplateDescription
FormbuttonRowTemplateTemplate for the form's button row/actions area
FormIteminputTemplateTemplate for custom form input components
CheckboxinputTemplateTemplate for custom checkbox input display

Data Display Components

ComponentTemplateDescription
ListitemTemplateTemplate for individual list items
ListgroupHeaderTemplateTemplate for group headers in grouped lists
ListgroupFooterTemplateTemplate for group footers in grouped lists
ListemptyListTemplateTemplate displayed when list is empty
ItemsitemTemplateTemplate for displaying each data item
TablenoDataTemplateTemplate displayed when table has no data

Selection Components

ComponentTemplateDescription
SelectoptionTemplateTemplate for dropdown option display
SelectoptionLabelTemplateTemplate for option labels
SelectvalueTemplateTemplate for selected value display
SelectemptyListTemplateTemplate displayed when no options available
AutoCompleteoptionTemplateTemplate for autocomplete option display
AutoCompleteemptyListTemplateTemplate displayed when no suggestions available
OptionoptionTemplateTemplate for custom option content

Interactive Components

ComponentTemplateDescription
DropdownMenutriggerTemplateTemplate for the dropdown trigger element
SubMenuItemtriggerTemplateTemplate for submenu trigger appearance
TabstabTemplateTemplate for the clickable tab area

Layout Components

ComponentTemplateDescription
SplittersplitterTemplateTemplate for the splitter handle/divider
BackdropoverlayTemplateTemplate for optional overlay content

Utility Components

ComponentTemplateDescription
QueueprogressFeedbackTemplate for progress reporting UI
QueueresultFeedbackTemplate for result summary when queue completes

Usage Patterns

Basic

<List data="{items}">
  <property name="itemTemplate">
    <Text>{$item.name}</Text>
  </property>
</List>

Multiple

<List data="{groupedItems}">
  <property name="groupHeaderTemplate">
    <H3>{$item.group}</H3>
  </property>
  <property name="itemTemplate">
    <Text>{$item.name}</Text>
  </property>
  <property name="emptyListTemplate">
    <Text color="muted">No items found</Text>
  </property>
</List>

Alternative children syntax

Some components allow using children as templates instead of explicit template properties:
<!-- Using template property -->
<List data="{items}">
  <property name="itemTemplate">
    <Text>{$item}</Text>
  </property>
</List>

<!-- Using children as template -->
<List data="{items}">
  <Text>{$item}</Text>
</List>
This site is an XMLUI™ app.