A template is a feature that allows users to define the structure of HTML that a SDK component displays. You can use this feature to fully customize any component. Templates can display any piece of data that the component has. There are different ways to display it, depending on your needs. The component data is represented in tags, as indicated by the brackets that surround them.

Example: {{ URL }} and {{{ URL }}} have different purpose but both show a URL.

Types

Show escaped attribute

The syntax for this type is {{ attribute }}.

This template shows the attribute converting tags to plain text and unescaping the HTML entities:

• Ampersand (&): &
• Less than (<): <
• Greater than (>): >
• Double quotes (“): "
• Single quote ('): '

Example (using Semantic Autocomplete component)
Having
highlightedTitle: <strong>Example</strong> content
with the template
Title: {{ highlightedTitle }}
shows
Title: <strong>Example</strong> content

Show attribute as-is

The syntax for this type is {{{ attribute }}}.

This template shows the attribute as-is, unescaping the HTML entities:

• Ampersand (&): &
• Less than (<): <
• Greater than (>): >
• Double quotes (“): "
• Single quote ('): '

Example (using Semantic Autocomplete component)
Having
highlightedTitle: <strong>Example</strong> content
with the template
Title: {{ highlightedTitle }}
shows
"Title: Example content"

Access attribute properties using dot notation

The syntax for this type is attribute.property.

This template refers to the property inside the attribute.

Example (using Semantic Autocomplete component)
Having

attributes: {
   URL: http://www.example.com"
   PARAGRAPHS: "Example content"
}

with the template
Link: {{ attributes.URL }}
shows
Link: htttp://www.example.com

Change default tag delimiter (brackets)

The syntax for this type is {{=<% %>=}}.

This template changes the default brackets delimiter to other characters. Useful for displaying the brackets as-is without interpretation.

Example (using Semantic Autocomplete component)
Having

title: Example content

with the template

  {{=<% %>=}}
  <% {{ title }} %>

shows
{{ title }}