Erstellen Ihrer ersten adaptiven Karte

Adaptive Karten in Power Automate können entweder Informationsblöcke freigeben oder für eine bestimmte Datenquelle Daten über ein Formular sammeln.

In jedem Fall müssen Sie skizzieren, welche Datasets Sie freigeben und/oder welche Daten das Formular erfassen soll.

Tipp

Verwenden Sie einfache Datenblöcke anstelle komplexer Tabellenarrays.

Anforderungen

Microsoft Teams mit installierter Workflows-App.

Aktion hinzufügen

In diesem Verfahren fügen Sie eine Aktion hinzu, die die Daten früherer Aktionen im Flow verwendet, um Informationen in einen Microsoft Teams-Kanal zu veröffentlichen.

  1. Melden Sie sich bei Power Automate an.

  2. Wählen Sie in der oberen Navigationsleiste Meine Abläufe aus.

  3. Wählen Sie Neuer Flow>Sofortiger Cloud-Flow aus.

  4. Geben Sie Ihrem Flow einen Namen.

  5. Wählen Sie als Auslöser Flow manuell auslösen aus.

  6. Wählen Sie Erstellen aus.

  7. Wählen Sie im Designer Neuer Schritt.

  8. Suchen Sie nach Microsoft Teams, und wählen Sie dann Adaptive Karte in einem Teams-Kanal posten und auf Antwort warten als Aktion aus.

  9. Wählen Sie das Team und den Kanal aus, in dem Sie die Karte veröffentlichen möchten.

  10. Fügen Sie diesen JSON Code in das Feld Nachricht ein.

    {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
            {
                "type": "TextBlock",
                "text": "Poll Request",
                "id": "Title",
                "spacing": "Medium",
                "horizontalAlignment": "Center",
                "size": "ExtraLarge",
                "weight": "Bolder",
                "color": "Accent"
            },
            {
                "type": "TextBlock",
                "text": "Header Tagline Text",
                "id": "acHeaderTagLine",
                "separator": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Header",
                "weight": "Bolder",
                "size": "ExtraLarge",
                "spacing": "None",
                "id": "acHeader"
            },
            {
                "type": "TextBlock",
                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum lorem eget neque sollicitudin, quis malesuada felis ultrices. ",
                "id": "acInstructions",
                "wrap": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Question",
                "id": "acPollQuestion"
            },
            {
                "type": "Input.ChoiceSet",
                "placeholder": "Select from these choices",
                "choices": [
                    {
                        "title": "Choice 1",
                        "value": "Choice 1"
                    },
                    {
                        "title": "Choice 2",
                        "value": "Choice 2"
                    },
                    {
                        "title": "Choice 3",
                        "value": "Choice 3"
                    }
                ],
                "id": "acPollChoices",
                "style": "expanded"
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Submit",
                "id": "btnSubmit"
            }
        ]
    }
    
  11. Nehmen Sie im JSON Code die folgenden Ersetzungen vor.

    Wichtig

    Entfernen Sie keine Anführungszeichen, wenn Sie die Ersetzungen ausführen. Sie können die Fahrzeugwahl Ihren Bedürfnissen entsprechend überarbeiten:

    Zu ändernder Text Neuer Text
    Slogantext der Kopfzeile Power Automate-Abfrage
    Umfrageüberschrift Bevorzugtes Fahrzeugmodell
    Frage der Umfrage Stimmen Sie unter den hier aufgeführten Möglichkeiten für Ihr bevorzugtes Fahrzeugmodell ab.
    Ersetzen Sie den lateinischen Text durch einen Grund oder geschäftlichen Kontext, der sich auf den Anlass der Umfrage bezieht. Wir befragen unsere Mitarbeiter, um festzustellen, ob wir personalisierte Parkplätze bereitstellen sollten, die für die beliebtesten Autos dimensioniert sind.
    Choice 1 (an beiden Stellen ersetzen) Tesla
    Choice 2 (an beiden Stellen ersetzen) Lexus
    Choice 3 (an beiden Stellen ersetzen) Honda
  12. Wählen Sie Neuer Schritt aus, und suchen Sie dann nach einer der Aktionen des Typs E-Mail senden, auf die Sie Zugriff haben, und wählen Sie diese aus.

  13. Geben Sie den E-Mail-Empfänger als die Person an, die die Sofortschaltfläche ausgewählt hat (verwenden Sie das Tag E-Mail aus dem dynamischen Inhalt des Auslösers).

  14. Konfigurieren Sie den Text der E-Mail wie folgt. Ersetzen Sie die Wörter in geschweiften Klammern „{}“ durch dynamische Token:
    Ihre Umfrageantwort war {acPollChoices} (acPollChoices ist dynamischer Inhalt für eine Aktion des Typs „Auf Antwort warten“). Sie wurde übermittelt von {}Benutzername („User Name“ ist dynamischer Inhalt aus dem Auslöser)

Testen Ihrer adaptiven Karte

Um Ihre Arbeit zu testen, führen Sie den zuvor erstellten Flow aus, und bestätigen Sie Folgendes:

  • Die Flowausführung enthält keine Fehler und wartet auf eine Antwort, wobei auf dem Ausführungsbildschirm der Warteindikator für die Aktion „Adaptive Card“ angezeigt wird.

  • Im Teams-Kanal wurde die neue adaptive Karte veröffentlicht.

  • Wenn Sie auf die Karte antworten, indem Sie ein Fahrzeugmodell auswählen und dann die Schaltfläche Übermitteln im unteren Abschnitt der adaptiven Karte wählen:

    • Auf der adaptiven Karte sollten keine Fehler auftreten.

    • Die Ausführung des Flows wurde erfolgreich abgeschlossen.

  • Der Kartenaustausch ist nach der Übermittlung relevant, wenn Sie den Bereich Aktualisierungsnachricht am unteren Rand des Aktionsbereichs Auf eine Antwort warten konfiguriert haben (was als Nächstes mit der entsprechenden Ersatzkarte angezeigt wird). Andernfalls wird das Formular durch alle Übermittlungen einfach zurückgesetzt.

    Ersatzkarte.

  • Die E-Mail-Benachrichtigung enthält den Text, aus dem hervorgeht, wer die Antwort übermittelt hat und welches Fahrzeug ausgewählt wurde.

Herzlichen Glückwunsch! Sie haben soeben Ihre erste interaktive adaptive Karte erstellt!

Fertiggestellte erste Karte.

Tipps zur Problembehandlung für adaptive Karten

Es folgen die häufigsten Probleme, die bei der Erstellung adaptiver Karten auftreten:

  • Fehler bei der Flowausführung haben oft eine der folgenden Ursachen:

    In diesem Fall kann der Fehler diesem Screenshot ähneln:

    Fehlermeldung.

    • Falsch formatierter JSON Code: Dieser ist in der Regel nicht so komplex, wie zu erwarten wäre. Dies sind meist nur Situationen, in denen:

      • Die Werte im JSON-Code stehen in typografischen Anführungszeichen, oder es fehlen Anführungszeichen. Überprüfen Sie immer den JSON-Code, um sicherzustellen, dass alle Textwerte in doppelte Anführungszeichen eingeschlossen sind und dass Zahlen in Anführungszeichen eingeschlossen werden. Alle Anführungszeichen müssen gerade sein und dürfen keine geschwungenen Anführungszeichen sein.

      • Sie können das Format Ihres JSON überprüfen, indem Sie das JSON in den Card Payload Editor einfügen.

    • Fehlende Bild-URLs: Alle Bildwerte in adaptiven Karten müssen auf eine gültige URL verweisen. Vollständiger Bildinhalt wird in einer adaptiven Karte nicht direkt unterstützt. Testen Sie Ihre Bildlinks, indem Sie die URL in den Browser einfügen, um zu prüfen, ob ein Bild angezeigt wird.

  • Adaptive Karten sehen unter Umständen aufgrund von Design- und Schemabeschränkungen nicht wie erwartet aus:

    • Prüfen Sie, ob Platzhalterwerte, Textstile und Markupsprachen mit den Anforderungen des Schemas der adaptiven Karte übereinstimmen (weitere Informationen finden Sie in den bewährten Methoden beim Schema adaptiver Kartenhier)

    • Nutzen Sie die Überprüfungsfunktion für adaptive Karten in Visual Studio Code. Um sie über die Anwendung Visual Studio Code zu installieren, öffnen Sie den Marketplace für Erweiterungen, und suchen Sie nach Adaptive Card Viewer.

      Visual Studio Code Erweiterung.

Zugeschnittener Screenshot der in Visual Studio Code installierten Erweiterung „Adaptive Card Viewer“ (Tastenkombination: Strg+V+A nach der Aktivierung).

  • Fehler nach der Übermittlung adaptiver Karten werden häufig durch Folgendes verursacht:

    • Verwendung einer Aktion, die nicht „Warten auf Antwort“ im Namen enthält

      Versuchen Sie es erneut.

    • Versuch, die Karte mehr als einmal einzureichen. Jede Adaptive Card kann nur einmal gesendet werden, danach werden alle weiteren Sendungen ignoriert.