Variable and Tags

As of March 2017, Branch Code is deprecated and no longer developed. Use the Twig syntax instead.

There are two different ways that data is presented to content templates and site templates. The first is variables and the second is through tags.

Variables

When you are building pages for an app, setting up navigation layouts or creating page content layouts, the data for that app, navigation menu or thing you're creating is represented in one or more variables. Branch variables are similar in concept to variables in other programing languages. They basically hold stuff that you can then access and manipulate later in your code.

A variable could contain a string, a number, a boolean value or an array. 

Below is a very basic example of a variable.

{#variable}

The above piece of code will simply output the value that the variable contains.

Array values

If the variable is an array then you can use the following format to access specific array values.

{#product.name}

The above code will output the "name" value from the product array. Below is a simple example of what the "product" array could look like.

array('name' => 'Product Name')

To access an array value you use the "." to traverse different levels of the array. 

If a multi-dimensional array assigned to a variable called "item" looked like this

array(
   'primaryImages' => array(
       'large' => array(
           'src' => '/image/src.jpg',
           'width' => '100',
           'height' => '200'
           'alt' => 'alt text'
           'tag' => '<img src="/image/src.jpg" width="100" height="200" alt="alt text" />'
       )
    )
)

and you wanted to get the 'src' value for the large image then you would access that value like this:

{#item.primaryImages.large.src}

The above array is a representation of what a Gallery Item primary images array looks like. Here is a more complete example of how you could manually build out an image tag for a Gallery item. Remember that that 

<img src="{#item.primaryImages.large.srcValue}" width="{#item.primaryImages.large.widthValue}" height="{#item.primaryImages.large.heightValue}" alt="{#item.primaryImages.large.altValue}" class="gallery-image">

Alternately you could use the short tags:

<img {#item.primaryImages.large.src}{#item.primaryImages.large.width}{#item.primaryImages.large.height}{#item.primaryImages.large.alt} class="gallery-image">

Logic

You can use variables in logic statements.

{if #product.name == "My Product"}
    <p>This is my product</p>
{/if}

Changing variable values

Variable values can be manipulated through variable modifiers. Below is an example of capitalizing all of the letters in a variable value.

{#variable|capitalize}

Creating variables

In addition to using the variables that the system creates, you can also create your own variables. To do so you would use different variable modifiers. The most common is the "set" modifier.

{#variable|set value="My Value"}

You can create variables in one of two ways. The first involves declaring the variable as an array first. The second is simply a shorthand for creating a variable.

{#variable|array}
{#variable.key|set value="My Value"}

This will create an array that looks like this:

array(
    'key' => 'My Value'
)

This method is ideal for situations where you need to ensure that the variable is an empty array before you start working with it.

The second method just involves using the shorthand directly to create the array values. In this case if the "fruit" variable doesn't exist yet it will be created first and then the appropriate array values will be created.

{#fruit.oranges.color|set value="orange"}
{#fruit.oranges.size|set value="large"}
{#fruit.apples.taste|set value="good"}

The above will create an array that looks like this:

array(
    'oranges' => array(
        'color' => 'orange'
        'size' => 'large'
    ),
    'apples' => array(
        'taste' = 'good'
    )
)

Global Variables

Global variables are variables that have just about the same value no matter where they are used. They can be used anywhere variables can be used. 

Global variables are all stored in the {#global} array.

Learn more about global variables.

Tags

Tags are very similar to variables but they have a few core differences.

  1. They have a slightly different syntax (no "#" at the beginning).
  2. They cannot be used within logic such as if statements.
  3. They cannot be used with variable modifiers or saved as variable values.

Basically variables get compiled into executable code while tags simply represent a value that get's outputted. Some tags, however, like the redirect tag and the {ap:appendTitle} have some functionality to them.

Some example tags include:

  • Javascript, CSS, meta and other data to be outputted in the <head> section of a page
  • Date values
  • Setting redirects
  • Append or prepend text to the page title or simply set a new page title text
  • Body tag id and class values
  • Navigation tags
  • Snippet tags
  • Breadcrumb text

Learn more about core tags.