Formatieren von Karten in Microsoft Teams

Im Folgenden werden die beiden Möglichkeiten zum Hinzufügen von Rich-Text-Formatierungen für Ihre Karten beschrieben:

• Markdown
• HTML

Karten unterstützen die Formatierung nur in der Texteigenschaft, nicht in den Titel- oder Untertiteleigenschaften. Die Formatierung kann je nach Kartentyp mithilfe einer Teilmenge von XML- oder HTML-Formatierung oder mit Markdown angegeben werden. Für die aktuelle und zukünftige Entwicklung von adaptiven Karten wird die Markdownformatierung empfohlen.

Die Formatierungsunterstützung unterscheidet sich zwischen Kartentypen. Das Rendern der Karte kann sich zwischen dem Desktop und den mobilen Microsoft Teams-Clients und Teams im Desktopbrowser geringfügig unterscheiden.

Sie können ein Inlinebild mit einer beliebigen Teams-Karte einschließen. Unterstützte Bildformate sind PNG-, JPG- oder GIF-Formate. Halten Sie die Abmessungen innerhalb von 1024 x 1024 Pixel und die Dateigröße kleiner als 1 MB. Animierte .gif Bilder werden nicht unterstützt. Weitere Informationen finden Sie unter Typen von Karten.

Sie können adaptive Karten und Connectorkarten für Microsoft 365-Gruppen mit Markdown formatieren, die bestimmte unterstützte Stile enthalten.

Formatieren von Karten mit Markdown

Die folgenden Kartentypen unterstützen Markdownformatierung in Teams:

• Adaptive Karten: Markdown wird im Feld "Adaptive KarteTextblock" und und Fact.ValueFact.Title unterstützt. HTML wird in adaptiven Karten nicht unterstützt.
• Connectorkarten für Microsoft 365-Gruppen: Markdown und eingeschränkter HTML-Code wird in Connectorkarten für Microsoft 365-Gruppen in den Textfelder unterstützt.

Hinweis

Markdown wird für OAuth-Anmeldekarten in Bots nicht unterstützt.

Sie können Zeilenumbrüche für adaptive Karten verwenden, indem Sie die Escape-Sequenzen \r oder \n für Zeilenumbrüche in Listen verwenden. Die Formatierung unterscheidet sich für adaptive Karten zwischen der Desktopversion und den mobilen Versionen von Teams. Kartenbasierte Erwähnungen werden in Web-, Desktop- und mobilen Clients unterstützt. Sie können die Eigenschaft für die Informationsmaskierung verwenden, um bestimmte Informationen zu maskieren, beispielsweise das Kennwort oder vertrauliche Informationen von Benutzern innerhalb des Input.Text-Eingabeelements der adaptiven Karte. Sie können die Breite einer adaptiven Karte mithilfe des width-Objekts erweitern. Sie können die Typeahead-Unterstützung innerhalb adaptiver Karten aktivieren und den Satz von Eingabeoptionen filtern, während der Benutzer Text eingibt. Sie können die msteams -Eigenschaft verwenden, um die Möglichkeit zum selektiven Anzeigen von Bildern in der Phasenansicht hinzuzufügen.

Die Formatierung unterscheidet sich für adaptive Karten und Connector-Karten zwischen der Desktopversion und den mobilen Versionen von Teams. In diesem Abschnitt können Sie das Beispiel für das Markdownformat für adaptive Karten und Connector-Karten durchgehen.

Markdownformat für adaptive Karten

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

Format	Beispiel	Markdown
Fett	Bold	**Bold**
Kursiv	Italic	_Italic_
Unsortierte Liste	text text	- Item 1\r- Item 2\r- Item 3
Sortierte Liste	text text	1. Green\r2. Orange\r3. Blue
Hyperlinks	Bing	[Title](url)

Die folgenden Markdowntags 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 erscheint die Markdownformatierung für adaptive Karten wie in der folgenden Abbildung dargestellt:

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

Weitere Informationen finden Sie unter Textfeatures in adaptiven Karten.

Hinweis

Die in diesem Abschnitt erwähnten Datums- und Lokalisierungsfeatures werden in Teams nicht unterstützt.

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.io)"
        }
    ]
}

Adaptive Karten unterstützen Emoji. Der folgende Code zeigt ein Beispiel für adaptive Karten 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" }, ] }, ], }

Hinweis

Wenn Sie REST-APIs verwenden, legen Sie charset=UTF-8 in Ihren Anforderungsheadern fest, um Emojis in adaptiven Karten hinzuzufügen.

Unterstützung von Erwähnungen innerhalb adaptiver Karten

Sie können innerhalb eines Adaptive Card-Texts für Bots und Nachrichtenerweiterungsantworten hinzufügen @mentions . Um Karten hinzuzufügen @mentions , befolgen Sie die gleiche Benachrichtigungslogik und darstellung 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.

Hinweis

• Medienelemente werden in adaptiven Karten auf der Teams-Plattform derzeit nicht unterstützt.
• Kanal- und Teamerwähnungen werden in Botnachrichten nicht unterstützt.
• Sie können @mention mehrere Benutzer in einer einzelnen Adaptive Card-Nachricht verwenden. Stellen Sie jedoch sicher, dass der Grenzwert für die Nachrichtengröße 28 KB für eingehende Webhooks und 40 KB für eine Botnachricht nicht überschreitet.

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 Azure Active Directory(Azure AD)-Objekt-ID und UPN in Benutzererwähnung

Die Teams-Plattform ermöglicht es, Benutzer mit ihrer Azure AD-Objekt-ID und dem Benutzerprinzipalnamen (User Principle Name, UPN) zu erwähnen, zusätzlich zu den bestehenden Erwähnungs-IDs. 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:

IDs	Unterstützende Funktionen	Beschreibung	Beispiel
Azure AD-Objekt-ID	Bot, Connector	Objekt-ID des Azure AD-Benutzers	49c4641c-ab91-4248-aebb-6a7de286397b
UPN	Bot, Connector	UPN des Azure AD-Benutzers	john.smith@microsoft.com

Benutzererwähnung in Bots mit adaptiven Karten

Bots unterstützen die Benutzererwähnung mit der Azure AD-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ätsfeedbenachrichtigung, wenn er mit den IDs verwendet wird @mentioned .

Hinweis

Schemaaktualisierungen und Änderungen an der Benutzeroberfläche/Benutzeroberfläche sind für Benutzererwähnungen mit adaptiven Karten im Bot nicht erforderlich.

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 Azure AD</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Azure AD</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 beginnen mit der Unterstützung der Benutzererwähnung in adaptiven Karten mit der Azure AD-Objekt-ID und dem UPN.

Hinweis

• Aktivieren Sie die Benutzererwähnung im Schema für eingehende Webhooks, um die Azure AD-Objekt-ID und den UPN zu unterstützen.
• Benutzeroberflächen-/Benutzeroberflächenänderungen sind für Benutzererwähnungen mit Azure AD-Objekt-ID und UPN nicht erforderlich.

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 Azure AD</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 Azure AD</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

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

Personen-Symbol auf einer adaptiven Karte

Personen Symbol hilft Benutzern, die Bilder von Benutzern auf einer adaptiven Karte anzuzeigen. Sie können ein Bild einfügen und alle auf Bilder unterstützten Eigenschaften 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, zeigt die adaptive Karte das Personensymbol und den Namen des Benutzers an.

  Es folgt ein JSON-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"
        }
      }
    ]
  }
  

• Persona-Set: Wenn Sie mehrere Benutzer in einer adaptiven Karte anzeigen möchten, zeigt die adaptive Karte nur das Personensymbol der Benutzer an.

  Es folgt ein JSON-Beispiel für eine Persona-Gruppe:

  {
    "$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 Persona-Gruppe in einer adaptiven Karte nicht anpassen.

Die folgende Abbildung zeigt ein Beispiel für das Personensymbol in einer adaptiven Karte:

Abfrageparameter

In der folgenden Tabelle sind die Abfrageparameter aufgeführt:

Eigenschaftenname	description
type	component
name	graph.microsoft.com/users. Durchsuchen Sie alle Mitglieder im gesamten organization.
view	compact
properties	An die Komponentenvorlage übergeben
id	MRT des Benutzers
displayName	Name des Benutzers
userPrincipalName	Der Prinzipalname des Benutzers des Kontos in Azure AD

Adaptive Komponenten sind allgemeine Komponenten, die von Vorlagen und nativen adaptiven Kartenelementen unterstützt werden. Der Typ component kann an einer beliebigen Stelle innerhalb des Karte-Texts verwendet werden, und die Komponentendaten werden im properties -Attribut definiert. Die Komponentendaten unter properties werden direkt an die Komponente übergeben. Die properties -Eigenschaft definiert das Format für Persona und Persona Set, und alle anderen Eigenschaften unter properties werden nach component Typ im Schema der adaptiven Karte ignoriert.

Ihr Bot kann die Liste der Mitglieder und deren grundlegende Benutzerprofile abfragen, einschließlich Teams-Benutzer-IDs und Microsoft Azure Active Directory (Azure AD)-Informationen wie name, id und userPrincipalName. Weitere Informationen finden Sie unter Abrufen der Liste oder des Benutzerprofils.

Im Folgenden finden Sie ein Beispiel für das Personensymbol in einer adaptiven Karte auf Teams-Desktop- und mobilen Clients:

Desktopclient:

Wenn ein Benutzer auf ein Personensymbol zeigt, werden die personen Karte dieses Benutzers angezeigt.

Mobile Clients

Wenn ein Benutzer ein Personensymbol auswählt, werden 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.

Hinweis

Das Feature unterstützt nur die clientseitige Informationsmaskierung. Der maskierte Eingabetext wird als Klartext an die HTTPS-Endpunktadresse gesendet, die während der Bot-Konfiguration angegeben wurde.

Um Informationen in adaptiven Karten zu maskieren, fügen Sie die style -Eigenschaft zum Typinput.text hinzu, und legen Sie ihren Wert auf Password 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 Canvas-Raum zu verwenden. Der nächste Abschnitt enthält Informationen zur Verwendung der Eigenschaft.

Hinweis

Testen Sie Ihre adaptive Karte mit voller Breite in schmalen Formfaktoren wie mobilen und Besprechungsseitenbereichen, um sicherzustellen, dass Inhalte nicht abgeschnitten werden.

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 der adaptiven Karte, wenn Sie die width-Eigenschaft nicht auf Ganz festgelegt haben:

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

Phasenansicht 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 der Phasenansicht 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. Es folgt 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 in der oberen rechten Ecke ein Symbol zum Erweitern angezeigt, wie in der folgenden Abbildung dargestellt:

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

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

Hinweis

• Die Funktion zum Vergrößern und Verkleinern gilt nur für Bildelemente, die in einer adaptiven Karte den Typ „Bild“ aufweisen.
• Für mobile Teams-Apps ist standardmäßig die Stage View-Funktionalität für Bilder in adaptiven Karten verfügbar. Benutzer können Bilder für adaptive Karten in der Phasenansicht anzeigen, indem sie einfach auf das Bild tippen, unabhängig davon, ob das allowExpand Attribut vorhanden ist oder nicht.
• Die Phasenansicht für Bilder in adaptiven Karten unterstützt keine Base64-codierten Bilder.

Markdownformat für Connectorkarten für Microsoft 365-Gruppen

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

Format	Beispiel	Markdown
Fett	text	**text**
Kursiv	text	*text*
Header (Ebenen 1–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	>Text in Anführungszeichen blockieren	>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"
        }
     ]
  }
}

Überlaufmenü für adaptive Karten

Adaptive Karte in Teams unterstützt das Überlaufmenü. Sie können ein Überlaufmenü für alle sekundären Aktionen in einer adaptiven Karte auffüllen. Ein Überlaufmenü in einer adaptiven Karte kann folgendem hinzugefügt werden:

• Aktionen: In Aktionen werden die primären Schaltflächen auf der adaptiven Karte angezeigt, und die sekundären Schaltflächen befinden sich im Überlaufmenü.

• ActionSet: ActionSet ist eine Kombination aus mehreren Aktionen in einer adaptiven Karte. Jeder Aktionssatz kann über ein Überlaufmenü verfügen.

Hinweis

Eine adaptive Karte unterstützt bis zu sechs primäre Aktionen, die auf dem Karte angezeigt werden können. Jede zusätzliche primäre Aktion wird im Überlaufmenü angezeigt.

Überlaufmenü aktivieren

Um das Überlaufmenü zu aktivieren, konfigurieren Sie die mode Eigenschaft mit dem Wert als primary oder secondary im Schema der adaptiven Karte. In der folgenden Tabelle wird die mode -Eigenschaft beschrieben:

Eigenschaft	Typ	Erforderlich	Beschreibung
mode	Enumeration (primär, sekundär)	Nein	Gibt an, ob es sich bei der Aktion um eine primäre oder sekundäre Aktion handelt. Sekundäre Aktionen werden in ein Überlaufmenü reduziert.

Es folgt ein Beispiel für die mode -Eigenschaft im actions Typ und im ActionSet -Element:

Aktionen

Im folgenden Beispiel gibt es zwei primäre Aktionen und eine sekundäre Aktion. Die sekundäre Aktion erstellt ein Überlaufmenü.

{
   "type": "AdaptiveCard",
   "actions": [
        {
            "type": "Action.Submit",
            "title": "Set due date"
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.Submit",
            "title": "Delete",
            "mode": "secondary"
        }
    ]
}

Hinweis

• Das Überlaufmenü verhält sich bei einem Bot, der Karte gesendet wird, und einer Nachrichtenerweiterung Karte für die Stammebene actions in einer adaptiven Karte anders. Das Überlaufmenü eines bots, der Karte gesendet wurde, wird als Popupkontextmenü angezeigt und in der Nachrichtenerweiterung Karte es in der oberen rechten Ecke unter dem Symbol Weitere Optionen (...) angezeigt. Das Verhalten gilt nicht für die ActionSet in einer adaptiven Karte.

Die folgende Abbildung zeigt ein Beispiel für ein Überlaufmenü in einem Bot, der Karte gesendet wurde, und einer Nachrichtenerweiterung Karte:

Aktionsgruppe

Im folgenden Beispiel werden alle Aktionen als sekundär markiert, daher wird ein einzelnes Überlaufmenü auf dem Karte angezeigt.

{
    "type": "ActionSet",
     "actions": [

          {
           
            "type": "Action.Submit",
            "title": "view",
            "mode": "Secondary" 
       {
       },
            "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"

       },
       {
             "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       }
     ]
}

Im Folgenden finden Sie ein Beispiel für die Oberfläche des Überlaufmenüs in Teams Desktop und Mobile:

Desktop

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.

Mobil

Wenn ein Benutzer das Überlaufmenü auf dem Mobilgerät auswählt, zeigt die adaptive Karte die definierten Schaltflächen an. Es gibt ein integriertes Blatt, das ein Überlaufmenü mit Karte zugehörigen Aufgaben mit einer Nachrichtenoption anzeigt. Bei einem langen Drücken auf eine beliebige Nachricht wird eine Liste verwandter Nachrichten angezeigt. Diese Option ist nur für Aktionen verfügbar.

Formatieren von Karten mit HTML

Die folgenden Kartentypen unterstützen die HTML-Formatierung in Teams:

• Connectorkarten für Microsoft 365-Gruppen: Eingeschränkte Markdown- und HTML-Formatierungen werden in Connector-Karte für Microsoft 365-Gruppen unterstützt.
• Hero- und Miniaturansichtskarten: HTML-Tags werden für einfache Karten unterstützt, z. B. Hero- und Miniaturansichtskarten.

Die Formatierung unterscheidet sich zwischen der Desktopversion und den mobilen Versionen von Teams für Connectorkarten für Microsoft 365-Gruppen und einfache Karten. In diesem Abschnitt können Sie das HTML-Formatbeispiel für Connector-Karten und einfache Karten durchgehen.

HTML-Format für Connectorkarten für Microsoft 365-Gruppen

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

Format	Beispiel	HTML
Fett	text	<strong>text</strong>
Kursiv	text	<em>text</em>
Header (Ebenen 1–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 unter iOS nicht mit Markdown oder 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-Format für Hero- und Miniaturansichtskarten

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>
Header (Ebenen 1–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 kursiv werden unter iOS nicht gerendert.

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

Zeichenformatierungen, z. B. fett und kursiv, werden unter Android ordnungsgemäß angezeigt.

Formatbeispiel für einfache Karten

Die Bilder im vorherigen Abschnitt wurden mithilfe des App-Studios von Teams erstellt, 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>

Sie können die Formatierung auf Ihren eigenen Karten testen, indem Sie diesen Code ändern.

Codebeispiele

S.No.	Beschreibung	.NET	Node.js	Manifest
1	Diese Beispiel-App zeigt verschiedene Karte Formatierungen, die in Teams unterstützt werden.	View	View	Anzeigen

Siehe auch

• Karten- und Aufgabenmodule
• Formatieren von Bot-Nachrichten
• Verwenden von Aufgabenmodulen aus Bots
• Schemaexplorer für Adaptive Karten
• Erstellen von Connectors für Microsoft 365-Gruppen
• Erstellen eingehender Webhooks
• Vorlagen-SDKs für adaptive Karten