Logo
  • Contact form
  • Events & slides
  • Buy me a snack
👋🏻
/
📝
All Blogs
/Leveling up your adaptive cards
Leveling up your adaptive cards
Leveling up your adaptive cards

Leveling up your adaptive cards

Table of contents

  • Base Design Template
  • People Picker
  • Linking button with inputs
☝
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 cards

Base Design Template

This is a very simple design I always use as a base to start from.

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.

Logo

Events & slides

Buy me a snack

Contact form

Data privacy policy

About

This blog is made with ♥️ on Notion and made public with Super.so. Rocket icon created by RIkas Dzihab - Flaticon.

RedditLinkedIn
{
    "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"
        }
    ]
}