Freigeben über

Erste Schritte

Eine adaptive Karte ist ein JSON-serialisiertes Kartenobjektmodell.

Struktur adaptiver Karten

Die Grundstruktur einer Karte ist wie folgt:

  • AdaptiveCard - Das Stammobjekt beschreibt die AdaptiveCard selbst, einschließlich ihrer Elementzusammensetzung, ihrer Aktionen, wie sie gesprochen werden soll, und die Schemaversion, die zum Rendern erforderlich ist.
  • body - Der Körper der Karte besteht aus sogenannten Bausteinen, die als elements bekannt sind. Elemente können in nahezu unendlichen Anordnungen zusammengestellt werden, um vielerlei Arten von Karten zu erstellen.
  • actions - Viele Karten verfügen über eine Reihe von Aktionen, die ein Benutzer daran ausführen kann. Diese Eigenschaft beschreibt die Aktionen, die in der Regel in einer Aktionsleiste unten gerendert werden.

Beispielkarte

Diese Beispielkarte, die eine einzelne Textzeile gefolgt von einem Bild enthält.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type-Eigenschaft

Jedes Element verfügt über eine type Eigenschaft, die angibt, welche Art von Objekt es ist. Wenn Sie die obige Karte betrachten, können Sie sehen, dass wir zwei Elemente haben, ein TextBlock und ein Image.

Alle adaptiven Karten-Elemente stapeln sich vertikal und dehnen sich auf die Breite ihres übergeordneten Elements aus (ähnlich wie display: block in HTML). Sie können jedoch eine ColumnSet zum Erstellen nebeneinander angeordneter Spalten von Containern verwenden.

Adaptive Elemente

Die grundlegendsten Elemente sind:

  • TextBlock – Fügt einen Textblock mit Eigenschaften hinzu, um zu steuern, wie der Text aussieht.
  • Bild – Fügt ein Bild mit Eigenschaften hinzu, um zu steuern, wie das Bild aussieht

Containerelemente

Karten können auch Container enthalten, die eine Sammlung von untergeordneten Elementen anordnen.

  • Container – Definiert eine Sammlung von Elementen
  • ColumnSet/Column – Definiert eine Sammlung von Spalten, jede Spalte ist ein Container
  • FactSet - Faktencontainer
  • ImageSet – Container von Bildern, sodass auf der Benutzeroberfläche geeignete Fotogaleriefunktionen für eine Sammlung von Bildern angezeigt werden können.

Eingabeelemente

Mit Eingabeelementen können Sie native Benutzeroberflächen verwenden, um einfache Formulare zu erstellen.

  • Input.Text – Abrufen von Textinhalten vom Benutzer
  • Input.Date – Abrufen eines Datums vom Benutzer
  • Input.Time – Eine Uhrzeit vom Benutzer abfragen.
  • Input.Number – Abrufen einer Zahl vom Benutzer
  • Input.ChoiceSet – Geben Sie dem Benutzer eine Reihe von Auswahlmöglichkeiten, und lassen Sie ihn auswählen
  • Input.Toggle – Geben Sie dem Benutzer eine einzelne Auswahl zwischen zwei Elementen, und lassen Sie sie auswählen

Aktionen

Aktionen fügen der Karte Schaltflächen hinzu. Diese können eine Vielzahl von Aktionen ausführen, z. B. das Öffnen einer URL oder das Senden einiger Daten.

  • Action.OpenUrl – Die Schaltfläche öffnet eine externe URL zum Anzeigen.
  • Action.ShowCard – Fordert eine Unterkarte an, die dem Benutzer angezeigt werden soll.
  • Action.Submit – Bitten Sie, alle Eingabeelemente in einem Objekt zu sammeln, das dann über eine von der Hostanwendung definierte Methode an Sie gesendet wird.

Beispiel Action.Submit: Mit Skype sendet eine Action.Submit eine Bot Framework Bot-Aktivität zurück an den Bot, wobei die Value-Eigenschaft ein Objekt enthält, das alle Eingabedaten beinhaltet.

Weitere Informationen