Skip to main content

Titles and subtitles

Configure the primary and secondary labels of items

All designs/interfaces have Title and Subtitle properties. These act as templates that determine the primary and secondary labels of the items created from each design. They are entirely customisable, making it easy to identify items and see key information at a glance.

Default labels

If Title and Subtitle are left blank on a design (and on any interfaces it implements), items of that design will display their ID as their title and the design's name as their subtitle.

A design and item with a blank title and subtitle

Fixed labels

If you simply enter text for both properties, all items created from the design will have the same title/subtitle, which may be preferable for some scenarios. In the example below, Title is set to Bollard and Subtitle is set to Type 2 Solar.

A design and item with a fixed title and subtitle

Variable labels

The magic starts when you include variables in these properties! Using the Title/Subtitle Editor, you can configure both properties to link to specific item attributes and display their values.

In the example below, Title is set to the Unit Number attribute. Subtitle is set to Type: Unit Type, which is some text followed by an attribute. This results in each item having a unique title and subtitle, making it easy to identify them and see key data without having to open them.

A design and item with a variable title and subtitle

Using the Title/Subtitle Editor

When editing a design/interface, select Title or Subtitle in the Details section to open the Title/Subtitle Editor, and then type within the relevant template box.

alt text
Note

Title and Subtitle are technically attributes inherited from the default Items interface 🧐.

Attribute variables

To include one or more attribute values in the title/subtitle, type the first curly bracket { into the relevant template box. The editor will display a list of available attributes on the current design. When you select an attribute, the editor will autocomplete the variable for you.

In the example below, selecting the Unit Number attribute added {{attributes_streetLightingUnitsUnitNumber}} to the Title template box.

alt text

Due to their nature, Link attributes can vary depending on their contents.

Link attributes

If you select a Link attribute in the list, its appearance will vary. For items with exactly one item stored in that Link attribute, the variable will display the stored item's title. Otherwise, the variable will display the number of stored items.

For example, see how adding the Defects attribute to the subtitle template of the Street Lights design can affect its items.

alt text
Parent Link attributes

Further down the list, you'll see parent Link attributes that either connect to the current design, or to an interface it implements. A parent Link attribute may be located on a single design, or on an interface that's implemented by multiple designs.

alt text

If you select a parent Link attribute, its appearance will vary. If an item has exactly one parent item linking to it via that attribute, the variable will display the parent item's title. Otherwise, the variable will display the number of parent items.

For example, the Bridge Deck design has a Lights attribute that links to the Street Lights design. See how adding it to the title template of the Street Lights design can affect its items.

alt text

The format of a variable

The editor accepts variables written in Mustache template format. A typical variable consists of an attribute code enclosed in double curly brackets. For example:

  • a system attribute:
    {{attributes_streetLightingUnitsUnitNumber}}

  • a custom attribute:
    {{attributes_bollardType1BollardType1_5caef948ff5c130f7075f0e5}}

You can include a mixture of text and variables if you want. For example:

Type: {{attributes_streetLightingUnitsUnitType}} / {{attributes_colouredStreetLightsColour}}

Conditional statements

Conditional statements let you include variables/text only if certain conditions are true.

There are three types of condition that can be checked:

  • Does the specified attribute have data?
    {{#if attributes_exampleDesignNameField}}

  • If the specified attribute is a boolean type, is it Yes rather than No?
    {{#if attributes_exampleDesignYesNoField}}

  • Does the item belong to the specified collection?
    {{#if collection_archive}}

There are three types of statement that you can use to check those conditions.

IF statements

An IF statement lets you say: "If this condition is true, output this":

  1. Type the condition (what to check). For example:
    {{#if attributes_exampleDesignNameField}}

  2. Type the statement (what to output if true). For example:
    The Name is: {{attributes_exampleDesignNameField}}

  3. Type {{/if}} to close the statement.

If the NameField attribute has data, output 'The Name is: NameField'.

IF example
ELSE statements

An ELSE statement lets you say: "If this condition is true, output this. Otherwise, output this."

To do this, add an #else statement before the final {{/if}}. For example:
{{#else}}{{attributes_exampleDesignTextField}}

If the NameField attribute has data, output 'The Name is: NameField'. Otherwise, output TextField.

ELSE example
ELSEIF statements

An ELSEIF statement lets you chain IF statements together.

To do this, add an #elif statement after the first #if statement. For example:
{{#elif collection_template}} Template Name

If the NameField attribute has data, output 'The Date is: NameField'. Or if the item's in the Template collection, output 'Template Name'. Otherwise, output TextField.

ELSEIF example

Preview your changes

To preview how items will look, select Item to preview, and then choose an existing item of the current design. Any changes you make to the title/subtitle templates will be reflected in the preview beneath.

Item to preview

Update existing items with changes

Select Save to finish. Your changes will apply to all new items created from the design.

Existing items will be updated the next time they're edited, either by a person or a system process. To update them all immediately, you can perform a bulk action to Touch them (resave them with no changes).