Kartentypen

Adaptive, Hero-, Listen-, Connector-Karten für Microsoft 365-Gruppen, Quittungs-, Anmelde- und Miniaturansichtskarten und Kartensammlungen werden in Bots für Microsoft Teams unterstützt. Sie basieren auf Karten, die vom Bot Framework definiert wurden, aber Teams unterstützt nicht alle Bot Framework-Karten und hat einige eigene hinzugefügt.

Bevor Sie die verschiedenen Kartentypen identifizieren, sollten Sie wissen, wie Sie eine Hero-, Miniaturansichts- oder Adaptive Karte erstellen.

Erstellen einer Hero-, Miniaturansichts- oder Adaptiven Karte

So erstellen Sie eine Hero-Karte, Miniaturansichtskarte oder adaptive Karte aus dem Entwicklerportal für Teams:

1. Wechseln Sie zum Entwicklerportal für Teams.

2. Wählen Sie "Adaptive Karten entwerfen und erstellen" aus.

3. Wählen Sie Neue Karte aus.

4. Geben Sie einen Kartennamen ein, und wählen Sie Speichern aus.

5. Wählen Sie eine der Karten aus Hero-Karte, Miniaturansichtskarte oder Adaptive Karte aus.

   

6. Wählen Sie Speichern.

7. Wählen Sie Diese Karte an mich senden aus. Die Karte wird als Chatnachricht an Sie gesendet.

Kartenbeispiele

Weitere Informationen zur Verwendung von Karten finden Sie in der Dokumentation für den Bot Builder SDK v3. Codebeispiele sind auch im Microsoft/BotBuilder-Samples Repository auf GitHub verfügbar. Es folgen einige Kartenbeispiele:

• .NET

  • Karten als Anlagen zu Nachrichten hinzufügen.
  • Karten-Beispielcode Bot Builder v4.

• Node.js

  • Karten als Anlagen zu Nachrichten hinzufügen.
  • Karten-Beispielcode Bot Builder v4.

Kartentypen

Sie können unterschiedliche Kartentypen basierend auf Ihren Anwendungsanforderungen identifizieren und verwenden. In der folgenden Tabelle sind die Kartentypen aufgeführt, die Ihnen zur Verfügung stehen:

Features, die unterschiedliche Kartentypen unterstützen

Allgemeine Eigenschaften für alle Karten

Sie können allgemeine Eigenschaften durchgehen, die für alle Karten gelten.

Inline-Kartenbilder

Die Karte kann ein Inlinebild enthalten, indem Sie einen Link zum öffentlich verfügbaren Bild einfügen. Aus Leistungsgründen wird dringend empfohlen, das Image in einem öffentlichen Content Delivery Network (CDN) zu hosten.

Bilder werden vergrößert oder verkleinert, um das Seitenverhältnis für die Abdeckung des Bildbereichs beizubehalten. Die Bilder werden dann von der Mitte her zugeschnitten, um das entsprechende Seitenverhältnis für die Karte zu erhalten.

Bilder dürfen höchstens 1024 × 1024 Pixel groß und im PNG-, JPEG- oder GIF-Format vorliegen. Animierte GIF- und SVG-Formate werden nicht unterstützt.

Die folgende Tabelle enthält die Eigenschaften von Inline-Kartenbildern:

Schaltflächen

Schaltflächen werden am unteren Rand der Karte gestapelt angezeigt. Der Schaltflächentext befindet sich immer in einer Zeile und wird abgeschnitten, wenn der Text die Breite der Schaltfläche überschreitet. Alle zusätzlichen Tasten, die über die maximale Anzahl der von der Karte unterstützten Tasten hinausgehen, werden nicht angezeigt.

Weitere Informationen finden Sie unter Kartenaktionen.

Kartenformatierung

Weitere Informationen zur Textformatierung in Karten finden Sie unter Kartenformatierung.

Nachdem Sie die allgemeinen Eigenschaften für alle Karten identifiziert haben, können Sie jetzt mit Adaptiven Karten arbeiten, die Ihnen helfen, das Engagement und die Effizienz zu steigern, indem Sie den von Ihnen verwendeten Apps die für Ihre Aktionen erfordernden Inhalte direkt hinzufügen.

Adaptive Karte

Eine Adaptive Karte ist eine anpassbare Karte, die eine beliebige Kombination aus Text, Sprache, Bildern, Schaltflächen und Eingabefeldern enthalten kann. Weitere Informationen finden Sie unter Adaptive Karten.

Informationen zu adaptiven Kartenvorlagen finden Sie unter Adaptive Card Starter Collection.

Unterstützung für Adaptive Karten

Die folgende Tabelle enthält die Features, die Adaptive Karten unterstützen:

Beispiel für Adaptive Card

Der folgende Code zeigt ein Beispiel für eine Adaptive Karte:

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Publish Adaptive Card schema",
            "weight": "bolder",
            "size": "medium"
          },
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "Image",
                    "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                    "size": "small",
                    "style": "person"
                  }
                ]
              },
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Matt Hidinger",
                    "weight": "bolder",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "spacing": "none",
                    "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                    "isSubtle": true,
                    "wrap": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
            "wrap": true
          },
          {
            "type": "FactSet",
            "facts": [
              {
                "title": "Board:",
                "value": "Adaptive Card"
              },
              {
                "title": "List:",
                "value": "Backlog"
              },
              {
                "title": "Assigned to:",
                "value": "Matt Hidinger"
              },
              {
                "title": "Due date:",
                "value": "Not set"
              }
            ]
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "Action.ShowCard",
        "title": "Set due date",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Date",
              "id": "dueDate"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      },
      {
        "type": "Action.ShowCard",
        "title": "Comment",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Text",
              "id": "comment",
              "isMultiline": true,
              "placeholder": "Enter your comment"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      }
    ]
  }  
}

Bewährte Methoden für adaptive Karten

Adaptive Karten dürfen keinen horizontalen Bildlauf anzeigen. Um horizontale Bildläufe zu vermeiden, geben Sie keine feste Breite an.

• ColumnSets

  • Vermeiden Sie das Definieren von ColumnSets mit mehr als drei Spalten.
  • Verwende explizite Pixelbreite nicht für mehr als eine Spalte in der Gruppe.
  • Wenn Sie eine explizite Breite verwenden, geben Sie keinen Wert an, bei dem die Spalte mehr als ein Viertel der schmalstmöglichen Breite der Karte verwendet (z. B. die Breite einer Karte im Besprechungschatbereich oder in Microsoft 365 Copilot).
  • Im Allgemeinen sind 48 Pixel ungefähr die maximale explizite Breite, die Sie verwenden möchten, obwohl es je nach Szenario Ausnahmen geben kann.

• Anpassen der Größe von Bildern

  • Wenn Sie ein Bild innerhalb eines ColumnSet mit mehr als einer Spalte verwenden, geben Sie lieber die Größe der Spalte an, die das Bild enthält, als das Bild selbst (legen Sie die Größe des Bilds auf "auto" oder "stretch" fest).
  • Wenn sich Ihr Bild nicht in einem ColumnSet befindet, ist es generell ratsam, die Größe auf "Auto" oder "Strecken" festzulegen.
  • Wenn Sie eine explizite Breite in Pixeln verwenden, stellen Sie sicher, dass sie 3/4 der schmalsten Breite der Karte nicht überschreitet.
  • Wenn du die explizite Größenanpassung in Pixeln verwendest, lege entweder die Breite oder die Höhe fest, aber nicht beides. Wenn Sie nur eine auswählen, wird sichergestellt, dass Ihr Bild das richtige Seitenverhältnis aufweist.
  • Legen Sie im Allgemeinen nur die Breite des Bilds fest, nicht die Höhe, obwohl es je nach Szenario Ausnahmen geben kann.

Zusätzliche Informationen zu Adaptiven Karten

Sie können dynamische Werte in einer adaptiven Karte mit dem Dollarsymbol ($) und geschweiften Klammern übergeben. Weitere Informationen finden Sie unter Vorlagenerstellung für adaptive Karten.

Beispiel:

{ 
 "type": "TextBlock",
 "text": "${titleText}",
 "size": "default",
 "weight": "bolder"
}

Bot Framework-Referenz:

• Adaptive Karten Node
• Adaptive Card C#

Weitere Informationen zu adaptive Karten finden Sie unter Adaptive Karten.

Sie können jetzt mit einer Hero-Karte arbeiten, bei der es sich um eine Mehrzweckkarte handelt, die verwendet wird, um eine mögliche Benutzerauswahl visuell hervorzuheben.

Ihr Bot kann Tags in einer adaptiven Karte Erwähnung, die in Kanälen veröffentlicht wird. Weitere Informationen finden Sie unter Tag-Erwähnung.

Hero-Karte

Eine Karte, die in der Regel ein einzelnes großes Bild, eine oder mehrere Schaltflächen und Text enthält.

Unterstützung für Hero-Karten

Die folgende Tabelle enthält die Features, die Hero-Karten unterstützen:

Eigenschaften einer Hero-Karte

Die folgende Tabelle enthält die Eigenschaften einer Hero-Karte:

Beispiel für eine Hero-Karte

Der folgende Code zeigt ein Beispiel für eine Hero-Karte:

{
   "contentType": "application/vnd.microsoft.card.hero",
   "content": {
     "title": "Seattle Center Monorail",
     "subtitle": "Seattle Center Monorail",
     "text": "The Seattle Center Monorail is an elevated train line between Seattle Center (near the Space Needle) and downtown Seattle. It was built for the 1962 World's Fair. Its original two trains, completed in 1961, are still in service.",
     "images": [
       {
         "url":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Seattle_monorail01_2008-02-25.jpg/1024px-Seattle_monorail01_2008-02-25.jpg"
       }
     ],
    "buttons": [
      {
         "type": "openUrl",
         "title": "Official website",
         "value": "https://www.seattlemonorail.com"
       },
      {
        "type": "openUrl",
        "title": "Wikipedia page",
        "value": "https://en.wikipedia.org/wiki/Seattle_Center_Monorail"
       }
     ]
   }
}

Zusätzliche Informationen zu Hero-Karten

Bot Framework-Referenz:

• Hero-Karte Node.js
• Hero-Karte C #

Listenkarte

Die Listenkarte wurde von Teams hinzugefügt, um Funktionen bereitzustellen, die über das hinausgehen, was die Listensammlung bereitstellen kann. Die Listenkarte enthält eine Bildlaufliste mit Elementen.

Unterstützung für Listenkarten

Die folgende Tabelle enthält die Features, die Listenkarten unterstützen:

Eigenschaften einer Listenkarte

Die folgende Tabelle enthält die Eigenschaften einer Listenkarte:

Beispiel für eine Listenkarte

Der folgende Code zeigt ein Beispiel für eine Listenkarte:

{
  "contentType": "application/vnd.microsoft.teams.card.list",
  "content": {
    "title": "Card title",
    "items": [
      {
        "type": "file",
        "id": "https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx",
        "title": "Report",
        "subtitle": "teams > new > design",
        "tap": {
          "type": "imBack",
          "value": "editOnline https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx"
        }
      },
      {
        "type": "resultItem",
        "icon": "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Trello-128.png",
        "title": "Trello title",
        "subtitle": "A Trello subtitle",
        "tap": {
          "type": "openUrl",
          "value": "http://trello.com"
        }
      },
      {
        "type": "section",
        "title": "Manager"
      },
      {
        "type": "person",
        "id": "JohnDoe@contoso.com",
        "title": "John Doe",
        "subtitle": "Manager",
        "tap": {
          "type": "imBack",
          "value": "whois JohnDoe@contoso.com"
        }
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Select",
        "value": "whois"
      }
    ]
  }
}

Connector-Karte für Microsoft 365-Gruppen

Sie können mit einer Konnektor-Karte für Microsoft 365-Gruppen arbeiten, die ein flexibles Layout bietet und eine hervorragende Möglichkeit darstellt, nützliche Informationen zu erhalten. Die Connector-Karte für Microsoft 365-Gruppen wird in Teams und nicht im Bot Framework unterstützt. Diese Karte bietet ein flexibles Layout mit mehreren Abschnitten, Feldern, Bildern und Aktionen. Diese Karte enthält eine Connectorkarte, sodass sie von Bots verwendet werden kann. Unterschiede zwischen Connectorkarten und der Connector-Karte für Microsoft 365-Gruppen finden Sie unter Connector-Karte für Microsoft 365-Gruppen.

Unterstützung von Connectorkarten für Microsoft 365-Gruppen

In der folgenden Tabelle sind die Features aufgeführt, die Connectorkarten für Microsoft 365-Gruppen unterstützen:

Eigenschaften der Connector-Karte für Microsoft 365-Gruppen

In der folgenden Tabelle sind die Eigenschaften der Connector-Karte für Microsoft 365-Gruppen aufgeführt:

Weitere Informationen zu den Eigenschaften der Connector-Karte für Microsoft 365-Gruppen finden Sie unter Karten-Felder.

Zusätzliche Informationen zur Connector-Karte für Microsoft 365-Gruppen

Konnektorkarten für Microsoft 365-Gruppen funktionieren ordnungsgemäß in Microsoft Teams, einschließlich ActionCard Aktionen.

Der wichtige Unterschied zwischen der Verwendung von Connectorkarten von einem Connector und der Verwendung von Connectorkarten in Ihrem Bot besteht in der Verarbeitung von Kartenaktionen. In der folgenden Tabelle sind die Unterschiede aufgeführt:

Jede Connector-Karte kann maximal 10 Abschnitte anzeigen, und jeder Abschnitt kann maximal fünf Bilder und fünf Aktionen enthalten.

Alle Textfelder unterstützen Markdown und HTML. Sie können steuern, welche Abschnitte Markdown oder HTML verwenden, indem Sie die markdownEigenschaft in einer Nachricht festlegen. Standardmäßig ist markdown auf truefestgelegt. Wenn Sie stattdessen HTML verwenden möchten, legen Sie markdown auf false fest.

Wenn Sie die Eigenschaft themeColor angeben, überschreibt sie in App-Manifest die Eigenschaft accentColor.

Um den Rendering-Stil für activityImage anzugeben, können Sie activityImageType wie in der folgenden Tabelle dargestellt festlegen:

Weitere Informationen zu den Eigenschaften der Connectorkarte finden Sie unter Referenz zu Nachrichtenkarten mit Aktionen. Die einzigen Eigenschaften von Connector-Karten, die Teams nicht unterstützt, sind die folgenden:

• heroImage
• hideOriginalBody
• startGroup wird in Teams immer als true behandelt
• originator
• correlationId

Beispiel für eine Connector-Karte für Microsoft 365-Gruppen

Der folgende Code zeigt ein Beispiel für eine Connector-Karte für Microsoft 365-Gruppen:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "John Doe commented on Trello",
    "title": "Project Tango",
    "sections": [
        {
            "activityTitle": "John Doe commented",
            "activitySubtitle": "On Project Tango",
            "activityText": "\"Here are the designs\"",
            "activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg"
        },
        {
            "title": "Details",
            "facts": [
                {
                    "name": "Labels",
                    "value": "Designs, redlines"
                },
                {
                    "name": "Due date",
                    "value": "Dec 7, 2016"
                },
                {
                    "name": "Attachments",
                    "value": "[final.jpg](http://connectorsdemo.azurewebsites.net/images/WIN14_Jan_04.jpg)"
                }
            ]
        },
        {
            "title": "Images",
            "images": [
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/MicrosoftSurface_024_Cafe_OH-06315_VS_R1c.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Scene_01.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Anthony_02.jpg"
                }
            ]
        }
    ],
    "potentialAction": [
        {
            "@context": "http://schema.org",
            "@type": "ViewAction",
            "name": "View in Trello",
            "target": [
                "https://trello.com/c/1101/"
            ]
        }
    ]
  }
}

Belegkarte

Teams unterstützt eine Belegkarte, mit der ein Bot dem Benutzer einen Beleg ausstellen kann. Sie enthält in der Regel die Liste der Elemente, die in den Beleg aufgenommen werden sollen, z. B. Informationen zu Steuern und Summen.

Unterstützung für Belegkarten

Die folgende Tabelle enthält die Features, die Belegkarten unterstützen:

Beispiel für eine Belegkarte

Der folgende Code zeigt ein Beispiel für eine Belegkarte:

{
  "contentType": "application/vnd.microsoft.card.receipt",
  "content": {
    "title": "John Doe",
    "facts": [
      {
        "key": "Order Number",
        "value": "1234"
      },
      {
        "key": "Payment Method",
        "value": "VISA 5555-****"
      }
    ],
    "items": [
      {
        "title": "Data Transfer",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png"
        },
        "price": "$ 38.45",
        "quantity": "368"
      },
      {
        "title": "App Service",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png"
        },
        "price": "$ 45.00",
        "quantity": "720"
      }
    ],
    "total": "$ 90.95",
    "tax": "$ 7.50",
    "buttons": [
      {
        "type": "openUrl",
        "title": "More information",
        "image": "https://account.windowsazure.com/content/6.10.1.38-.8225.160809-1618/aux-pre/images/offer-icon-freetrial.png",
        "value": "https://azure.microsoft.com/en-us/pricing/"
      }
    ]
  }
}

Zusätzliche Informationen zu Belegkarten

Bot Framework-Referenz:

• Belegkarte Node.js
• Belegkarte C #

Anmelde-Karte

Die Anmelde-Karte in Teams ähnelt der Anmelde-Karte im Bot Framework, mit der Ausnahme, dass die Anmelde-Karte in Teams nur zwei Aktionen signinopenUrlunterstützt:

Die Anmeldeaktion kann von jeder Karte in Teams verwendet werden, nicht nur von der Anmelde-Karte. Weitere Informationen finden Sie unter Teams-Authentifizierungsablauf für Bots.

Unterstützung für Anmeldekarten

In der folgenden Tabelle sind die Features aufgeführt, die Anmeldekarten unterstützen:

Zusätzliche Informationen zu Anmeldekarten

Bot Framework-Referenz:

• Anmelden Karte Node.js
• Anmelden Karte C#

Miniaturbildkarte

Sie können mit einer Miniaturansichtskarte arbeiten, die zum Senden einer einfachen Nachricht mit Aktionen verwendet wird. Sie ist eine Karte, die in der Regel ein einzelnes Miniaturbild, eine oder mehrere Schaltflächen und Text enthält.

Unterstützung für Miniaturansichtskarten

Die folgende Tabelle enthält die Features, die Miniaturansichtskarten unterstützen:

Eigenschaften einer Miniaturansichtskarte

Die folgende Tabelle enthält die Eigenschaften einer Miniaturansichtskarte:

Beispiel für eine Miniaturansichtskarte

Der folgende Code zeigt ein Beispiel für eine Miniaturansichtskarte:

{
  "contentType": "application/vnd.microsoft.card.thumbnail",
  "content": {
    "title": "Bender",
    "subtitle": "tale of a robot who dared to love",
    "text": "Bender Bending Rodríguez is a main character in the animated television series Futurama. He was created by series creators Matt Groening and David X. Cohen, and is voiced by John DiMaggio",
    "images": [
      {
        "url": "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
        "alt": "Bender Rodríguez"
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Thumbs Up",
        "image": "http://moopz.com/assets_c/2012/06/emoji-thumbs-up-150-thumb-autox125-140616.jpg",
        "value": "I like it"
      },
      {
        "type": "imBack",
        "title": "Thumbs Down",
        "image": "http://yourfaceisstupid.com/wp-content/uploads/2014/08/thumbs-down.png",
        "value": "I don't like it"
      },
      {
        "type": "openUrl",
        "title": "I feel lucky",
        "image": "http://thumb9.shutterstock.com/photos/thumb_large/683806/148441982.jpg",
        "value": "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE"
      }
    ],
    "tap": {
      "type": "imBack",
      "value": "Tapped it!"
    }
  }
}

Weitere Informationen

Bot Framework-Referenz:

• Miniaturansichtskarte Node.js
• Miniaturansichtskarte C#

Kartensammlungen

Sie können mit Kartensammlungen arbeiten, die Karussell- und Listensammlungen enthalten. Teams unterstützt Kartensammlungen. Kartensammlungen enthalten builder.AttachmentLayout.carousel und builder.AttachmentLayout.list. Diese Sammlungen enthalten Adaptive, Hero- oder Miniaturansichtskarten.

Karussellsammlung

Das Karusselllayout zeigt ein Karussell mit Karten, optional mit zugehörigen Aktionsschaltflächen.

Unterstützung für Karussellsammlungen

Die folgende Tabelle enthält die Features, die Karussellsammlungen unterstützen:

Eigenschaften einer Karussellkarte

Die Eigenschaften einer Karussellkarte sind identisch mit den Hero- und Miniaturansichtskarten.

Beispiel für eine Karussellsammlung

Der folgende Code zeigt ein Beispiel für eine Karussellsammlung:

{
 "attachmentLayout": "carousel",
 "attachments":[
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "extraLarge",
                "weight": "bolder",
                "text": "Welcome to Employee Connect",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "size": "medium",
                "weight": "bolder",
                "text": "Add events to your calendar",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "The bot can send \r\rnotification to remind \r\ryou about the latest \r\revents and trainings.",
                "wrap": true,
                "height": "stretch"
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.2",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee connect"
              },
              {
                "type": "TextBlock",
                "text": "The bot can send notifications \r\rto remind you about the latest \r\r events and trainings",
                "wrap": true,
                "maxWidth": 2
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee Connect final"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Create and manage your tasks",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "text": "The app identifies all your pending tasks \r\r and helps you manage everything at \r\r one place.",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Try these commands \r\r- Pending Submissions \r\r- Pending Approvals- My Tools",
                "wrap": true,
                "height": "stretch"
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    }
  ]
}

Syntax für Karussellsammlungen

builder.AttachmentLayoutTypes.Carousel ist die Syntax für Karussellsammlungen.

Listensammlung

Das Listenlayout zeigt eine vertikal gestapelte Liste von Karten, optional mit zugehörigen Aktionsschaltflächen.

Unterstützung für Listensammlungen

Die folgende Tabelle enthält die Features, die Listensammlungen unterstützen:

Beispiel für eine Listensammlung

Die Eigenschaften von Listensammlungen sind identisch mit den Hero- oder Miniaturansichtskarten.

Eine Liste kann maximal 10 Karten pro Nachricht anzeigen.

Syntax für Listensammlungen

builder.AttachmentLayout.list ist die Syntax für Listensammlungen.

Karten werden in Teams nicht unterstützt

Die folgenden Karten werden vom Bot Framework implementiert, werden aber von Teams nicht unterstützt:

• Animationskarten
• Audiokarten
• Grafikkarten

Codebeispiele

Siehe auch

• Karten und Dialogfelder
• Aktuelle Karten
• Mit Universal-Aktionen für adaptive Karten arbeiten
• Überlaufmenü "Adaptive Karten"
• Erstellen von Connectors für Microsoft 365-Gruppen