Skip to main content

Conditions and Loops

A template can decide what to write, and how many times. A condition writes a part of a file only when something is true, and a loop writes a part once for each item of a list. Both are Pebble tags, written between {% and %}.

A condition​

{% if showNote %}
<p>{{ note }}</p>
{% endif %}

The paragraph is written only when showNote is true. In the dialog the user types true or false in the field, and CodeBaker turns that text into a real boolean. Add {% else %} for the other case, and {% elseif %} (one word) for more of them:

{% if level == 'admin' %}Full access{% elseif level == 'editor' %}Can edit{% else %}Read only{% endif %}

Conditions combine with and, or and not, and compare with ==, !=, <, >, <= and >=. To test whether a list holds something, use contains: {% if roles contains 'admin' %}.

A loop​

A list goes in the json section of the config, where the user can edit it in the dialog, and the loop writes its body once for each item:

{% for item in items %}
<li>{{ item.name }}: {{ item.price }}</li>
{% endfor %}

Inside the loop you have the item (here item) and a few helpers: loop.first, loop.last, loop.length, and loop.index, which counts from 0. Use loop.index + 1 to count from 1. An {% else %} before {% endfor %} runs when the list is empty.

Both, in one file​

Here is a small page that uses a loop for the menu and a condition for the note:

A condition and a loop
Template.CodeBaker/conditions-and-loops/
Download the template (.zip)https://codebaker.dev/examples/conditions-and-loops.zip
Install in IntelliJ IDEA

Needs the CodeBaker plugin and an open project. Another IDE, or the button does nothing? Copy the link, then in the IDE right-click any folder → New → Generate from Template → Install Template from URL… and paste it. You always get a confirmation dialog before anything is installed.

codebaker.config.json5
{
  // The folder name when the template is installed under .CodeBaker/
  id: "conditions-and-loops",

  name: "Menu",

  vars: {
    title: "Lunch menu",
    // typed text `true` or `false` becomes a real boolean, so {% if showNote %} works
    showNote: "true",
    note: "Prices include tax.",
  },

  // A list goes in the json area of the dialog. Its top-level keys are variables too.
  json: {
    items: [
      { name: "Soup", price: 4 },
      { name: "Salad", price: 6 },
      { name: "Pasta", price: 9 },
    ],
  },
}
menu.html
<h1>{{ title }}</h1>
<ul>
    {% for item in items %}
    <li>{{ item.name }}: {{ item.price }}</li>
    {% endfor %}
</ul>
{% if showNote %}
<p>{{ note }}</p>
{% endif %}
Typed in the dialogstep 1, Custom Properties
title
Lunch menu
showNote
true
note
Prices include tax.
JSON
{
  "items": [
    {
      "name": "Soup",
      "price": 4
    },
    {
      "name": "Salad",
      "price": 6
    },
    {
      "name": "Pasta",
      "price": 9
    }
  ]
}
Generated resultwhat lands in your project
menu.html
<h1>Lunch menu</h1>
<ul>
    <li>Soup: 4</li>
    <li>Salad: 6</li>
    <li>Pasta: 9</li>
</ul>
<p>Prices include tax.</p>

Notice in the result:

  • the lines that hold only a tag ({% for %}, {% endfor %}, {% if %}, {% endif %}) leave no empty line behind;
  • the loop body keeps its own indentation;
  • the user can change the list in the dialog, add an item or remove one, and the page follows.

A choice inside a string​

A short choice can sit inside a string as an expression, and it stays valid text in most languages:

protected $env = '{{ environment == "production" ? "production" : "development" }}';

For a longer condition, set a variable first and print it:

//CodeBaker: {% if environment == 'production' %}
//CodeBaker: {% set envValue = 'production' %}
//CodeBaker: {% else %}
//CodeBaker: {% set envValue = 'development' %}
//CodeBaker: {% endif %}
protected $env = '{{ envValue }}';

The lines that start with //CodeBaker: are the next lesson's subject.

The catch with code​

HTML and Markdown accept {% %} as plain text, so the template above is a valid file. A PHP, Java or TypeScript file does not: your IDE reads the file before CodeBaker does, and a tag in the middle of a class is a syntax error.

class User extends Model {
  {% if needsTimestamps %}
  public $timestamps = true;
  {% endif %}
}
  • Syntax error: a template tag is not PHP

The next lesson shows how to keep the logic and still have a valid file: Keeping the Template Valid for Your IDE.

Next​