Design the output

Contents

• Output designer
• Creating links
• Free-form HTML

Prerequisites

You should already have created a connection to your Microsoft SQL Server database and written an SQL query in FactBranch. If not, please first enter an SQL query in the FactBranch SQL editor.

Output designer

This is the FactBranch output designer:

You can rearrange the items in the center by dragging them up and down. On the right there is a live preview for the email address, phone number or custom field that you've entered in the query editor to test your query. This is how the results will look in the FactBranch app in Zendesk.

FactBranch automatically generates readable labels from property names. You can also change the labels by entering a different text in the label field.

Creating links

FactBranch can also turn outputs into links so your agents may for example quickly open an admin page in your CRM.

To create a link, your query should return a valid URL as one of the results. Here is how you can use CONCAT() to generate a URL from a customer ID.

SELECT
  CONCAT('https://example.com/customer/', customer.id) AS admin_url
FROM customer

In the designer move your mouse over the item and select Change type.

Then select link and immediately the item in the preview (and also the Zendesk app) becomes a clickable link. The item's value is used as the link's URL and the label as the link text.

Free-form HTML

If you need full flexibility, FactBranch provides the HTML item type. Hover your mouse over the item you'd like to edit and select Change type. Then select HTML.

Inside the template field you can enter any HTML you like. The FactBranch templating language closely follows the jinja2 templating language.

In each template you have access to these two variables: label and value. You can print the contents of the variables by entering {{ label }} and {{ value }} respectively. The simplest template you could write looks like this:

{{ label }}: {{ value }}

For the example item above this template will output "Sum: 197.23".

Now let's look at a more complicated example. Let's say we want to alert agents when the customer already has had more than 100$ of revenues. We can use an if-statement inside our template to output a note when the sum of all past purchases is greater than 100.

{% if value > 100 %}
  <span style="color: crimson; font-weight: 700">
    ✸ High-volume customer ({{ value }}$)
  </span>
{% endif %}

Generating the following eye-catching label for all customers with revenues greater than 100$.

Maps

If we have geo coordinates in the database, we can also add a map using the HTML feature in FactBranch. We'll use the beautiful Toner style from maps.stamen.com but you can use whichever service works for you and has the right license. You might have to get creative in your SQL query to get the outputs you need for your specific mapping service. In Stamen's case we need the coordinates in the form <lat>/<lon>.

<iframe width="100%" height="270"
  src="http://maps.stamen.com/toner/embed#16/{{ value }}"
  style="border: 1px solid black; margin: 1em 0;">
</iframe>

Notice how we've added {{ value }} to the src-attribute to generate the map dynamically.

Forms and POST requests

If you have an endpoint that performs an action - for example issuing a refund - that endpoint might need to be triggered by a POST request. With FactBranch you can create a simple form button that sends a POST to the specified endpoint like so:

<form action="{{ value }}" method="POST" target="_blank">
  <input type="submit" value="Issue refund"
    style="background-color:steelblue; color:white; padding:5px 15px;
      margin:1em 0; border:none;border-radius:5px;">
</form>

Next steps

Once you're happy with the preview, hit Finish and install the FactBranch app in Zendesk if you haven't installed it yet.