Theme files language syntax

Wild Apricot theme files use a combination of HTML and StringTemplate code.

Here's some brief information on using template language in Wild Apricot themes:

Template variables

There are two ways for variables to be set in your template. (A template is the file containing the actual code for a gadget or other theme component.)

1. Passing variables as a parameter in a template call.
2. Using pre-defined variables (or properties).

There are different sets of preset properties for general page templates and for each gadget. You may output template property values by using the following syntax.

<$PropertyName$>

For a list of available properties, see Customizing theme gadgets.

Using templates

You can load a template into a page using the following syntax:

<$TemplateName()$>

This loads TemplateName.tpl located in root folder of your theme. To load template located in Layouts folder e.g. Layouts/Helpful.tpl), use <$Layouts/Helpful()$> instead.

Passing parameters

You can pass parameters to templates by specifying them using the following syntax:

<$TemplateName(param1 = value1)$>

You can specify more then one parameter, separate them with commas like this:

<$TemplateName(param1 = value1, param2 = value2)$>

Within the template, you can access parameters passed to it via the following syntax:

<$param1$>

This code would output value1 in its place.

You can also pass parameters to make conditional calls to your template (see below).

Using conditional statements

You can use conditional statements to check if a property has been set. For example, you could use the following code to check if a property is true and then return some HTML content:

<$if(PropertyName)$>
...code to be executed...
<$endif$>

or you could also check the opposite condition using the ! modifier, for example:

<$if(!PropertyName)$>
...code to be executed...
<$endif$>

You can use both if and else statements to provide alternate code to be executed depending on the property:

<$if(PropertyName)$>
...code to be executed...
<$else$>
...code to be executed...
<$endif$>

You also can use && (and) and || (or) operands in your expressions:

<div id="idContentContainer" class="cnContentContainer<$if (PageModel.Page.IsItemWithChildren || PageModel.Page.IsChildItem)$> rootHasSubitems<$endif$>">

In this example we add a special class if our page has children. This is live example from one of our templates.

You can also check against strings and numbers, like we do in Social sharing buttons gadget:

<$Model.Settings.SocialButtons:{

	        <$if (it == "FacebookValue")$>
			<div class="socialSharingButton">
				<$Model.Settings.FacebookCode$>
			</div>
		<$endif$>

		<$if (it == "TwitterValue")$>
			<div class="socialSharingButton">
				<$Model.Settings.TwitterCode$>
			</div>
		<$endif$>

		<$if (it == "LinkedInValue")$>
			<div class="socialSharingButton">
				<$Model.Settings.LinkedInCode$>
			</div>
		<$endif$>

		<$if (it == "GooglePlusValue")$>
			<div class="socialSharingButton">
				<$Model.Settings.GooglePlusCode$>
			</div>
		<$endif$>

}$>

In this real-world example we iterate thru our SocialButtons collection (see Iterators just below) and render bits of code based on current item' in collection value.

Using iterators

Sometimes you need to display a collection or a set of elements, such as a list of menu items. To do this, you use iterators to process each item in the collection. For example:

<$ItemsCollectionName:IteratorTemplate()$>

Here ItemsCollectionName is the name of items collection, and IteratorTemplate is a name of .tpl file to be called for every item in the collection. To access the value of each collection item, you use a special template variable it. For example, the following code would output the value of the currently iterated item.

<$it.Name$>

It is sometimes unnecessary to create a separate iterator template for every item collection you want to iterate. In this case, you can create an inline iterator template. For example, the following code would iterate over ItemsCollectionName and output name of every item's Name property:

<$ItemsCollectionName:
{
  <$it.Name$>
}
$>