Delen via

Aan de slag komen

Een adaptieve kaart is een JSON-geserialiseerd kaartobjectmodel.

Adaptieve kaartstructuur

De basisstructuur van een kaart is als volgt:

  • AdaptiveCard - Het hoofdobject beschrijft de AdaptiveCard zelf, inclusief de make-up van het element, de acties, hoe het moet worden gesproken en de schemaversie die nodig is om het weer te geven.
  • body - Het lichaam van de kaart bestaat uit bouwstenen die bekend staat als elements. Elementen kunnen worden samengesteld in bijna oneindige indelingen om veel soorten kaarten te maken.
  • actions - Veel kaarten hebben een set acties die een gebruiker erop kan uitvoeren. In deze eigenschap worden de acties beschreven die doorgaans onderaan in een actiebalk worden weergegeven.

Voorbeeldkaart

Deze voorbeeldkaart die één regel tekst bevat, gevolgd door een afbeelding.

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

eigenschap Type

Elk element heeft een type eigenschap die aangeeft welk type object het is. Als u de bovenstaande kaart bekijkt, ziet u dat we twee elementen hebben, een TextBlock en een Image.

Alle Adaptive Card-elementen stapelen zich verticaal en breiden uit tot de breedte van hun bovenliggende element (denk aan display: block in HTML). U kunt echter een ColumnSet gebruiken om kolommen met containers naast elkaar te maken.

Adaptieve elementen

De meest fundamentele elementen zijn:

  • TextBlock : voegt een tekstblok met eigenschappen toe om te bepalen hoe de tekst eruitziet
  • Afbeelding : voegt een afbeelding toe met eigenschappen om te bepalen hoe de afbeelding eruitziet

Containerelementen

Kaarten kunnen ook containers hebben, die een verzameling onderliggende elementen rangschikken.

  • Container - Definieert een verzameling elementen
  • ColumnSet/Column - Definieert een verzameling kolommen, elke kolom is een container
  • FactSet - Container van feiten
  • ImageSet - Container of Images, zodat de gebruikersinterface de juiste fotogalerie-ervaring kan weergeven voor een verzameling afbeeldingen.

Invoerelementen

Met invoerelementen kunt u vragen om een systeemeigen gebruikersinterface om eenvoudige formulieren te maken:

  • Input.Text : tekstinhoud ophalen van de gebruiker
  • Input.Date - een datum ontvangen van de gebruiker
  • Input.Time - een tijdstip ophalen van de gebruiker
  • Input.Number - een getal van de gebruiker verkrijgen
  • Input.ChoiceSet - Geef de gebruiker een set keuzes en laat ze kiezen
  • Input.Toggle - Geef de gebruiker één keuze tussen twee items en laat ze kiezen

Acties

Acties voegen knoppen toe aan de kaart. Deze kunnen verschillende acties uitvoeren, zoals het openen van een URL of het verzenden van bepaalde gegevens.

  • Action.OpenUrl : de knop opent een externe URL voor weergave
  • Action.ShowCard - Vraagt een subkaart aan die aan de gebruiker moet worden weergegeven.
  • Action.Submit : vraag of alle invoerelementen moeten worden verzameld in een object dat vervolgens naar u wordt verzonden via een methode die is gedefinieerd door de hosttoepassing.

Voorbeeld Action.Submit: Met Skype verzendt een Action.Submit-activiteit van een Bot Framework-bot terug naar de bot met de eigenschap Waarde die een object bevat met alle invoergegevens erop.

Meer informatie

  • Last updated on