Skip to Main Content

Overview

Templating is an extremely powerful tool in APEX. Template Directives provide control over how substitution strings and content is processed.

Template Directives can also be used to build dynamic, reusable templates, which can then be applied in HTML Expressions anywhere in APEX.

If Directives

The if directive can be used to conditionally show content based on the evaluation of an item or column value.

Syntax

    {if ITEM/}
        ...
    {elseif !ITEM/}
        ...
    {else/}
        ...
    {endif/}

Example

    <div>
        {if P1_DISPLAY_IMAGE/}
            &P1_IMAGE.
        {else/}
            No image.
        {endif/}
    </div>

Evaluation

Truthy Falsey
Not NullNull
TF
YN
10

Token Modifiers

Condition Directive
if_exists_and_true{if ITEM/}
if_exists{if ?ITEM/}
if_not_exists_or_false{if !ITEM/}
if_not_exists{if !?ITEM/}
if_not_false{if =ITEM/}
if_exists_and_false{if !=ITEM/}

Case Directives

The case directive can be used to show content based on the value of an item or column.

Syntax

    {case ITEM/}
        {when VALUE/}
            ...
        {when VALUE/}
            ...
        {otherwise/}
            ...
    {endcase/}

Example

    <div class=" 
        {case BADGE_SHAPE/}
            {when SQUARE/}
                t-Badge--square
            {when CIRCULAR/}
                t-Badge--circle
            {otherwise/}
                t-Badge--rounded
        {endcase/} ">

Loop Directives

The loop directive can be used to repeat content once for each item in a multi-value (character delimited) item or column.

Syntax

    {loop "SEPARATOR" ITEM/}
        ...
    {endloop/}

Example

    <ul>
        {loop "," TAGS/}
            <li>Tag: &APEX$ITEM.</li>
        {endloop/}
    </ul>

With & Apply Directives

The with and apply directives allow predefined dynamic templates to be used in HTML expressions.

Syntax

    {with/}
        ...
    {apply TEMPLATE/}

Example

    {with/}
        TYPE:=IMAGE
        IMAGE:=#PROFILE_IMAGE#
        IMAGE_ALT:=Profile Image
        SIZE:=t-Avatar--lg
        SHAPE:=t-Avatar--circle
        CSS_CLASSES:=u-color-29
    {apply THEME$AVATAR/}