Vorausschauende Suche in Adaptiven Karten

  • Artikel

Die Suchfunktion "Typeahead" in Adaptive Karten bietet eine verbesserte Suchfunktion für Input.ChoiceSet Komponenten. Es enthält eine Liste der Optionen zum Eingeben von Text in das Suchfeld. Sie können die Typeahead-Suche mit adaptiven Karten integrieren, um Daten zu durchsuchen und auszuwählen.

Sie können die typeahead-Suche für die folgenden Suchvorgänge verwenden:

Mit der statischen Typahead-Suche können Benutzer aus Werten suchen, die in Input.ChoiceSet der Nutzlast der adaptiven Karte angegeben sind. Die statische Typaheadsuche kann verwendet werden, um dem Benutzer mehrere Optionen anzuzeigen. Die Nutzlastgröße in der statischen Suche nimmt mit der Anzahl der in der Nutzlast angegebenen Auswahlmöglichkeiten zu. Wenn der Benutzer mit der Eingabe der Texte beginnt, werden die Auswahlmöglichkeiten gefiltert, die teilweise mit der Eingabe übereinstimmen. Die Dropdownliste hebt die Eingabezeichen hervor, die der Suche entsprechen.

Die folgende Abbildung zeigt die statische Typaheadsuche:

Die grafische Darstellung veranschaulicht die statische Typheadsuche.

Die dynamische Typahead-Suche ist nützlich, um Daten aus großen Datasets zu durchsuchen und auszuwählen. Die Datasets werden dynamisch aus dem Dataset geladen, das in der Karte-Nutzlast angegeben ist. Die typeahead-Funktion hilft beim Herausfiltern der Auswahl, während der Benutzer eingibt.

Dynamische Typeahead-Suche

Dynamische Typaheadsuche 2

Hinweis

Mit der dynamischen Suche, z. B. abfragebasierten Nachrichtenerweiterungen, können Sie keine umfassenden Karte Funktionen erhalten.

Input.ChoiceSet ist eine der wichtigen Eingabekomponenten in adaptiven Karten. Sie können der Komponente ein Typeahead-Suchsteuerelement hinzufügen, Input.ChoiceSet um die Typeahead-Suche zu implementieren. Sie können die erforderlichen Informationen mit der folgenden Auswahl suchen und auswählen:

  • Dropdownliste, z. B. erweiterte Auswahl.
  • Optionsfeld, z. B. Einzelauswahl.
  • Kontrollkästchen, z. B. Mehrfachauswahl.

Hinweis

  • Das Input.ChoiceSet Steuerelement basiert auf dem Stil und isMultiSelect den Eigenschaften.
  • Um die dynamische Typaheadsuche im Gruppenchat verwenden zu können, muss der Benutzer dem Bereich für die Botinstallation im App-Manifest bereich hinzufügen groupchat und ihn in diesem bestimmten Gruppenchat installieren.
  • Die Anzahl der Optionen in der Dropdownliste ist auf 15 beschränkt.

Schemaeigenschaften

Die folgenden Eigenschaften sind die neuen Ergänzungen des Schemas, um die Input.ChoiceSet Typaheadsuche zu aktivieren:

Eigenschaft Typ Erforderlich Beschreibung
style Compact
Erweitert
Filtered		 Nein Fügt der Liste der unterstützten Überprüfungen für statische Typahead eine gefilterte Formatvorlage hinzu.
choices.data Data.Query Nein Aktiviert dynamische Typahead während der Benutzertypen, indem eine Remoteauswahl aus einem Back-End abgerufen wird.
Wert Zeichenfolge Nein Die anfängliche Auswahl (oder gruppe von Auswahlmöglichkeiten), die ausgewählt werden muss. Geben Sie für mehrfache Auswahl eine durch Trennzeichen getrennte Zeichenfolge mit Werten an.

Data.Query-Definition

Eigenschaft Typ Erforderlich Beschreibung
type Data.Query Ja Gibt an, dass es sich um ein Data.Query-Objekt handelt.
Dataset Zeichenfolge Ja Gibt den Datentyp an, der dynamisch abgerufen wird.
Wert Zeichenfolge Nein Füllt die Aufrufanforderung an den Bot mit der Eingabe auf, die der Benutzer für bereitgestellt hat ChoiceSet.
count Zahl Nein Füllt für die Aufrufanforderung an den Bot auf, um die Anzahl der Elemente anzugeben, die zurückgegeben werden müssen. Der Bot ignoriert sie, wenn die Benutzer eine andere Menge senden möchten.
skip Zahl Nein Füllt die Aufrufanforderung an den Bot auf, um anzugeben, dass Benutzer paginieren und in der Liste fortfahren möchten.

Beispiel

Die Beispielnutzlast, die statische und dynamische Typaheadsuche mit Einzel- und Mehrfachauswahloptionen wie folgt enthält:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "columns": [
        {
          "width": "1",
          "items": [
            {
              "size": null,
              "url": "https://urlp.asm.skype.com/v1/url/content?url=https%3a%2f%2fi.imgur.com%2fhdOYxT8.png",
              "height": "auto",
              "type": "Image"
            }
          ],
          "type": "Column"
        },
        {
          "width": "2",
          "items": [
            {
              "size": "extraLarge",
              "text": "Game Purchase",
              "weight": "bolder",
              "wrap": true,
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "text": "Please fill out the below form to send a game purchase request.",
      "wrap": true,
      "type": "TextBlock"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Game: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "stretch",
          "items": [
            {
              "choices": [
                {
                  "title": "Call of Duty",
                  "value": "call_of_duty"
                },
                {
                  "title": "Death's Door",
                  "value": "deaths_door"
                },
                {
                  "title": "Grand Theft Auto V",
                  "value": "grand_theft"
                },
                {
                  "title": "Minecraft",
                  "value": "minecraft"
                }
              ],
              "style": "filtered",
              "placeholder": "Search for a game",
              "id": "choiceGameSingle",
              "type": "Input.ChoiceSet"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Multi-Game: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "stretch",
          "items": [
            {
              "choices": [
                {
                  "title": "Static Option 1",
                  "value": "static_option_1"
                },
                {
                  "title": "Static Option 2",
                  "value": "static_option_2"
                },
                {
                  "title": "Static Option 3",
                  "value": "static_option_3"
                }
              ],
              "value": "Static_option_2",
              "isMultiSelect": true,
              "style": "filtered",
              "choices.data": {
                "type": "Data.Query",
                "dataset": "xbox"
              },
              "id": "choiceGameMulti",
              "type": "Input.ChoiceSet"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Needed by: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        },
        {
          "width": "stretch",
          "items": [
            {
              "id": "choiceDate",
              "type": "Input.Date"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "text": "Buy and download digital games and content directly from your Xbox console, Windows 10 PC, or at Xbox.com.",
      "wrap": true,
      "type": "TextBlock"
    },
    {
      "text": "Earn points for what you already do on Xbox, then redeem your points on real rewards. Play more, get rewarded. Start earning today.",
      "wrap": true,
      "type": "TextBlock"
    }
  ],
  "actions": [
    {
      "data": {
        "msteams": {
          "type": "invoke",
          "value": {
            "type": "task/submit"
          }
        }
      },
      "title": "Request Purchase",
      "type": "Action.Submit"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2"
}

Codeausschnitte zum Aufrufen von Anforderung und Antwort

Anforderung aufrufen

{
    "name": "application/search",
    "type": "invoke",
    "value": {
        "queryText": "fluentui",
        "queryOptions": {
            "skip": 0,
            "top": 15
        },
        "dataset": "npm"
    },
    "locale": "en-US",
    "localTimezone": "America/Los_Angeles",
    // …. other fields
}

Antwort

protected override async Task<InvokeResponse> OnInvokeActivityAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
{
    if (turnContext.Activity.Name == "application/search")
    {
 var packages = new[] {
   new { title = "A very extensive set of extension methods", value = "FluentAssertions" },
   new { title = "Fluent UI Library", value = "FluentUI" }};

 var searchResponseData = new
 {
     type = "application/vnd.microsoft.search.searchResponse",
     value = new
     {
  results = packages
     }
 };
 var jsonString = JsonConvert.SerializeObject(searchResponseData);
 JObject jsonData = JObject.Parse(jsonString);
 return new InvokeResponse()
 {
     Status = 200,
     Body = jsonData
 };
    }

    return null;
}

Codebeispiel

Beispielname Beschreibung .NET Node.js Manifest
Typeahead-Suchsteuerelement auf adaptiven Karten Das Beispiel zeigt, wie Sie das statische und dynamische Suchsteuerelement für Typaheads in adaptiven Karten verwenden. View View Anzeigen

Siehe auch