Introduction - Learn the template language in 10 minutes!

APITemplate.io leverages Jinja2 as our template engine, and we support HTML and Markdown. Jinja is a modern and designer-friendly templating language that is simple, expressive, and widely used.

Our documentation gives an overview of how Jinja2 is integrated into APITemplate.io

Jinja2 Syntax

There are a few kinds of delimiters. The default Jinja delimiters are configured as follows:

{% ... %} for Statements

{{ ... }} for Expressions to print to the template output

{# ... #} for Comments not included in the template output

Templating basics

A template is a text document that contains dynamic data replaced by the values passed in as JSON when the template is rendered.

Template variables are enclosed in {{ ... }}

Sample JSON

{
    "product": "Apple Juice",
    "made_in" : "Singapore"
}

Jinja2 Template

The product is {{product}}

Output

The product is Apple Juice

Comparison operations

Flow control and conditional statements are used to alter the flow of a program Flow control and conditional statements are used to alter the flow of a program.

To check the life span of the product

Sample JSON

{
    "product": "Apple Juice",
    "life_span": 180,
    "made_in" : "Singapore"
}

Jinja2 Template

{% if life_span > 160 and life_span < 180 %}
    {{product}} is expiring soon!
{% elif life_span >= 180 %}
    {{product}} has expired!
{% else %}
    It's perfect
{% endif %}

Output

Apple Juice has expired!

{%....%} these are the placeholders from which all the conditions are executed.

Syntax

{% if %} {% elif %} {% else %}

• The {% if %} statement is the primary building block to evaluate conditions.
• The {% if %} statement is typically used in conjunction with the {% elif %} and {% else %} statements to evaluate more than one condition.
• An {% if %} statement with an argument variable evaluates to true if a variable exists and is not empty or if the variable holds a True boolean value.

Comparison operators

Logical operators

Loops

The 'for' 'endfor' is used for looping/iterative purposes.

It's used for repeating a certain set of statements for a particular number of times, then for-endfor is used.

Sample JSON

{
    "products": ["Apple Juice", "Orange Juice", "Pineapple Juice"]
}

Jinja2 Template

<ul>
{% for product in products %}
    <li>{{ product }}</li>
{% endfor %}
</ul>

Output

<ul>
    <li>Apple Juice</li>
    <li>Orange Juice</li>
    <li>Pineapple Juice</li>
</ul>

• The {% for %} {% endfor %} statement iterates over items on a dictionary, list, tuple or string variable.
• The {% for %} statement syntax is {% for in %}, where is assigned a new value from on each iteration.
• Depending on the nature of a variable there can be one or more references (e.g. for a list one reference, for a dictionary two references).

APITemplate.io Filters/Functions

Introduction

Filters are special functions that take a data structure or variable in a template and render it in a slightly different format.

We support filters to generate QRCode, barcode and HTML table from a json array.

To use a filter you would typically follow the syntax

{{source_value | filter_name}}.

The delimiters such as {{...}} and pipes | which are used to enclose variables and define filter expressions

Render QR Code

To render a value into a QRCode

{{json_field_or_value | render_qrcode(style="css style")}}

Sample JSON

{
  "email": "hello@apitemplate.io",
  "website": "https://apitemplate.io",
}

Jinja2 Template

{{website | render_qrcode(style='width: 100px;height:100px;background: white;')}}
QR code for {{website}}

Output

Render Bar Code

To render a value into a bar code

{{json_field_or_value | render_barcode(type="barcode_type",style="css style")}}

Sample JSON

{
    "document_id": "889856789012"
}

Jinja2 Template

{{document_id | render_barcode(type='ean13',style='height: 100px;')}}
Barcode for {{document_id}}

Output

The followings are the barcode_type

Render Table

Render a json array into a HTML table

{{json_array | render_table(table_class="css class")}}

Sample JSON

{
    "title": "json list",
    "items": [
        {
        "item_name": "product 1",
        "price": "USD 200.00"
        },
        {
        "item_name": "product 2",
        "price": "USD 300.00"
        }
    ]
}

Jinja2 Template

{{items | render_table(table_class='table')}}

Output

Render JSON

Render a JSON object into a JSON in the HTML

{{json_object | json}}

Other Useful Functions/Filters

• sum()
• max()
• min()
• first()
• last()
• map()
• length()
• random()
• upper()
• lower()
• title()
• abs()
• round()
• format()
• join()
• replace()
• urlencode()
• random()

More Functions(Filters) on official website

jinja.palletsprojects.com

Conclusion

Want information on the template engine's syntax? Head over to the official Jinja2 website and documentation

• Jinja - Template Designer Documentation
• Jinja - Official website

A YouTube tutorial is also available for your convenience: - Jinja2 Templating Engine Tutorial by Mr. Rigden