Previous Next JavaScript must be enabled to correctly display this content

## 11.3.10 Button Templates

Customize the look and feel of a button using button templates. Button templates are optional.

- Button Template Attributes
  Learn about common button template attributes. You can use multiple images or HTML tags to build a button.

Parent topic: Creating Custom Themes

### 11.3.10.1 Button Template Attributes

Learn about common button template attributes. You can use multiple images or HTML tags to build a button.

For more information on an attribute, see field-level Help.

- Name
- Definition
- Substitution Strings

Parent topic: Button Templates

#### 11.3.10.1.1 Name

Template Name identifies the name of the template. Use the Translatable checkbox to indicate if the template contains text strings that require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific use for the template. When you switch to a theme, all templates in one theme are mapped to corresponding templates in another theme. App Builder accomplishes this template mapping through the assignment of a template class.

Parent topic: Button Template Attributes

#### 11.3.10.1.2 Definition

Normal Template defines the button template that displays if the button type is Normal. For example, `&ITEM_NAME.` values can be substituted at rendering time. Hot Template defines the button template that displays if the button type is Hot. You have the option of including standard application substitutions. For example, `&ITEM_NAME.` values can be substituted at rendering time.

To learn more about supported substitution strings, see field-level Help.

Tip:

All substitution strings must be in uppercase.

Parent topic: Button Template Attributes

#### 11.3.10.1.3 Substitution Strings

Note:

Template directives are supported by specific attributes of button templates. See Using Template Directives.

Substitution strings are used within subtemplates to reference component values. To view the most current list supported substitution strings for a given template, view the template and find the Substitution Strings report.

Tip:

All template substitution strings must be in uppercase letters and begin and end with a number sign (#).

Referenced From | Substitution String | Description
--- | --- | ---
Hot Template | `#BUTTON_ATTRIBUTES#` | Button attributes.
Hot Template | `#BUTTON_CSS_CLASSES#` | Button CSS classes. You must include the `#BUTTON_CSS_CLASSES#` string for templates that have template options defined. The `#BUTTON_CSS_CLASSES#` string is where the corresponding template option classes are injected at runtime.
Hot Template | `#DOM_ID#` | Generated button ID will be either the button's HTML DOM ID if defined, or if not will be an internally generated ID in the format `'B' || [Internal Button ID]`.
Hot Template | `#BUTTON_NAME#` | Button name.
Hot Template | `#ICON_CSS_CLASSES#` | Icon CSS classes.
Hot Template | `#JAVASCRIPT#` | Used in an onclick attribute.
Hot Template | `#LABEL#` | Button label.
Hot Template | `#LINK#` | To be used in a `href` attribute.
Hot Template | `#ONCLICK#` | Indicates that the button has an onclick event with JavaScript code, which will be included in a script tag at the bottom of the page.
Template | `#BUTTON_ATTRIBUTES#` | Button attributes.
Template | `#BUTTON_CSS_CLASSES#` | Button CSS classes. You must include the `#BUTTON_CSS_CLASSES#` string for templates that have template options defined. The `#BUTTON_CSS_CLASSES#` string is where the corresponding template option classes are injected at runtime.
Template | `#DOM_ID#` | Generated button ID will be either the button's HTML DOM ID if defined, or if not will be an internally generated ID in the format `'B' || [Internal Button ID]`.
Template | `#BUTTON_NAME#` | Button name.
Template | `#ICON_CSS_CLASSES#` | Icon CSS classes.
Template | `#JAVASCRIPT#` | Used in an onclick attribute.
Template | `#LABEL#` | Button label.
Template | `#LINK#` | To be used in a `href` attribute.
Template | `#ONCLICK#` | Indicates that the button has an onclick event with JavaScript code, which will be included in a script tag at the bottom of the page.

Parent topic: Button Template Attributes