Microsoft teams Template

This section is a step-by-step guide on how to design and publish teams notification template.

Step 1: Design Template

You can design a simple text template with our default markdown editor. For advanced formatting and interactive options like buttons, images, and avatars, you can use microsoft's adaptive card design in JSONNET editor. Please note that the variable format for both editors will be different. We'll cover more about it in the next sections.

Design simple text template using Markdown editor

You can send simple text templates using the markdown editor in teams. Variables has to be added in handlebars format. Supported markdown syntaxes in Teams text messages:

Adding dynamic data in markdown editor

We use handlebarsjs as the template variable language in the markdown editor. You can learn about handlebarsjs here. If you are new to templates, we would recommend reading the templates documentation first to understand the basics of templating with SuprSend.

To add dynamic data, first add the variable data from your event and workflow request in the mock data.

Now, you can use your added sample by adding variables in the template. Type {{ and you'll start getting auto-suggestions of the variables added in your sample data below the text field. You can select the variable from the dropdown or directly type it in.

As a general rule, all the variables have to be entered within double curly brackets: {{variable_name}}. For URLs and links, we recommend using triple curly braces{{{url}}}.This is to avoid escaping html entities in handlebars. You can also write transformations like date-time formatting, if-else statement inside your templates using handlebar helpers.

Design adaptive card template using JSONNET editor

You can switch to JSONNET editor for advanced formatting and interactive options like buttons, images, and avatars. Microsoft provides support for adaptive card design to design such templates using a drag-and-drop editor. You can design your template in the adaptive card designer and copy the JSON payload from your designer into the Teams JSONNET editor.

We have also created some sample templates for a quick start. You can choose one of the samples from the right side options on top of the editor to start editing. We have used some mock data in our examples. Copy-paste the mock data values in the global "Mock data" button to see the preview.

🚧

Please note that the variable format ${variable} used in adaptive card is not supported in the JSONNET editor. You'll have to add the variable in JSONNET format as data.variable

Adding dynamic data in JSONNET editor

To add dynamic data, first add the variable data from your event and workflow request in the mock data.

Once the variables are declared, you can add them in the template as data.<variable_name>.

📘

Note that you will be able to enter a variable name even when you have not declared it inside the 'Mock data' button. However, the preview will not load without declaring the variables in "Mock data". Hence it's advised to always declare variables before loading the preview of the template.

Below are some examples of how to enter variables in the JSONNET editor. We'll use the sample shown in the screenshot above as a reference point.

1. Add nested variable

To enter a nested variable, enter in the format data.var1.var2.var3. Eg. to refer to city in the example above, you need to enter data.location.city

2. Add Variable with space and special characters in variable name

If you have any space in the variable name, enclose it in square bracket data.event['first name'] or data[$brand].brand_name

3. Add Single array element

To refer to an array element, enter in format data.var[*index*].var2}}. Eg. to refer to product_name of the first element of the array array, enter data.array[0].product_name}}

4. Add list of array items

Enter in the below format to add a dynamic list of items. In the above example, variable array has a list of product items, with product_name, and product_price as array properties.
Below is an example code to fetch array items in a text field list:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "body": [
    {
      "text": product.name +" at "+ product.price,
      "type": "TextBlock",
      "wrap": true
    }
    for product in data.products
  ],
  "type": "AdaptiveCard",
  "version": "1.6"
}

🚧

Mock data is required for parsing the JSONNET template

You'll need to add mock data for the variables added in your JSONNET template to view the parsed JSON template. JSON template will throw an error in case of missing mock data for a variable

Step 2: Preview Message

Click on the "Load Preview" button to load the message preview.

You will be able to see if your template is rendering properly with the sample mock data by loading the preview of your draft version. Make sure to see the preview before publishing the template to check if the parsed JSON is valid or not.

Step 3. Publish the template

Once finalized, you can publish the template by clicking on "Publish template" button on the draft version.

Your template is now ready to be triggered.

🚧

What happens if there is variable mismatch at the time of sending?

At the time of sending communication, if there is a variable present in the template whose value is not rendered due to mismatch or missing, SuprSend will simply discard the template and not send that particular notification to your user.

Please note that the rest of the templates will still be sent. Eg. if there is an error in rendering Teams template, but email template is successfully rendered, Teams notification will not be triggered, but email notification will be triggered by SuprSend.