Decorators

Title

The label for the input, to be used instead of the default title case conversion of the property name.

1@title("A Custom Title")
2simpleProperty : string;

Title

Subtitle

A subtitle for the input.

1@subtitle("Some information about what to put here")
2simpleProperty : string;

Subtitle

Units

For information on the @units decorator, see Number Property.

Header

Adds a header before the decorated property, indicating all properties below this decorator (until the next header) are intended to be a section on configurables.

1simpleProperty : string;
2
3@header('Section Header')
4
5simpleProperty2: string;
6
7simpleProperty3: string;

Header

In the preceding example, simpleProperty2 and simpleProperty3 fall under the header “Section Header”.

Header Subtitle

Additional text to describe a section, can be used to provide the end user with instructions.

1simpleProperty : string;
2
3@header('Section Header')
4@headerSubtitle('A brief explanation of this section.')
5
6simpleProperty2: string;
7
8simpleProperty3: string;

HeaderSubtitle

Markdown

Basic Markdown rendered before the decorated property. Syntaxes are limited to the following examples.

1@markdown(`
2# H1
3## H2
4### H3
5#### H4
6##### H5
7###### H6
8
9**bold text**
10*italicized text*
11
12Ordered Lists
13
141. Ordered List Item 1
152. Ordered List Item 2
163. Ordered List Item 3
17
18
19Unordered Lists
20
21- Unordered List Item 1
22- Unordered List Item 2
23
24
25Horizontal Rule
26
27---
28
29[Link](https://www.salesforce.com/)
30`)
31simpleProperty : string;

Markdown

Optional

The @optional decorator enables you to flag properties as either optional or required.

1@optional(true)
2simpleProperty : string;

Personalization doesn’t prevent you from saving a campaign with empty or incomplete template properties that are flagged as required. For example, even if a simpleText: string property is tagged as required by using the @optional(false) decorator, a campaign developer can still save a campaign with the simpleText property field left empty or incomplete.

Note

Hidden

Hides the input from the user.

1@hidden(true)
2simpleProperty : string;

This decorator can also accept a function in order to hide configurables conditionally. The arguments for the decorator are this, and a function whose first argument is self, the instance of this class.

The function MUST return a boolean true or false. Returning a non-boolean truthy or falsy value (for example, 0, 1, ‘some string’) throws an error.

1simpleBoolean : boolean;
2
3@hidden(this, (self) => self.simpleBoolean)
4conditionalField: string;

Shown If

The inverse of the @hidden decorator, displays the field if true, hides the field if false.

1@shownIf(true)
2simpleProperty : string;

1simpleBoolean : boolean;
2
3@shownIf(this, (self) => self.simpleBoolean)
4conditionalField: string;

Rich Text

For information on the @richText decorator, see String Property.

Options

For information on the @options decorator, see Select Property.

Button Group

Renders a static list of options as a button group.

1@buttonGroup(true)
2simpleOption : "option1" | "option2" | "option3";

Range

For information on the @range decorator, see DateTime Property.

Tabular

Displays the fields of a complex object horizontally.

1@tabular()
2complexObject : SomeComplexType;

Arrays of complex objects are rendered like a table. Include headersPerRow: true to show field titles on each row. Optionally render a line to visually divide each row by including dividerLine: true.

1@tabular({dividerLine: true, headersPerRow:false})
2complexObjectList : SomeComplexType[];