Stapsgewijze handleiding: je eerste Adaptive Card bouwen in MS Teams

By Mirko Peters · 2026-08-12 · Updated 2026-08-29

Welkom terug op de blog! Als je ooit helemaal overspoeld bent geraakt door het voortdurende gepiep van chatmeldingen, kanaalberichten en geautomatiseerde waarschuwingen, dan ben je zeker…

Automatically translated with AI from the original post. Read the English original

Titelbild: Step-by-Step Guide: Building Your First Adaptive Card in MS Teams

Welkom terug op de blog! Als je je ooit volledig overweldigd hebt gevoeld door het constante gepiep van chatmeldingen, kanaalberichten en geautomatiseerde waarschuwingen, dan ben je zeker niet de enige. Digitale werkers krijgen tegenwoordig een enorme hoeveelheid informatie te verwerken, vaak tientallen meldingen per uur. Deze voortdurende stroom verstoort onze concentratie, dwingt ons voortdurend van context te wisselen en laat ons aan het eind van de dag mentaal uitgeput achter. In onze podcastaflevering Build Actionable Teams Notifications with Adaptive Cards hebben we besproken hoe je je aanpak van communicatie volledig kunt veranderen door nutteloze, statische meldingen te vervangen door slimme, interactieve berichten.

Vandaag gaan we dit gesprek verder uitdiepen met een praktische aanpak. Deze handleiding leidt je stap voor stap door het bouwen van je allereerste Adaptive Card voor Microsoft Teams. Of je nu interne goedkeuringen wilt stroomlijnen, kritieke incidentmeldingen wilt verspreiden of gewoon de dagelijkse workflow van je team soepeler wilt maken: het beheersen van Adaptive Cards is een van de meest waardevolle vaardigheden die je binnen het Microsoft 365-ecosysteem kunt ontwikkelen. Laten we meteen beginnen en kijken wat er nodig is om aan de slag te gaan.

De basis: waarom traditionele meldingen tekortschieten

Voordat we aan de slag gaan met bouwen, is het handig om het kernprobleem te begrijpen dat we proberen op te lossen. De meeste standaardmeldingen in Microsoft Teams laten je weten dat er iets is gebeurd, maar ze bieden je geen directe manier om te reageren. Stel je voor dat je een melding krijgt dat een nieuwe inkooporder jouw goedkeuring nodig heeft. Met een gewone tekstmelding moet je de melding lezen, een webbrowser openen, inloggen in een afzonderlijke bedrijfsapplicatie, naar het specifieke record navigeren en uiteindelijk op "Goedkeuren" klikken.

Die reeks stappen onderbreekt je concentratie en kost waardevolle minuten. Vermenigvuldig die onderbreking met zestig keer per uur en je productiviteit verdwijnt. Adaptive Cards lossen dit op door de interface van de applicatie rechtstreeks in het chatvenster te plaatsen. Hiermee kun je gegevens lezen, formulierinvoer invullen en actieknoppen gebruiken zonder ooit je Teams-client te verlaten. Om deze cards succesvol te implementeren, moet je echter de onderliggende tools en voorwaarden begrijpen die nodig zijn om ze tot leven te brengen.

Voorwaarden en tools

Het bouwen van Adaptive Cards vereist geen uitgebreide achtergrond in softwareontwikkeling, maar je moet wel vertrouwd raken met de standaard authoringtools die Microsoft aanbiedt. Als je de juiste hulpmiddelen binnen handbereik hebt, verloopt je ontwerpproces soepel, van concept tot implementatie.

Essentiële bronnen voor card-ontwerpers

Adaptive Card Designer: Een browsergebaseerde visuele omgeving waarin je elementen kunt slepen en neerzetten, live apparaatvoorbeelden kunt bekijken en direct het onderliggende JSON-schema kunt genereren.
Microsoft Teams UI Kit (Figma): Onmisbaar voor ontwerprichtlijnen, thema's, toegankelijkheidsnormen en responsieve afmetingen in verschillende clientapplicaties.
Officiële documentatie: Je definitieve gids voor het controleren van ondersteunde schemaversies, card-acties en hostspecifieke weergavebeperkingen in Teams.
Voorbeeldsjablonen: Vooraf gemaakte JSON-sjablonen uit de open-sourcegemeenschap die je een voorsprong geven bij veelvoorkomende patronen zoals goedkeuringen, peilingen en rijke mediameldingen.

Zodra je ontwerpomgeving is ingericht, ben je klaar om de visuele opmaak en datastructuur van je card samen te stellen.

Een Adaptive Card maken

Een Adaptive Card maken draait vooral om het samenstellen van de opmaak en de JSON-structuur. Omdat Adaptive Cards een platformonafhankelijk schema gebruiken, kan één carddefinitie native worden weergegeven op Windows, macOS, iOS, Android en webclients.

De Adaptive Card Designer gebruiken

De eenvoudigste manier om je eerste card te bouwen is met de webgebaseerde designer. Volg deze eenvoudige werkwijze:

Ga in je webbrowser naar de officiële Adaptive Card Designer.
Kies een startsjabloon, zoals een basismelding of een invoerformulier, om een stevige basis te hebben.
Sleep visuele elementen zoals TextBlocks, FactSets, afbeeldingen en ActionSets naar je canvas.
Configureer eigenschappen zoals lettergroottes, afstanden en knoptitels zodat ze aansluiten bij de communicatiestijl van je organisatie.
Zet je previewdoel op "Microsoft Teams" om te controleren hoe de kaart er voor je eindgebruikers uitziet.
Kopieer de automatisch gegenereerde JSON-code uit het deelvenster codeweergave.

De basis van de JSON-structuur ontrafelen

Elke Adaptive Card wordt uiteindelijk aangedreven door een gestructureerde JSON-payload. Hieronder staat een eenvoudig, beginnersvriendelijk voorbeeld van een Adaptive Card JSON-schema dat een basisbegroeting en een actieknop definieert:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to your first adaptive card!",
      "size": "Medium",
      "weight": "Bolder"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Acknowledge"
    }
  ]
}

In dit fragment geeft het hoofdobject het kaarttype en de schemaversie aan. De body-array bevat visuele componenten zoals tekstblokken, terwijl de actions-array interactieve knoppen definieert, zoals Action.Submit of Action.OpenUrl, waarmee gebruikers achtergrondworkflows kunnen starten.

Kaarten verzenden met bots of de Graph API

Zodra je JSON-payload is afgerond en getest in de designer, is de volgende stap de kaart rechtstreeks naar je gebruikers in Microsoft Teams te sturen. Afhankelijk van je technische architectuur heb je meerdere solide opties voor de uitrol.

Je kunt Power Automate gebruiken voor low-code workflowintegraties, of aangepaste bots en de Microsoft Graph API inzetten voor geavanceerde levering op enterprise-niveau. Met een geregistreerde Azure AD-toepassing in combinatie met de Bot Framework REST API kun je interactieve kaarten automatisch naar specifieke gebruikers of kanalen met veel zichtbaarheid sturen.

Hier is een voorbeeld van een payloadstructuur waarbij je Adaptive Card wordt ingepakt als bijlage in een Bot Framework-bericht:

{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
          {
            "type": "TextBlock",
            "text": "New Service Request Pending Review"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Approve"
          },
          {
            "type": "Action.Submit",
            "title": "Reject"
          }
        ]
      }
    }
  ]
}

Door deze payload te koppelen aan een geautomatiseerde trigger, zoals een nieuwe rij in een SharePoint-lijst of een mislukte systeemrun in Power Automate, maak je van een passieve melding een actieve prompt die je helpt bij het nemen van beslissingen.

Kaarten testen en debuggen

Uitrol moet altijd worden voorafgegaan door grondig testen. Omdat verschillende clients (zoals de Teams-desktopapp, mobiele apps en Outlook-e-mailclients) Adaptive Cards renderen via eigen hostconfiguraties, kunnen er af en toe subtiele lay-outfouten optreden.

Houd bij het debuggen van je kaarten deze best practices in gedachten:

Valideer schemaversies: Zorg dat je kaartversie overeenkomt met de mogelijkheden die de huidige Microsoft Teams-clientarchitectuur ondersteunt.
Controleer tekstweergave: Controleer of variabele gegevensbinding correct wordt ingevuld en geen lege ruimtes oplevert als een gegevensveld leeg is.
Test op meerdere apparaten: Bekijk je kaarten op smalle mobiele schermen om te controleren of kolomlay-outs en knopgroepen netjes onder elkaar komen te staan zonder onhandige afbreking.
Verwerk Submit-acties: Zorg dat je backendservice de inkomende JSON-payloads die door gebruikersinteractie met knoppen worden geactiveerd correct verwerkt.

Conclusie

Je dagelijkse Microsoft Teams-ervaring transformeren draait om het wegnemen van wrijving en het doorbreken van digitale ruis. Door statische, nutteloze meldingen te vervangen door dynamische, interactieve Adaptive Cards, geef je jezelf en je team de ruimte om doortastend te handelen zonder voortdurend te schakelen tussen losstaande applicaties. We hebben vandaag de fundamentele mechanismen van het ontwerpen, structureren en uitrollen van deze kaarten besproken, maar dit is pas het begin van wat je kunt bereiken.

Wil je dieper ingaan op productiviteitsstrategieën en ontdekken hoe moderne tools je digitale werkomgeving kunnen veranderen? Luister dan zeker naar de bijbehorende podcastaflevering, Build Actionable Teams Notifications with Adaptive Cards. Begin vandaag nog met het experimenteren met je eigen aangepaste kaarten, stroomlijn je workflows en herwin je diepe focus!