Formatieren von Karten in Microsoft Teams

Die folgende Tabelle enthält die unterstützten Formatvorlagen für Textblock, Fact.Title und Fact.Value:

Die folgenden Markdown-Tags werden nicht unterstützt:

• Überschriften
• Tabellen
• Bilder
• Vorformatierter Text
• Blockzitate

Zeilenumbrüche für adaptive Karten

Sie können die Escape-Sequenzen \r oder \n für Zeilenumbrüche in Listen verwenden. Die Verwendung von \n\n in Listen bewirkt, dass das nächste Element in der Liste eingezogen wird. Wenn Sie Zeilenumbrüche an anderer Stelle im TextBlock benötigen, verwenden Sie \n\n.

Unterschiede für adaptive Karten zwischen Mobilgeräten und Desktops

Auf dem Desktop erscheint die Markdownformatierung für adaptive Karten wie in der folgenden Abbildung dargestellt, sowohl in Webbrowsern als auch in der Teams-Clientanwendung:

Unter iOS wird die adaptive Kartenmarkdown-Formatierung wie in der folgenden Abbildung dargestellt angezeigt:

Unter Android erscheint die Markdownformatierung für adaptive Karten wie in der folgenden Abbildung dargestellt:

Weitere Informationen zur Datums- und Uhrzeitformatierung und Lokalisierung in adaptiven Karten finden Sie unter Textfeatures in adaptiven Karten.

Formatbeispiel für adaptive Karten

Der folgende Code zeigt ein Beispiel der Formatierung für adaptive Karten:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.microsoft.com/?topic=welcome)"
        }
    ]
}

Adaptive Karten unterstützen Emojis. Die folgende Karten-Nutzlast zeigt eine adaptive Karte mit einem Emoji:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Publish Adaptive Card with emojis 🥰",
          "weight": "bolder",
          "size": "medium"
        }
      ]
    }
  ]
}

Unterstützung von Erwähnungen innerhalb adaptiver Karten

Sie können innerhalb eines adaptiven Kartentexts für Bots und Nachrichtenerweiterungsantworten hinzufügen @mentions . Zum Hinzufügen @mentions von Karten folgen Sie der gleichen Benachrichtigungslogik und dem gleichen Rendering wie bei nachrichtenbasierten Erwähnungen in Kanal- und Gruppenchatunterhaltungen.

Bots und Nachrichtenerweiterungen können Erwähnungen innerhalb des Karteninhalts in den Elementen TextBlock und FactSet enthalten.

Um eine Erwähnung in eine adaptive Karte aufzunehmen, muss Ihre App die folgenden Elemente enthalten:

• <at>username</at> in den unterstützten Elementen der adaptiven Karte.
• Das mention-Objekt innerhalb einer msteams-Eigenschaft im Karteninhalt enthält die Teams-Benutzer-ID des erwähnten Benutzers.
• Die userId ist für Ihre Bot-ID und einen bestimmten Benutzer eindeutig. Sie kann für @mention einen bestimmten Benutzer verwendet werden. Die userId kann mithilfe einer der in Benutzer-ID abrufen erwähnten Optionen abgerufen werden.

Beispiel einer adaptiven Karte mit einer Erwähnung

Der folgende Code zeigt ein Beispiel einer adaptiven Karte mit einer Erwähnung:

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

Microsoft Entra-Objekt-ID und UPN in Benutzer-Erwähnung

Die Teams-Plattform ermöglicht es Ihnen, Benutzer mit ihrer Microsoft Entra-Objekt-ID und ihrem Benutzerprinzipalnamen (User Principle Name, UPN) zusätzlich zu den vorhandenen Erwähnungs-IDs zu Erwähnungen. Bots mit adaptiven Karten und Connectors mit eingehenden Webhooks unterstützen die zwei Benutzererwähnungs-IDs.

In der folgenden Tabelle werden die neu unterstützten Benutzererwähnungs-IDs beschrieben:

Benutzererwähnung in Bots mit adaptiven Karten

Bots unterstützen die Erwähnung von Benutzern mit der Microsoft Entra-Objekt-ID und dem UPN zusätzlich zu den vorhandenen IDs. Die Unterstützung für zwei neue IDs ist in Bots für Textnachrichten, adaptiven Kartentext und die Nachrichtenerweiterungsantwort verfügbar. Bots unterstützen die Erwähnungs-IDs in Unterhaltungen und invoke-Szenarien. Der Benutzer erhält eine Aktivitätsfeed-Benachrichtigung, wenn er sich bei den IDs befindet @mentioned .

Beispiel

Beispiel für die Benutzererwähnung in Bots mit adaptiven Karten wie folgt:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Microsoft Entra ID</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

Die folgende Abbildung veranschaulicht die Benutzererwähnung mit adaptiver Karte im Bot:

Benutzererwähnung im eingehenden Webhook mit adaptiven Karten

Eingehende Webhooks unterstützen ab sofort die Erwähnung von Benutzern in adaptiven Karten mit der Microsoft Entra-Objekt-ID und dem UPN.

Beispiel

Beispiel für die Benutzererwähnung im eingehenden Webhook wie folgt:

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Microsoft Entra ID</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

Die folgende Abbildung veranschaulicht die Benutzererwähnung im eingehenden Webhook:

Symbol "People" in einer adaptiven Karte

Das Symbol "People" hilft Benutzern, die Bilder von Benutzern auf einer adaptiven Karte anzuzeigen. Sie können ein Bild einfügen und alle unterstützten Eigenschaften auf Bilder anwenden.

Es gibt zwei Arten von Personensymbolen, die in einer adaptiven Karte unterstützt werden:

• Persona: Wenn Sie einen einzelnen Benutzer in einer adaptiven Karte anzeigen möchten, werden das Personensymbol und der Name des Benutzers angezeigt.

  Der folgende JSON-Code ist ein Beispiel für eine Persona-Karte:

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
  {
        "type": "TextBlock",
        "text": "Persona",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/user",
        "view": "compact",
        "properties": {
          "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
          "displayName": "Daniela Mandera",
          "userPrincipalName": "damandera@microsoft.com"
        }
      }
    ]
  }
  

• Personensatz: Wenn Sie mehrere Benutzer in einer adaptiven Karte anzeigen möchten, wird nur das Personensymbol der Benutzer angezeigt.

  Der folgende JSON-Code ist ein Beispiel für ein Persona-Set:

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
      {
        "type": "TextBlock",
        "text": "Persona Set",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/users",
        "view": "compact",
        "properties": {
          "users": [
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            },
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            }
          ]
        }
      }
    ]
  }
  

  Hinweis

  Sie können den Stil der Persona und des Persona-Sets nicht in einer adaptiven Karte anpassen.

Das folgende Bild ist ein Beispiel für das Symbol "Personen" in einer adaptiven Karte:

Schema

In der folgenden Tabelle sind die Eigenschaften des Component Elements aufgeführt:

Adaptive Komponenten sind Komponenten auf hoher Ebene, die von Vorlagen und nativen adaptiven Kartenelementen unterstützt werden . Der Typ component kann an einer beliebigen Stelle innerhalb des Kartenkörpers verwendet werden, und die Komponentendaten werden im properties Attribut definiert. Die Komponentendaten darunter properties werden direkt an die Komponente übergeben. Die properties Eigenschaft definiert das Format für Persona und Persona Set, und alle anderen Eigenschaften werden properties im Schema der adaptiven Karte vom component Typ ignoriert.

Ihr Bot kann die Liste der Mitglieder und ihre grundlegenden Benutzerprofile abfragen, einschließlich Teams-Benutzer-IDs und Microsoft Entra-Informationen wie name, id, und userPrincipalName. Weitere Informationen finden Sie unter Abrufen der Liste oder des Benutzerprofils.

Die folgenden Bilder zeigen das Personensymbol in einer adaptiven Karte auf Microsoft Teams-Desktop- und mobilen Clients:

Desktopclient:

Wenn ein Benutzer auf ein Personensymbol zeigt, wird die Personen-Karte dieses Benutzers angezeigt.

Mobile Clients

Wenn ein Benutzer ein Personensymbol auswählt, wird die Personen-Karte dieses Benutzers angezeigt.

Maskieren von Information in adaptiven Karten

Verwenden Sie die Eigenschaft zur Informationsmaskierung, um bestimmte Informationen zu maskieren, z. B. das Kennwort oder vertrauliche Informationen von Benutzern innerhalb des Input.TextEingabeelements der adaptiven Karte.

Um Informationen in adaptiven Karten zu maskieren, fügen Sie die style Eigenschaft zum Typinput.text hinzu, und legen Sie ihren Wert auf Kennwort fest.

Beispiel für adaptive Karte mit Maskierungseigenschaft

Der folgende Code zeigt ein Beispiel für eine adaptive Karte mit Maskierungseigenschaft:

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

Die folgende Abbildung zeigt ein Beispiel für die Maskierung von Informationen in adaptiven Karten:

Adaptive Karte in ganzer Breite

Sie können die msteams Eigenschaft verwenden, um die Breite einer adaptiven Karte zu erweitern und zusätzlichen Platz im Zeichenbereich zu nutzen. Der nächste Abschnitt enthält Informationen zur Verwendung der Eigenschaft.

Erstellen von Karten in ganzer Breite

Um eine adaptive Karte in ganzer Breite zu erstellen, muss das width-Objekt der msteams-Eigenschaft im Karteninhalt auf Full festgelegt werden.

Beispiel einer adaptiven Karte in ganzer Breite

Um eine adaptive Karte in ganzer Breite zu erstellen, muss Ihre App die Elemente aus dem folgenden Codebeispiel enthalten:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Die folgende Abbildung zeigt eine adaptive Karte in ganzer Breite:

Die folgende Abbildung zeigt die Standardansicht einer adaptiven Karte, wenn Sie die width Eigenschaft nicht auf "Vollständig" festgelegt haben:

Adaptives Kartenlayout

Adaptive Karten passen ihr Aussehen und Verhalten automatisch an den Stil der Hostanwendung an, verfügen jedoch über ein festes Layout, das für alle mobilen und Desktop-Clients von Teams identisch bleibt. Sie müssen Ihre adaptiven Karten so entwerfen, dass sie auf jedem Gerät gut aussehen, um eine verbesserte Benutzererfahrung über Chats, Kanäle und Besprechungschats hinweg bereitzustellen. In diesem Artikel erfahren Sie mehr über das Entwerfen von responsiven adaptiven Karten.

Adaptives Kartenlayout hilft Ihnen, Karten mit unterschiedlichen Layouts zu entwerfen, die auf unterschiedliche Kartenbreiten ausgerichtet sind.

Entwerfen von responsiven adaptiven Karten

Verwenden Sie die targetWidth Eigenschaft für jedes Element, um:

• Ein- oder Ausblenden beliebiger Elemente basierend auf der Breite der Karte.

• Legen Sie unterschiedliche Zielbreiten für verschiedene Elemente fest, um unterschiedliche Layouts zu erstellen.

  In der folgenden Tabelle sind die verfügbaren targetWidth Werte aufgeführt:

  Wert	Beschreibung
  veryNarrow	Das Element wird angezeigt, wenn die Breite der adaptiven Karte sehr schmal ist, z. B. in einem Besprechungschat.
  narrow	Das Element wird angezeigt, wenn die Breite der adaptiven Karte schmal ist, z. B. bei einem Mobiltelefon im Hochformat.
  standard	Das Element wird angezeigt, wenn die Breite der adaptiven Karte Standard ist, z. B. auf einem Mobiltelefon im Querformat, auf einem Tablet im Hochformat oder in einem Chat auf dem Desktop.
  wide	Das Element wird angezeigt, wenn die Breite der adaptiven Karte breit ist, z. B. auf einem Tablet im Querformat, in einem Kanal oder in einem Chat auf dem Desktop, wenn Sie die volle Breite der Karte festlegen.

  Sie können die Eigenschaft auch festlegen, um targetWidth ein Element für einen Bereich von Kartenbreiten mit den atLeast Präfixen und atMost sichtbar zu machen. Sie können ein Element beispielsweise nur dann sichtbar machen, wenn die Kartenbreite "Standard oder höher" ist oder nur, wenn die Kartenbreite "schmal oder darunter" ist. Die folgende Tabelle enthält eine Anleitung, wie Sie ein Element für einen Bereich von Kartenbreiten sichtbar machen:

  Beispiel	Beschreibung
  "targetWidth": "atLeast:standard"	Das Element ist nur sichtbar, wenn die Breite der adaptiven Karte mindestens dem Standard entspricht, d. h. Standard oder breit ist.
  "targetWidth": "atMost:narrow"	Das Element ist nur sichtbar, wenn die Breite der adaptiven Karte höchstens schmal ist, d. h. sehr schmal oder schmal bedeutet.

  Hinweis

  Sie müssen nicht alle Elemente festlegen targetWidth . Wenn Sie kein Element festlegentargetWidth, ist das Element unabhängig von der Breite der Karte immer sichtbar.

Im Folgenden finden Sie JSON-Beispiele für eine adaptive Karte, die ohne Verwendung targetWidth entworfen und zur VerwendungtargetWidth geändert wurde:

• Adaptive Karte entworfen ohne Verwendung von targetWidth:

  {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "items": [
              {
                "type": "Image",
                "style": "Person",
                "url": "https://aka.ms/AAp9xo4",
                "size": "Small"
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "verticalContentAlignment": "center",
            "items": [
              {
                "type": "TextBlock",
                "weight": "Bolder",
                "text": "David Claux",
                "wrap": true
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "items": [
              {
                "type": "TextBlock",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "stretch",
            "verticalContentAlignment": "center"
          }
        ]
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
  }
  
  

  Die folgenden Bilder zeigen das Rendering der adaptiven Karte für unterschiedliche Kartenbreiten:

  • Wenn die Breite der Karte breit ist, sieht die Karte gut aus.

    

  • Wenn die Breite der Karte Standard oder schmal ist, wird die Rolle zusammengedrückt.

    

  • Wenn die Breite der Karte sehr schmal ist, werden Name und Rolle erheblich zusammengedrückt.

    

• Adaptive Karte aktualisiert, um reaktionsfähig zu sein, mit targetWidth:

    {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "targetWidth": "atLeast:narrow",
              "items": [
                {
                  "type": "Image",
                  "style": "Person",
                  "url": "https://aka.ms/AAp9xo4",
                  "size": "Small"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "spacing": "medium",
              "verticalContentAlignment": "center",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "David Claux",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "targetWidth": "atMost:narrow",
                  "spacing": "None",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "targetWidth": "atLeast:standard",
              "spacing": "medium",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "stretch",
              "verticalContentAlignment": "center"
            }
          ]
        }
      ],
      "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.5"
    }
  

  Sehen wir uns an, wie dieselbe adaptive Karte nach Verwendung der targetWidth Eigenschaft für verschiedene Kartenbreiten gerendert wird:

  • Auch wenn die Breite der Karte breit ist, sieht die Karte immer noch gut aus.

    

  • Wenn die Breite der Karte Standard oder schmal ist, wird die Rolle unter den Namen verschoben, da es keinen horizontalen Platz gibt, um sie nebeneinander anzuzeigen.

    

  • Wenn die Breite der Karte sehr schmal ist, können wir das Bild ausblenden und nur die aussagekräftigsten Informationen behalten.

    

Weitere Informationen zum Entwerfen einer adaptiven Karte finden Sie unter Entwerfen adaptiver Karten für Ihre Teams-App.

Typeahead-Unterstützung

Wenn Benutzer innerhalb des Input.ChoiceSet-Schemaelements zum Filtern und Auswählen einer beträchtlichen Anzahl von Auswahlmöglichkeiten auffordert werden, kann die Aufgabenvervollständigung erheblich verlangsamt werden. Die Unterstützung von Typeahead innerhalb adaptiver Karten kann die Eingabeauswahl vereinfachen, indem der Satz von Eingabeoptionen eingegrenzt oder gefiltert wird, während der Benutzer Text eingibt.

Um Typeahead in Input.Choiceset zu aktivieren, legen Sie style auf filtered fest, und stellen Sie sicher, dass isMultiSelect auf false festgelegt ist.

Beispiel für eine adaptive Karte mit Typeahead-Unterstützung

Der folgende Code zeigt ein Beispiel für eine adaptive Karte mit Typeahead-Unterstützung:

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Stageview für Bilder in adaptiven Karten

In einer adaptiven Karte können Sie die msteams Eigenschaft verwenden, um die Möglichkeit zum selektiven Anzeigen von Bildern in Stageview hinzuzufügen. Wenn Benutzer mit dem Mauszeiger auf die Bilder zeigen, wird ein Erweiterungssymbol angezeigt, für welches das allowExpand-Attribut auf true festgelegt ist. Der folgende Code ist ein Beispiel für die msteams Eigenschaft:

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Wenn Benutzer mit dem Mauszeiger auf das Bild zeigen, wird wie in der folgenden Abbildung ein Erweiterungssymbol in der oberen rechten Ecke angezeigt:

Das Bild wird in der Stage-Ansicht angezeigt, wenn der Benutzer das Erweiterungssymbol auswählt, wie in der folgenden Abbildung gezeigt:

In der Stageview können Benutzer das Bild vergrößern und verkleinern. Sie können die Bilder auf Ihrer adaptiven Karte auswählen, die über diese Funktion verfügen muss.

Connector-Karten unterstützen eingeschränkte Markdown- und HTML-Formatierung.

Format	Beispiel	Markdown
Fett	text	**text**
Kursiv	text	*text*
Kopfzeile (Ebenen 1 bis 3)	Text	### Text
Durchgestrichen	text	~~text~~
Unsortierte Liste	text text	- Item 1\r- Item 2\r- Item 3
Sortierte Liste	text text	1. Green\r2. Orange\r3. Blue
Vorformatierter Text	text	preformatted text
Blockzitat	>Blockzitat Text	>blockquote text
Hyperlink	Bing	[Bing](https://www.bing.com/)
Bildverknüpfung		

In Connector-Karten werden Zeilenumbrüche für \n\n gerendert, jedoch nicht für \n oder \r.

Unterschiede zwischen Mobilgeräten und Desktops für Connector-Karten

Auf dem Desktop erscheint die Markdownformatierung für Connector-Karten wie in der folgenden Abbildung dargestellt:

Unter iOS erscheint die Markdownformatierung für Connector-Karten wie in der folgenden Abbildung dargestellt:

Connector-Karten, die Markdown für iOS verwenden, weisen die folgenden Probleme auf:

• Der iOS-Client für Teams rendert keine Markdown- oder HTML-Inlinebilder in Connectorkarten.
• Blockzitate werden als eingezogen gerendert, aber ohne grauen Hintergrund.

Unter Android erscheint die Markdownformatierung für Connector-Karten wie in der folgenden Abbildung dargestellt:

Formatbeispiel für Markdown-Connector-Karten

Der folgende Code zeigt ein Beispiel für die Formatierung von Markdown-Connector-Karten:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

Wenn ein Benutzer das Überlaufmenü auf einem Desktop auswählt, werden die Schaltflächen, die als sekundär festgelegt sind, in der adaptiven Karte angezeigt.

Wenn ein Benutzer das Überlaufmenü auf Mobilgeräten auswählt, zeigt Adaptive Card die definierten Schaltflächen an. Es gibt ein integriertes Blatt, das ein Überlaufmenü mit Kartenbezogenen Aufgaben mit einer Nachrichtenoption anzeigt. Wenn Sie lange auf eine Nachricht drücken, wird eine Liste verwandter Nachrichten angezeigt. Diese Option ist nur für Aktionen verfügbar.

Connector-Karten unterstützen eingeschränkte Markdown- und HTML-Formatierung.

Format	Beispiel	HTML
Fett	text	<strong>text</strong>
Kursiv	text	<em>text</em>
Kopfzeile (Ebenen 1 bis 3)	Text	<h3>Text</h3>
Durchgestrichen	text	<strike>text</strike>
Unsortierte Liste	text text	<ul><li>text</li><li>text</li></ul>
Sortierte Liste	text text	<ol><li>text</li><li>text</li></ol>
Vorformatierter Text	text	<pre>text</pre>
Blockzitat	text	<blockquote>text</blockquote>
Hyperlink	Bing	<a href="https://www.bing.com/">Bing</a>
Bildverknüpfung		<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

In Connector-Karten werden Zeilenumbrüche in HTML mit dem <p>-Tag gerendert.

Unterschiede zwischen Mobilgeräten und Desktops für Connector-Karten

Auf dem Desktop erscheint die HTML-Formatierung für Connector-Karten wie in der folgenden Abbildung dargestellt:

Unter iOS erscheint die HTML-Formatierung wie in der folgenden Abbildung dargestellt:

Connector-Karten, die HTML für iOS verwenden, weisen die folgenden Probleme auf:

• Inlinebilder werden auf iOS weder mit Markdown noch mit HTML in Connectorkarten gerendert.
• Vorformatierter Text wird gerendert, hat aber keinen grauen Hintergrund.

Unter Android erscheint die HTML-Formatierung wie in der folgenden Abbildung dargestellt:

Formatbeispiel für HTML-Connector-Karten

Der folgende Code zeigt ein Beispiel für die Formatierung von HTML-Connector-Karten:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

HTML-Tags werden für einfache Karten unterstützt, z. B. Hero- und Miniaturansichtskarten. Markdown wird nicht unterstützt.

Format	Beispiel	HTML
Fett	text	<strong>text</strong>
Kursiv	text	<em>text</em>
Kopfzeile (Ebenen 1 bis 3)	Text	<h3>Text</h3>
Durchgestrichen	text	<strike>text</strike>
Unsortierte Liste	text text	<ul><li>text</li><li>text</li></ul>
Sortierte Liste	text text	<ol><li>text</li><li>text</li></ol>
Vorformatierter Text	text	<pre>text</pre>
Blockzitat	text	<blockquote>text</blockquote>
Hyperlink	Bing	<a href="https://www.bing.com/">Bing</a>
Bildverknüpfung		<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

Unterschiede zwischen Mobilgeräten und Desktops für einfache Karten

Da es Auflösungsunterschiede zwischen der Desktop- und der mobilen Plattform gibt, unterscheidet sich die Formatierung zwischen der Desktopversion und der mobilen Version von Teams.

Auf dem Desktop erscheint die HTML-Formatierung wie in der folgenden Abbildung dargestellt:

Unter iOS erscheint die HTML-Formatierung wie in der folgenden Abbildung dargestellt:

Zeichenformatierungen wie Fett- und Kursivdruck werden unter iOS nicht gerendert.

Unter Android erscheint die HTML-Formatierung wie in der folgenden Abbildung dargestellt:

Zeichenformatierungen wie Fett- und Kursivdruck werden unter Android korrekt angezeigt.

Formatbeispiel für einfache Karten

Sie können die Formatierung in Ihren eigenen Karten testen, indem Sie diesen Code ändern, wobei die Texteigenschaft einer Hero-Karte auf die folgende Zeichenfolge festgelegt ist:

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>