XTemplate syntax in ExtJS settings

XTemplates in ExtJS settings make it possible to create dynamic content using placeholders and simple expressions. These placeholders refer to underlying data and are replaced by actual values at runtime, depending on the respective context.

Basic principle

XTemplates work with a data context that provides the values for the placeholders.
Placeholders in curly brackets {} reference fields or properties of this data.
At runtime, the placeholders are replaced by the corresponding values from the data context.

Data context

The data context can have various sources:

Properties of the global ViewModel
User-defined JavaScript objects

Basic syntax

{feldName}: Displays the value of a field
{[JavaScript-Ausdruck]}: Executes a simple JavaScript expression

Example

Here is a simple example of an XTemplate string:

{
  "Benutzername": "Max",
  "Vorname": "Maximilian",
  "Nachname": "Mustermann"
}

Hello {firstname} {lastname}!
Today is the {[Ext.Date.format(new Date(), 'd.m.Y')]}.

In this example, {Vorname} {Nachname} is replaced by the actual names and the current date is displayed in the format DD.MM.YYYY.

The XTemplate always requires a suitable data object that contains the properties used in the template. If a referenced property is missing in the data object, it is displayed as an empty string.

Context-dependent values

Depending on the setting, different values may be available. The global ViewModel, which provides application-wide data, is often accessed.

Example with global ViewModel, as it could be used in User Account Menu:

Welcome back, {global.userSession.loginName}!

For more information on using the global ViewModel, see the Documentation on the global ViewModel.

Further information

For advanced usage, including loops and conditions, please consult the official ExtJS documentation on XTemplate.