FactBranch
FactBranch
For Agencies Pricing Docs Blog
Sign up

Existing customer? Login

Docs navigation

show
Nodes

Render UI

Prerequisites

  • You should already have created a Flow.
  • It's best if you've already captured real data in the Flow's trigger and have generated output data with the preceding node.

In this article we're looking at:

Like most nodes, the Render UI node is divided into two main areas. The larger area on the left is for creating the template itself and the Preview box on the right shows you a preview of the template.

Overview of the Render UI node

Test input data

Most nodes use dynamic data somewhere (more on using placeholders for dynamic data in the using placeholders section below) and so it's important to test your node with input data.

The Input data is simply any valid JSON and you can change its values however you like.

You'll want to simulate the data this node receives from its previous node. So, ideally you would first capture a real request in the trigger, set up the next node (e.g. query an API or a database), any other nodes you'd want to run and then inherit its output data here.

To inherit the previous node's outputs, click Edit next to the Input data title and then click on inherit outputs from previous node. Your test input will be updated with the outputs of the previous node or trigger.

Generating an HTML template

When the template editor on the left is completely empty, the button Generate template" appears below the Input data* on the right.

Clicking this button will generate a template from your test input data. This works magically, when your input data is either a simple object that only contains properties or an array of such objects. If your input data is nested or complicated in another way, you might have to write your own HTML code.

But before we look into building templates, let's explore how to include dynamic data in your templates by using placeholders.

Using placeholders

To dynamically insert data in your template, you can use placeholders. In HTML templates we use a different syntax to other nodes: Variables don't have a $ prefix and you can output their values by surrounding a variable with double curly brackets:

{{ data }}

Like in all nodes, the input data to this node are stored in the variable data and you access the values themselves using the dot property syntax. Let's say your node receives the following data from the previous node or the trigger:

{
  "id": 123,
  "email": "alice@example.com",
  "full_name": "Alice Appleseed",
  "name": {
    "first": "Alice",
    "last": "Appleseed"
  }
}

To dynamically insert the email address in your template, write:

{{ data.email }}

Or to output the first name:

{{ data.name.first }}

Building your own HTML template

If auto-generating a template didn't give you the desired results, you can adapt the template or you might prefer to write your own template altogether.

There are a few CSS classes that you can use to style your template in the "standard" FactBranch style.

For a standard label-value output, use the following HTML code (for example to display the property full_name from your test input data):

<div class="ui_item">
  <div class="ui_item__label">Full name</div>
  <div class="ui_item__value">{{ data.full_name }}</div>
</div>

Templating basics

The template is normal HTML code, except that you can't use <script>, <html> or <body> tags. Your template will be included inside an HTML document, so there is no need for a surrounding <body> tag.

Dynamic parts are surrounded by curly brackets. But there are two variants:

  • {{ data.name }} Double curly brackets will output the results of whatever you put inside the curly brackets. Here it will output the value of data.name. You could also use simple expressions like {{ 1 + 1 }}, which will output 2 of course.

  • {% ... %} This syntax is for control structures like if or for.

If you are familiar with Liquid or Jinja2, you will recognize this templating syntax and feel at home.

Looping through an array (lists, tables)

You can also use for-loops in your template. Because the for itself is a statement, surround it with {% %}. First, here is test input data containing an array:

{
  "customers": [
    {"name": "Alice", "email": "alice@example.com"},
    {"name": "Bob", "email": "bob@example.com"},
    {"name": "Carla", "email": "carla@example.com"},
    {"name": "Dan", "email": "dan@example.com"}
  ]
}

To display these email addresses in a list, use the following snippet in your template:

<ul>
  {% for item in data.customers %}
    <li>{{ item.email }}</li>
  {% endfor %}
</ul>

Building a table

To build a nice and compact table we can use a for loop and a CSS class provided by FactBranch:

<table class="ui_table">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  {% for row in data.customers %}
    <tr>
      <td>{{ row.name }}</td>
      <td>{{ row.email }}</td>
    </tr>
  {% endfor %}
</table>

Adding an if statement

To display different content depending on the data we receive, we can use an if/elif/else statement. elif is short for "else if" and alows you to add more conditions if the previous conditions are not met. For example to display an error message if there was an error or a nice message if the customers array was empty we could simply do this:

{% if data.customers %}
  ... list the customers here ...
{% elif data.error_message %}
  <p style="color: crimson;">{{ data.error_message }}</p>
{% else %}
  <p>No customer found</p>
{% endif %}

The if first checks if the customers array contains entries - if not, it will check if there is an error_message - and if not, it will display the notice that no customers were found.

Special syntax for the Gmail Addon

If you want to display data in FactBranch's Gmail add-on, you have to use the render UI node as the last node in your Flow. However, there are limitations in the syntax you can use. One way to display the data is to use a special filter called gmail_item(). This will turn a single variable into a label-value pair in the Gmail app.

To display any variable as an item in the Gmail app, use the following syntax:

{{ data.email | gmail_item("Label for the item") }}

In the above syntax, data.email is the placeholder variable and "Label for the item" is the string that should be displayed as a label for that item.

At the moment, you cannot use HTML tags in templates for the Gmail addon. However, you can use loops or if statements to display or hide items in the app.

There are additional options to style the item as a link or a button. To style the item as a link, use the following syntax:

{{ data.link_url | gmail_item('Link text', 'link') }}

Similarly, to style the item as a button, use the following syntax:

{{ data.button_url | gmail_item('Label for the button', 'button') }}

It is important to note that the URL provided must be valid, or else the Gmail add-on will display an error.

Renaming the node

To rename the node, either click on Rename next to the title, or double-click on the title itself. Then enter the new name and click on Save or hit Enter on your keyboard. To revert to the old name, hit the Escape key.

Above the Input box you find the quick navigation through the Flow. Use this to get to the previous or the next node.