Table of contents
TL;DR - I use adaptive cards a lot and sometimes things are not as easy as they look. This is a curated list of code samples, that I use in my adaptive cards. I hope this helps to build better cards and see what else is possible out-of-the-box.
If you would like to learn to build your first adaptive card, look here:
Getting started with Adaptive cardsBase Design Template
This is a very simple design I always use as a base to start from.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "Container",
"id": "Header",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Header Text",
"wrap": true,
"weight": "Bolder"
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Body text",
"wrap": true
}
],
"style": "default"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Send by an automated service account.",
"wrap": true,
"fontType": "Default",
"size": "Small",
"weight": "Lighter",
"color": "Accent"
}
]
}
],
"style": "emphasis"
}
]
}People Picker
Use a choice set for this. Instead of adding manual options in choices.data, you can use the endpoint for users in Graph. This also supports searching. The adaptive card will return the User id from Entra. If it is a multi-select dropdown, then this card will return the user ids separated by a comma.
{
"type": "Input.ChoiceSet",
"choices": [],
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"id": "people-picker",
"isMultiSelect": true
}Linking button with inputs
All buttons with the submit action will either connect automatically to all or to no inputs, if any inputs are required. This can be helpful if you only want the button “reject” to require certain inputs and the button “approve” further inputs.
//sinlge inputs
"associatedInputs":"inputName1"
//multiple inputs
"associatedInputs":["inputName1","inputName2"]❤️ Thanks for reading.