Schritt für Schritt: Ihre erste Adaptive Card in Microsoft Teams erstellen

Von Mirko Peters · 2026-08-12 · Aktualisiert 2026-08-29

Willkommen zurück im Blog! Wenn Sie sich schon einmal von der ständigen Flut an Chat-Benachrichtigungen, Kanalnachrichten und automatisierten Warnungen völlig überfordert gefühlt haben, sind Sie sicher…

Automatisch mit KI aus dem Originalbeitrag übersetzt. Englisches Original lesen

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

Willkommen zurück im Blog! Wenn Sie schon einmal vom ständigen Piepen der Chat-Benachrichtigungen, Kanalnachrichten und automatisierten Warnungen völlig überfordert waren, sind Sie damit sicher nicht allein. Digital Worker müssen heute eine erstaunliche Menge an Informationen verarbeiten und erhalten oft dutzende Benachrichtigungen pro Stunde. Dieser ununterbrochene Zustrom zerstreut unsere Aufmerksamkeit, zwingt uns zu ständigen Kontextwechseln und lässt uns am Ende des Tages geistig erschöpft zurück. In unserer Podcast-Folge Build Actionable Teams Notifications with Adaptive Cards haben wir besprochen, wie Sie Ihren Umgang mit Kommunikation grundlegend verändern können, indem Sie nutzlose, statische Benachrichtigungen durch clevere, interaktive Nachrichten ersetzen.

Heute vertiefen wir dieses Thema mit einem praxisnahen Ansatz. Dieser Leitfaden führt Sie durch den Prozess, Ihre allererste Adaptive Card für Microsoft Teams zu erstellen. Ob Sie interne Genehmigungen beschleunigen, kritische Störungsmeldungen verteilen oder einfach den Arbeitsalltag Ihres Teams reibungsloser gestalten möchten: Adaptive Cards zu beherrschen gehört im Microsoft-365-Ökosystem zu den Fähigkeiten mit dem größten Hebel. Steigen wir direkt ein und schauen uns an, was für den Einstieg nötig ist.

Die Grundlagen: Warum herkömmliche Benachrichtigungen scheitern

Bevor wir mit dem Bauen beginnen, lohnt es sich, das eigentliche Problem zu verstehen. Die meisten Standardbenachrichtigungen in Microsoft Teams teilen Ihnen mit, dass etwas passiert ist, bieten Ihnen aber keine direkte Möglichkeit zu reagieren. Stellen Sie sich vor, Sie erhalten eine Meldung, dass eine neue Bestellung Ihrer Genehmigung bedarf. Bei einer normalen Textbenachrichtigung müssen Sie die Meldung lesen, einen Webbrowser öffnen, sich in eine separate Fachanwendung einloggen, zum betreffenden Datensatz navigieren und schließlich auf „Genehmigen“ klicken.

Dieser mehrstufige Weg unterbricht Ihre Konzentration und kostet wertvolle Minuten. Multiplizieren Sie diese Unterbrechung mit sechzigmal pro Stunde, und Ihre Produktivität ist dahin. Adaptive Cards lösen dieses Problem, indem sie die Oberfläche der Anwendung direkt im Chatfenster darstellen. Sie können Daten lesen, Formulareingaben ausfüllen und Aktionsschaltflächen anklicken, ohne Ihren Teams-Client zu verlassen. Um diese Cards erfolgreich einzuführen, müssen Sie jedoch die zugrunde liegenden Werkzeuge und Voraussetzungen kennen.

Voraussetzungen und Werkzeuge

Für Adaptive Cards brauchen Sie keinen umfassenden Hintergrund in der Softwareentwicklung, wohl aber sollten Sie sich mit dem Standard-Werkzeugsatz für die Erstellung vertraut machen, den Microsoft bereitstellt. Die richtigen Hilfsmittel griffbereit zu haben, sorgt dafür, dass Ihr Gestaltungsprozess von der Idee bis zur Bereitstellung reibungslos verläuft.

Wesentliche Ressourcen für Card-Designer

Adaptive Card Designer: Ein browserbasierter visueller Editor, in dem Sie Elemente per Drag-and-drop anordnen, Live-Vorschauen auf verschiedenen Geräten betrachten und das zugrunde liegende JSON-Schema sofort generieren lassen können.
Microsoft Teams UI Kit (Figma): Unverzichtbar für Gestaltungsrichtlinien, Designthemen, Barrierefreiheitsstandards und responsive Größen in den verschiedenen Clientanwendungen.
Offizielle Dokumentation: Ihr maßgeblicher Leitfaden, um unterstützte Schemaversionen, Kartenaktionen und hostspezifische Darstellungseinschränkungen in Teams zu prüfen.
Beispielvorlagen: Vorgefertigte JSON-Vorlagen aus der Open-Source-Community, mit denen Sie bei gängigen Mustern wie Genehmigungen, Umfragen und Medienbenachrichtigungen einen Vorsprung gewinnen.

Sobald Ihre Gestaltungsumgebung eingerichtet ist, können Sie mit dem Aufbau des visuellen Layouts und der Datenstruktur Ihrer Card beginnen.

Eine Adaptive Card erstellen

Eine Adaptive Card zu erstellen ist vor allem eine Übung in Layoutgestaltung und JSON-Struktur. Da Adaptive Cards ein plattformunabhängiges Schema verwenden, kann eine einzige Card-Definition nativ unter Windows, macOS, iOS, Android und in Webclients dargestellt werden.

Den Adaptive Card Designer verwenden

Der einfachste Weg, Ihre erste Card zu erstellen, ist das webbasierte Designer-Tool. Gehen Sie dazu wie folgt vor:

Öffnen Sie den offiziellen Adaptive Card Designer in Ihrem Webbrowser.
Wählen Sie eine Startvorlage aus, etwa eine einfache Benachrichtigung oder ein Eingabeformular, um eine solide Grundlage zu haben.
Ziehen Sie visuelle Elemente wie TextBlocks, FactSets, Bilder und ActionSets per Drag-and-drop auf Ihre Arbeitsfläche.
Konfigurieren Sie Eigenschaften wie Schriftgrößen, Abstände und Schaltflächentitel, damit sie zum Kommunikationsstil Ihres Unternehmens passen.
Wechseln Sie das Vorschauziel auf „Microsoft Teams“, um zu prüfen, wie die Karte für Ihre Endbenutzer aussieht.
Kopieren Sie den automatisch generierten JSON-Code aus dem Codeansichtsbereich.

Grundlagen der JSON-Struktur verstehen

Jede Adaptive Card basiert letztlich auf einer strukturierten JSON-Nutzlast. Unten sehen Sie ein einfaches Beispiel für ein Adaptive-Card-JSON-Schema, das eine schlichte Begrüßung und eine Aktionsschaltfläche definiert:

{
  "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 diesem Ausschnitt legt das Root-Objekt den Kartentyp und die Schemaversion fest. Das Array body enthält visuelle Komponenten wie Textblöcke, während das Array actions interaktive Schaltflächen definiert – etwa Action.Submit oder Action.OpenUrl –, mit denen Benutzer Hintergrundworkflows auslösen können.

Karten mit Bots oder der Graph API senden

Sobald Ihre JSON-Nutzlast im Designer fertiggestellt und getestet ist, besteht der nächste Schritt darin, die Karte direkt an Ihre Benutzer in Microsoft Teams zu liefern. Je nach technischer Architektur stehen Ihnen mehrere robuste Bereitstellungsoptionen zur Verfügung.

Für Low-Code-Workflow-Integrationen können Sie Power Automate nutzen. Für anspruchsvollere, unternehmenstaugliche Bereitstellungen eignen sich benutzerdefinierte Bots und die Microsoft Graph API. Wenn Sie eine registrierte Azure-AD-Anwendung zusammen mit der Bot Framework REST API verwenden, können Sie interaktive Karten automatisch an bestimmte Benutzer oder stark frequentierte Kanäle senden.

Hier ist ein Beispiel für eine Nutzlaststruktur, wenn Sie Ihre Adaptive Card als Anhang in einer Bot-Framework-Nachricht verpacken:

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

Wenn Sie diese Nutzlast mit einem automatisierten Auslöser verbinden – etwa einem neuen Eintrag in einer SharePoint-Liste oder einem fehlgeschlagenen Systemlauf in Power Automate –, machen Sie aus einer passiven Warnung eine aktive Aufforderung, die eine Entscheidung ermöglicht.

Karten testen und debuggen

Vor jeder Bereitstellung sollte gründlich getestet werden. Da verschiedene Clients – etwa der Teams-Desktop, mobile Apps und Outlook-E-Mail-Clients – Adaptive Cards mit eigenen Host-Konfigurationen darstellen, können gelegentlich subtile Layoutfehler auftreten.

Beim Debuggen Ihrer Karten sollten Sie folgende bewährte Verfahren beachten:

Schemaversionen prüfen: Stellen Sie sicher, dass die Version Ihrer Karte zu den Funktionen des aktuellen Microsoft-Teams-Clients passt.
Textdarstellung prüfen: Kontrollieren Sie, ob die variable Datenbindung korrekt befüllt wird und keine leeren Stellen entstehen, wenn ein Datenfeld leer ist.
Auf verschiedenen Geräten testen: Zeigen Sie Ihre Karten auf schmalen Mobilgeräten in der Vorschau an, um sicherzustellen, dass sich Spaltenlayouts und Schaltflächengruppen sauber untereinander anordnen, ohne unschön umzubrechen.
Submit-Aktionen behandeln: Stellen Sie sicher, dass Ihr Backend-Dienst eingehende JSON-Nutzlasten, die durch Schaltflächen der Benutzer ausgelöst werden, korrekt verarbeitet.

Fazit

Ihr tägliches Microsoft-Teams-Erlebnis wird vor allem dadurch verbessert, dass Reibungsverluste sinken und digitaler Lärm wegfällt. Wenn Sie statische, wenig hilfreiche Benachrichtigungen durch dynamische, interaktive Adaptive Cards ersetzen, können Sie selbst und Ihr Team entschlossen handeln, ohne ständig zwischen getrennten Anwendungen wechseln zu müssen. Wir haben heute die grundlegenden Mechanismen zum Entwerfen, Strukturieren und Bereitstellen dieser Karten behandelt, doch das ist erst der Anfang dessen, was Sie erreichen können.

Um tiefer in Produktivitätsstrategien einzusteigen und zu erfahren, wie moderne Werkzeuge Ihren digitalen Arbeitsplatz verändern können, hören Sie sich unbedingt die begleitende Podcast-Folge Build Actionable Teams Notifications with Adaptive Cards an. Beginnen Sie noch heute mit dem Experimentieren mit Ihren eigenen benutzerdefinierten Karten, optimieren Sie Ihre Workflows und gewinnen Sie Ihre Konzentration zurück!