Zoho Sites Help
Zoho Sites Help

Tags 

Tags are used to create logic and control flow for templates. The curly brace percentage delimiters {% %} and the text they surround do not produce any visible output when the webpage is rendered.

        

 Objects/variables

Objects output data and are wrapped in double curly brace delimiters {{ }}.

        

Syntax

{{variable_name}}

 Accessing a variable

Variables can be accessed using double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.

        

Syntax

{% assign variable_name = variable_value %}

{{ variable_name }}

 Creating a new variable

Create new variables by assigning values using mathematical operators. 

        

Syntax

{% assign variable_name = variable_value %}

 Json objects

Json objects are contained in curly braces. The data is in key/value pairs, separated by commas. 

        

Syntax

{% assign json_object={key_1:value_1,...,key_n:value_n} %}

        

Example

{% assign j_obj="{"a":"b","c":"d"}" %}

 Json arrays

Json arrays are contained in curly braces. Json Objects are also used and are separated by commas. Curly braces hold objects and square brackets hold arrays.

  

Syntax

{%assign j_arr="[{key_1":value_1},..,{key_n:value_n}]" %}

  

Example

{% assign j_arr="[{"a":"b"}," {"c":[{"d":"e"}]}] %}

  

Note: You can only use Json arrays. Other arrays are not supported.

 Capture

Capture holds the content within the block and assigns it to the capture variable.

 

Example

{% capture my_variable %}

I am being captured.

{%endcapture %}

 

Note: You can have other blocks inside capture. In this case, it will be processed and then stored within the capture variable.

 

Example

{% capture my_variable%}

{{ name }} is being captured.

{%endcapture %}

 Conditionals

Syntax

{% if condition_1 %}

block_1

{% elif condition_2 %}

block_2

{% else %}

block_3

{% endif %}

 

Example

{% if x==1%}

one

{% elif x==2 %}

two

{% else %}

more than 2

{% endif %} 

 Simple for loop

Syntax

{% for variable_name in array %}

{{ variable_name.key_1 }} {{ variable_name.key_2}}...{{ variable_name.key_3 }}

{% endfor %}

 

 

Example

<ul>

{% for contact in contacts %}

<li>

{{ contact.sal}} {{ contact.f_name}} {{ contact.m_name}} {{ contact.l_name}}

</li>

{% endfor %}

</ul>

For else loop

Apart from iteration of elements in an array, the For else loop is useful when the array is empty and an action needs to be performed. 

 

Syntax

{% for variable_name in array %}

{{ variable_name.key_1 }} {{ variable_name.key_2 }}...{{ variable_name.key_3 }}

{% forelse %}

block

{% endfor %}

 

Example

<ul>

{% for contact in contacts %}

<li>

{{ contact.sal }} {{ contact.f_name }} {{ contact.m_name }} {{ contact.l_name}}

</li>

{% forelse %}

No contacts to show.

{% endfor %}

</ul>

 For range

Example

{% for i in range ( 0, 4) %}

i

{% endfor %}

  

Output

0123

  

  

Syntax

{% for variable_name in range ( start, stop, step ) %}

block

{% endfor %}

 Slicing

Syntax

 

a[start : end] items start through end-1

 

a[start : ] items start through the rest of the array 

 

a[ : ] a copy of the whole array

 

a[start : end : step] start through not past end, by step   


Description

contacts[10 : 30] returns values from index 10 to index 29

contacts[10 : ] returns values from index 10 to last

contacts[10 : 30 : 5] returns every 5th value from 10 to 29, eg: 10, 15,  20, 25

 

 

Example

{% for contacts in contacts[5, ] %}

contact

{% endfor %}

 Cycle

Example

{% assign links=" [{"url":" "xyz1", "text": "Link 1"}, {"url": "xyz2", "text": "Link 2"}, {"url": "xyz3", "text": "Link 3"}, {"url": "xyz3", "text": "Link 4"}, {"url": "xyz5", "text": "Link 5"}] %}

{% for link in links %}
<li> {% cycle "odd,even" %} url="/{{ link.url }}" text="{{" link.text }}</li>

{% endfor %}


Output

odd url="/xyz1" text="Link" 1

even url="/xyz2" text="Link" 2

odd url="/xyz3" text="Link" 3

even url="/xyz4" text="Link" 4

odd url="/xyz5" text="Link" 5


Note: Strings can be cycle iterated, always use cycle within a loop.

 Object iteration

Iterate over objects

 

Example

{% assign food = {"salt""1 tbsp", "ketchup": "5 tbsp", "mustard" "1 tbsp""pickle": "2 tbsp"} %}

{% for ingredient, amount in food %}

Use {{ amount }} of {{ ingredient }}

<br>

{% endfor %}

 

Output

Use 1 tbsp of mustard

Use 1 tbsp of salt

Use 5 tbsp of ketchup

Use 2 tbsp of pickle 

 

Note: Order of iteration is random.

 Comments

Comments won't be processed.

 

Syntax

{% comment %} block {% endcomment %}

 

Example

This is {% comment %} to be ignored {% endcomment%}

 

Output

This is

 Case when

This is a switch statement.

 

Syntax

{% case switch_variable %}

{% when String_1 %}

block_1;

{% when String_2 %}

block_2;

{% else %}

block_3;

{% endcase %}

 

 

Example

{% assign x="cream"%}

{% case x %}

{% when "cream" %}

{{x}} is good with cake.

{% when "milk" %}

{{x}} is good with cookies.

{% else %}

{{x}} is good with neither cake nor cookies

{% endcase %}

 

Output

cream is good with cake.


Note: Switch variables can only be strings.

 Raw

Anything within the "raw" block will render as is.

 

Syntax

{% raw %} block {% endraw %}

 

Example

{% raw %} {{hi}} {{hello}} {{x}} {{ 5 | plus: 6 }} {% endraw %} is equal to 11.

 

Output

{{hi}} {{hello}} {{5|plus:6}} is equal to 11.

 Include

Include pulls other FACE files into place. It's useful to share smaller chunks across several face files that already inherit other face files.

 

Syntax

{% include "facefile_name"%}

Extend

This function can be used to extend functions and data from other face files.

 

Syntax

{% extends facefile_name%}

 

Note: Extend is similar to inheritence in java and should be declared at the beginning of the face file.

 Macro 

Macro allows you to define reusable chunks of content. It is similar to a function in a programming language. 

  

  

Example

{% assign hi1="5" %}

{% assign hi2="6" %}

{% assign hi3="7" %}

{% macro field(name, value, type) %}

<div class= "field">class= "field">

<inputtype= "{{ type }}"name=" {{ name }}"

value=" {{ value }}" />

</div>

{% endmacro %}

{{ field(hi1, hi2, hi3) }}

  

Output

<input type="7" name="5" value="6">

 Math

You can use face to perform basic arithmetic operations like addition, subtraction, division, and multiplication.

 

Operators

 

Addition : + 

Subtraction : -

Division : /

Division remainder : %

Multiplication   : *   

 

Example 

 

{{ 2 + 3 }} (outputs 5)

{{ 10/5 }} (outputs 2)

{{ numItems*2 }}