How to design simple MS Teams template using markdown editor or use JSONNET editor to replicate Microsoft’s adaptive card design.
Format | Syntax |
---|---|
Headings | # Heading level 1 . Refer all heading formats here |
line break | end a line with two or more spaces, and then type return (only 1 continuous line break is supported) |
Bold | **bold text** or __bold text__ |
Italic | _italic text_ or *italic text* |
Bold Italic | ***bold italic text*** or ___bold italic text___ |
>Blockquotes | > block quote text |
Lists | (1) First item (2) Second item Refer more lists format here |
code | At the command prompt, type code. |
Links | [Duck Duck Go](https://duckduckgo.com) |
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
.
JSON
format as shown in the screenshot below. This JSON should be the same as passed in your workflow or event request (it is a part of the data
field for workflow and properties
field for event). {{
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.
Mock Data
button to see the preview.
${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
Mock data
.
data.<variable_name>
.
Mock Data
. Hence it’s advised to always declare variables before loading the preview of the template.Add nested variable
data.var1.var2.var3
. Eg. to refer to city in the example above, you need to enter data.location.city
Add Variable with space and special characters in variable name
data.event['first name']
or data[$brand].brand_name
Add Single array element
data.var[*index*].var2}}
. Eg. to refer to product_name
of the first element of the array array
, enter data.array[0].product_name
Add list of array items
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: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.
Publish template
button on the draft version.