Client Side Template



{condition:logical_expression}...{conditionEnd} {condition:else}...{conditionEnd}



A javascript logical expression that evaluates a true or false value. If the expression evaluates to true, the template within the beginning and ending condition tags will be shown.


Dynamically show or hide parts of a template.


When defining a freeform template for a List control, multiple sub-templates can be defined and dynamically shown using the {condition:logical_expression}...{conditionEnd} directive. This allows you to dynamically decide the template to use when display data in a List, FormView, ViewBox, or any other control that supports client-side template syntax.

For example, here is a very simple freeform template:

{Firstname} {Lastname}, {State}

Every row of data in the List will be rendered using the same template. So, row 1 of the List might look like this:

John Smith, MA

and row 2 of the List might look like this:

Fred Tyson, CA

However, if you wanted the template to be completely different for all people in the state of MA and CA. Here is how you would define the freeform template:

{condition:data.state == 'MA'}
    <span style="color:green;">{Firstname} {Lastname}, {State}</span>
{condition:data.state == 'CA'}
    <span style="color:blue;font-weight:bold;">{Firstname} {Lastname}, {State}</span>
    <span style="color:#808080;">{Firstname} {Lastname}, {State}</span>

The statement following the condition: directive is a Javascript logical expression. The 'data' object can be used to reference values in the current row.