With Microsoft Teams, it is possible to create webhooks. A webhook is an URL which is opened up to the internet and allows other applications to interact with the application.
In the case of teams, these webhooks allow notifications to be shown in Microsoft Teams.
The document which is sent to Teams via the webhook is in JSON format, and teams then takes this JSON and displays accordingly.
A basic notification may look like this:
This is created using the following JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"id": "cccdb0fd-73f3-e358-6147-c7ed2254793e",
"text": "This is a test",
"wrap": true
}
],
"padding": "None"
}
To the more advanced:
Which is the following JSON:
{
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"padding": "none",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "**SATISFACTION SURVEY**",
"weight": "bolder"
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"horizontalAlignment": "Right",
"verticalContentAlignment": "center",
"url": "https://qms3.blob.core.windows.net/test/servicenow.png",
"height": "20px",
"altText": "Service Now Logo"
}
]
}
]
}
]
},
{
"type": "Container",
"padding": {
"right": "padding",
"left": "padding"
},
"items": [
{
"type": "TextBlock",
"text": "Help us improve by taking our short satisfaction survey.",
"weight": "bolder",
"wrap": true
}
]
},
{
"type": "Container",
"padding": {
"right": "padding",
"left": "padding",
"bottom": "padding"
},
"items": [
{
"type": "TextBlock",
"text": "1\\. How satisfied were you with the response time to your incident?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "responseTime",
"isRequired": true,
"placeholder": "Select a rating",
"choices": [
{
"title": "Very Satisfied",
"value": "1"
},
{
"title": "Not Satisfied",
"value": "2"
}
]
},
{
"type": "TextBlock",
"text": "2\\. How courteous and respectful was the technician who responded to your query?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "technicianQuery",
"isRequired": true,
"placeholder": "Select a rating",
"choices": [
{
"title": "Excellent",
"value": "1"
},
{
"title": "Very Good",
"value": "2"
}
]
},
{
"type": "TextBlock",
"text": "3\\. Was the technician able to resolve your issue during their first consultation?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "firstConsultation",
"isRequired": true,
"isMultiSelect": false,
"style": "expanded",
"choices": [
{
"title": "Yes",
"value": "yes"
},
{
"title": "No",
"value": "no"
}
]
},
{
"type": "TextBlock",
"text": "4\\. How satisfied are you with the overall service experience?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "OverallRating",
"isRequired": true,
"placeholder": "Select a rating",
"choices": [
{
"title": "Excellent",
"value": "1"
},
{
"title": "Very Good",
"value": "2"
}
]
},
{
"type": "TextBlock",
"text": "5\\. Is there any other comment you would like us to know?",
"wrap": true
},
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Add a comment"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Http",
"method": "POST",
"title": "Submit",
"isPrimary": true,
"body": "{\"responseTime\": \"{{responseTime.value}}\", \"technicianQuery\":\"{{technicianQuery.value}}\", \"firstConsultation\":\"{{firstConsultation.value}}\", \"OverallRating\":\"{{OverallRating.value}}\" }",
"url": "https://actionsplayground.azurewebsites.net/workspaces/IREXSqpHRk-hkfa7y7CAAw"
}
]
}
]
}
]
}
Designing these cards can be quite complex and time consuming, however the following websites are very useful, as these allow you to experiment with the JSON and visually show the results:
https://messagecardplayground.azurewebsites.net/
https://amdesigner.azurewebsites.net/
