Entwerfe adaptive Karten für deine Teams-App

Adaptive Cards für Microsoft Teams. Was ist das genau, wofür können sie verwendet werden und wie funktioniert das eigentlich. Wir haben heute Andreas Olbricht von der Olbricht IT im Interview, der mit uns zusammen diese Thema erörtert.

Was sind adaptive Karten?

Adaptive Karten sind ein Feature von Microsoft Teams, mit dem Benutzer interaktive Karten erstellen können, die innerhalb von Teams-Nachrichten angezeigt werden können. Adaptive Karten können dazu verwendet werden, Daten und Informationen in einer ansprechenden und leicht verständlichen Weise darzustellen, um Teammitgliedern dabei zu helfen, produktiver zu arbeiten. Nicht nur in Teams kannst du adaptive Cards verwenden. Auch für Outlook können damit „Nachrichten mit Aktionen“ erstellt werden.

Eine adaptive Karte besteht aus einer JSON-basierten Struktur, die definiert, wie die Karte im Teams-Client angezeigt wird. Die Struktur enthält Text, Bilder, Schaltflächen und andere Elemente, die von den Teams-Nutzern verwendet werden können, um mit der Karte zu interagieren.

Welchen Nutzen haben die Teamsnutzer?

Adaptive Karten sind „adaptiv“, weil sie automatisch an die Größe und das Layout des Anzeigegeräts angepasst werden, auf dem sie angezeigt werden. Dies ermöglicht es, dass adaptive Karten sowohl auf Desktop- als auch auf mobilen Geräten gut lesbar und funktionsfähig sind. Adaptive Karten können auf vielfältige Weise genutzt werden.

Einige Beispiele sind:

• Erstellung von Formularen, über die Benutzer Informationen sammeln können
• Anzeige von Status-Updates oder Fortschritten von Projekten
• Anzeige von visuellen Daten wie Diagrammen oder Tabellen
• Bereitstellung von Benachrichtigungen oder Erinnerungen
• Integration von Drittanbieteranwendungen oder Diensten

Adaptive Karten sind eine nützliche Funktion in Teams, die die Kommunikation und Zusammenarbeit innerhalb von Teams erleichtern und verbessern kann.

Adaptive Cards in der Praxis

Mit dem adaptive Card Designer von Microsoft kannst du relativ schnell deine Karte erstellen. Entweder mit Code oder ohne. Sinnvoll hierbei ist es natürlich, dass du die Grundlagen von HTML schon kennst. Dadurch wird es dir leichter fallen, deine erste Karte zu erstellen. Solltest du schon mit Power Apps gearbeitet und eine erstellt haben wird dir das ebenfalls zu Gute kommen.

Bei dem Adaptive Card Designer ist zu beachten, dass du die richtige Zielversion auswählst. In Teams beispielsweise können aktuell nur Karten bis zur Version 1.4 verwendet werden, obwohl im Designer schon 1.5 und 1.6 zur Verfügung stehen. Sobald du das oben rechts angepasst hast, kannst du mit den Designer starten.

Hier ist ein Beispiel einer adaptive Card. Da die gesammelten Daten natürlich irgendwo gespeichert werden müssen, um sie weiter verarbeiten zu können biete sich hier eine SharePoint Liste an, die im Hintergrund der adaptive Card steckt.

So kann die Karte dann in Teams aussehen.

Verwendest du die Adaptive Cards in Teams?

nuboLinks

Adaptive Karten (adaptivecards.io)
Designer | Adaptive Cards
Entwerfen von Aktion erfordernden Nachrichtenkarten mit dem adaptiven Kartenformat – Outlook Developer | Microsoft Learn
GitHub – microsoft/AdaptiveCards: A new way for developers to exchange card content in a common and consistent way.
GitHub – pnp/AdaptiveCards-Templates: Samples on different adaptive card designs demonstrating the art of possible with them. Designs provided by the Microsoft design team and first versions targeting Viva Connections Adaptive Card Extensions (ACE) scenarios.
Referenzen – Olbricht IT
Starte mit Microsoft Power Automate – nuboworkers

Zusammen erfolgreich sein

Bereit, eure
Zusammenarbeit auf das nächste Level zu bringen?

Wenn du unsicher bist, wo ihr aktuell steht oder was der nächste Schritt ist, schauen wir gemeinsam drauf.
Kurz, direkt und ohne Verpflichtung.

Termin vereinbaren Kontakt aufnehmen