Rendern von Karten in der Anwendung

Das Rendern von adaptiven Karten in deiner Anwendung ist ganz einfach. Wir stellen SDKs für alle gängigen Plattformen sowie eine detaillierte Spezifikation bereit, damit du einen eigenen Renderer für adaptive Karten erstellen kannst.

  1. Installiere ein Renderer-SDK für deine Zielplattform.
  2. Erstelle eine Rendererinstanz, die mit dem Stil, den Regeln und den Aktionsereignishandlern deiner App konfiguriert ist.
  3. Rendere eine Karte auf der nativen Benutzeroberfläche, die automatisch den Stil deiner App aufweist.

SDKs für adaptive Karten

Plattform Installieren Erstellen Docs Status
JavaScript npm-Installation Quelle Dokumentation Buildstatus
.NET WPF NuGet-Installation Quelle Dokumentation Buildstatus
.NET HTML NuGet-Installation Quelle Dokumentation Buildstatus
Universelle Windows-Plattform NuGet-Installation Quelle Dokumentation Buildstatus
WinUI 3 NuGet-Installation Quelle Dokumentation Buildstatus
Android Maven Central Quelle Dokumentation Buildstatus
iOS CocoaPods Quelle Dokumentation Buildstatus

Erstellen einer Instanz der Renderers

Der nächste Schritt besteht darin, eine AdaptiveCardRenderer-Instanz zu erstellen.

Ankoppeln von Aktionselementen

Aktionen werden standardmäßig als Schaltflächen auf der Karte gerendert, allerdings obliegt es deiner App, für ein ordnungsgemäßes Verhalten zu sorgen. Jedes SDK verfügt über das Äquivalent eines OnAction-Ereignisses, die verarbeitet werden müssen.

  • Action.OpenUrl: Öffnet die angegebene url.
  • Action.Submit: Akzeptiert das Ergebnis der Übermittlung und sendet es an die Quelle. Wie du das Ergebnis an die Quelle der Karte sendest, liegt allein in deinem Ermessen.
  • Action.ShowCard: Ruft ein Dialogfeld auf und rendert die untergeordnete Karte in diesem Dialogfeld. Beachte, dass du dies nur verarbeiten musst, wenn ShowCardActionMode auf popup festgelegt ist.

Rendern einer Karte

Nach dem Abrufen einer Kartennutzlast rufst du einfach den Renderer auf und übergibst die Karte. Du erhältst ein natives Benutzeroberflächenobjekt, das aus den Karteninhalten besteht. Diese Benutzeroberfläche fügst du jetzt in deine App ein.

Anpassung

Es gibt verschiedene Möglichkeiten, die Renderausgabe anzupassen.

HostConfig

Eine HostConfig ist ein gemeinsam genutztes, plattformübergreifendes Konfigurationsobjekt, das die grundlegende Formatierung und das grundlegende Verhalten von Karten innerhalb deiner App steuert. Es definiert Aspekte wie Schriftgrößen, den Abstand zwischen Elementen, Farben, die Anzahl von unterstützten Aktionen usw.

Native Plattformformatierung

In den meisten UI-Frameworks kannst du die gerenderte Karte mithilfe des nativen Stils des UI-Frameworks formatieren. In HTML kannst du z. B. CSS-Klassen für die HTML-Ausgabe angeben, in XAML kannst du ein benutzerdefiniertes ResourceDictionary übergeben, um die Ausgabe differenziert zu steuern.

Anpassen des Renderns einzelner Elemente

Jedes SDK ermöglicht es, das Rendern eines beliebigen Objekts zu überschreiben oder sogar Unterstützung für vollständig neue, von dir definierte Elemente hinzuzufügen. Du kannst z. B. den Input.Date-Renderer so ändern, dass dein eigenes benutzerdefiniertes Steuerelement ausgegeben wird, die restliche Ausgabe des Renderers aber unverändert bleibt. Du kannst auch Unterstützung für ein von dir definiertes Rating-Element hinzufügen.