Erstellen eines Layouts zum Anpassen von SuchergebnissenCreate a layout to customize search results

Sie können das Ergebnis Layout für eine benutzerdefinierte vertikale mithilfe des Such Layout-Designers entwerfen.You can design the result layout for a custom vertical using the search layout designer. Sie können mit dem Entwurf des Layouts beginnen, indem Sie Vorlagen auswählen, die im Layout-Designer angeboten werden, und diese verwenden, wenn Sie Ihren Anforderungen entsprechen.You can start designing the layout by choosing templates offered in the layout designer and using them if they fit your requirements. Sie können diese Vorlagen auch auf verschiedene Arten bearbeiten, um Ihren Anforderungen zu entsprechen.Or you can choose to edit these templates in various ways to fit your requirements. Beispiel: Hinzufügen/Entfernen von Bildern, Hinzufügen/Entfernen von Text und Ändern von Text.For example, add/remove images, add/remove text, and modify text. Wenn keine der Vorlagen Ihren Anforderungen entspricht, können Sie mit dem Entwerfen Ihres Layouts mit einer leeren Vorlage beginnen.If none of the templates meet your requirements, you can choose to start designing your layout using a blank template.

Nachdem das Layout bereit ist, verwenden Sie die Vorlage Sprache für Adaptive Karten , um ein Ergebnis Layout-JSON zu erstellen, die zum Definieren eines Ergebnistyps verwendet wird.After the layout is ready, use the Adaptive Cards Template language to create a result layout JSON that's used to define a result type. Sie ordnen die Ergebniseigenschaften dem Layout mithilfe des Zuordnungs Schritts im Layout-Designer zu.You map the result properties to the layout using the Mapping step in the layout designer.

Erstellen eines Layouts auf eigene FaustCreate a layout on your own

Das Erstellen eines Layouts auf eigene Faust erfordert Kenntnisse über Adaptive Karten und deren Schema.Creating a layout on your own requires knowledge of adaptive cards and their schema. Das Suchergebnislayout verwendet eine Teilmenge der Elemente, die von adaptiven Karten angeboten werden, und Sie können den Layout-Designer verwenden, um mehr über den unterstützten Satz von Elementen zu erfahren.Search result layout uses a subset of the elements offered by adaptive cards, and you can use the layout designer to learn about the supported set of elements.

Erstellen Sie beim Erstellen Ihres eigenen Layouts das Layout für die Adaptive Karte mithilfe von Daten aus dem Connector, und schließen Sie dann das Layout ab.While creating your own layout, create the adaptive card layout using data from your connector, and then finalize the layout. Es gibt zwei Hauptschritte beim Erstellen Ihres eigenen Layouts:There are two main steps in creating your own layout:

  • Entwerfen Sie das Layout.Design the layout.
  • Trennen Sie die Daten von der Vorlage.Separate the data from the template.

Entwerfen des LayoutsDesign the layout

In diesem Beispiel wird ein Layout mit einer Kopfzeile, einem Link und einem beschreibenden Text angezeigt.In this example, we show a layout with a header, link, and descriptive text.

Beispiel für ein Layout mit Kopfzeile, Link und Beschreibung.

Und hier ist die zugehörige JSON-Datei des Layouts:And here's the layout's associated JSON file:

{
    "type": "AdaptiveCard",
    "version": "1.0",
     "body": [
{

            "type": "ColumnSet",
             "columns": [
                 {
                     "type": "Column",
                     "width": 8,
                     "items": [
                         {
                             "type": "TextBlock",
                             "text": "Contoso Marketing Analysis - Q3 FY18",
                             "color": "Accent",
                             "size": "Medium",
                             "spacing": "None",
                             "$when": "{title != \"\"}",
                             "weight": "Bolder"
                        },
                        {
                        "type": "TextBlock",  
                        "text": "https://contoso.com/hr/link",
                        "spacing": "None",  
                        "color": "Dark",
                        "weight": "Bolder"

                        },

                        {  
                        "type": "TextBlock",
                        "text": "Marketing team at Contoso.., and looking at the Contoso Marketing documents on the team site. This contains the data from FY20 and will taken over to FY21...Marketing Planning is ongoing for FY20..",  
                        "wrap": true,
                        "maxLines": 2,
                        "spacing": "Medium"
                        }
                        ],

                    "horizontalAlignment": "Center",
                    "spacing": "None"

                }

            ]

        }
        ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Trennen der Daten vom LayoutSeparate the data from the layout

Sie können die Daten vom Layout trennen und die Daten binden.You can separate the data from the layout and bind the data.

Hier ist das Layout JSON nach dem Binden der Daten:Here's Layout JSON after binding the data:

{

    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
    {
    "type": "ColumnSet",
"columns": [

                {
                "type": "Column",
                "width": 8,
                "items": [
                {
                "type": "TextBlock",
                "text": "[{title}]({titleUrl})",
                "color": "Accent",
                "size": "Medium",
                "spacing": "None",
                "weight": "Bolder"

                 },
                 {
                 "type": "TextBlock",
                 "text": "{link}",
                 "spacing": "None",
                 "color": "Dark",
                 "weight": "Bolder"
                 },
                 {
                 "type": "TextBlock",
                 "text": "{description}",
                 "wrap": true,
                 "maxLines": 2,
                 "spacing": "Medium"
                 }
                 ],
                 "horizontalAlignment": "Center",
                 "spacing": "None"
                 }
                 ]

        }

    ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Beispieldaten: Geben Sie Beispieldaten im Beispieldaten Editor an, um die datengebundene Karte im Vorschaumodus anzuzeigen.Sample data: Specify sample data in the Sample Data Editor to view the data-bound card when in Preview Mode.

{

    "title": "Contoso Marketing Analysis - Q3 FY18",
    "titleUrl": "https://contoso.com/hr/link",
    "link": "https://contoso.com/hr/link",
    "description": "Marketing team, and looking at the Contoso Marketing documents on the team site. Yo can't see right...Marketing Planning presentation?"

}

Zuordnen des Layouts zu den ErgebniseigenschaftenMap the layout to the result properties

Sie müssen jedes Feld des Layouts einer Result-Eigenschaft oder einer Connector-Eigenschaft zuordnen, um das Ergebnis Layout JSON zu generieren.You must map each field of the layout to a result property or a connector property to generate the result layout JSON.

Bildschirmaufnahme eines Beispiel Layouts auf der Seite des Such Layout-Designers, wobei ein Feld ausgewählt und der Eigenschaftenbereich geöffnet ist.

Wählen Sie ein Feld im Layout aus, um die Variablen hervorzuheben, die zugeordnet werden müssen.Select a field in the layout to highlight the variables that need to be mapped. Sie können mehrere Variablen für ein einzelnes Feld verwenden, und alle Felder müssen den Ergebniseigenschaften zugeordnet werden.You can use multiple variables for a single field, and all fields must be mapped to the result properties.

Ausschnitt im Suchergebnis anzeigenShow snippet on search result

Dynamische Codeausschnitte, die für die Content -Eigenschaft des Connector-Ergebnisses generiert wurden, können im Suchergebnis angezeigt werden.Dynamic snippets generated on the content property of the connector result can be shown on the search result. ResultSnippet ist die Systemeigenschaft, die als Platzhalter Eigenschaft für die für jedes Verbindungs Ergebnis generierten Codeausschnitte fungiert.ResultSnippet is the system property that acts as a placeholder property for the snippets generated for each Connector result. Um die Codeausschnitte im Ergebnis Layout anzuzeigen, muss die ResultSnippet -Systemeigenschaft einem entsprechenden Feld (beispielsweise Description) im Suchergebnislayout zugeordnet werden.To show the snippets on the result layout, the ResultSnippet system property must be mapped to an appropriate field, for example Description, in the search result layout. Ausschnitte, die für jedes Ergebnis generiert werden, heben auch die Übereinstimmungen im Codeausschnitt mit dem vom Benutzer eingegebenen Abfrageausdruck hervor.Snippets generated on each result also highlight the matches in the Snippet with the query term entered by the user.

Zu berücksichtigende AspekteThings to consider

Bevor Sie beginnen, sollten Sie einige Dinge tun, die Sie vermeiden sollten, um sicherzustellen, dass Ihre Layouts erfolgreich sein werden.Before you get started, there are a few things that you should do and a few things you should avoid to ensure that your layouts will be successful.

DosDo

  • Bearbeiten Sie eine Vorlage, um den Link "Logo" im Layout bereitzustellen, wenn Sie statische Links für Logos verwenden und keine Ergebniseigenschaften sind.Edit a template to provide the logo link in the layout if you're using static links for logos and not result properties.
  • Überprüfen Sie das Ergebnis Layout für Szenarien, in denen keine Daten für eine Result-Eigenschaft zurückgegeben werden, die in der Ergebnis-JSON verwendet wird.Validate the result layout for scenarios where no data is returned for a result property used in the result JSON. Verwenden Sie die $when Bedingung, um ein Element auszublenden, wenn die Eigenschaft keine Daten enthält.Use the $when condition to hide an element if the property doesn't contain data.
  • Stellen Sie sicher, dass die Datentypen der $when Bedingung und der Result-Eigenschaft übereinstimmen.Make sure that data types of the $when condition and the result property match. Vergleichen Sie beispielsweise nicht Number mit Text in der $when Bedingung.For example, don't compare Number with Text in the $when condition.
  • Denken Sie an Designanforderungen beim Entwerfen eines Ergebnis Layouts.Think of theme requirements when designing a result layout.
  • Stellen Sie sicher, dass das Textblock   Element dynamischen Inhalt verarbeiten kann.Make sure that the Textblock element can handle dynamic content. wrapFür diesen Zweck können Sie die Eigenschaften und des- maxLines Elements verwenden.You can use the wrap and maxLines element properties for this purpose.
  • Formatieren Sie das Datum ordnungsgemäß, wenn Sie {DATE()} in Abschlag verwenden.Properly format the date when using {DATE()} in Markdown.

Don’tsDon't

  • Definieren Sie beim Binden von Werten keine ungültigen Datentypen.Don't define invalid data types when binding values. Weitere Informationen zu Datentypen finden Sie unter Verwalten des Suchschemas.For more information about data types, see Manage the Search schema.
  • Vermeiden Sie das Zuschneiden des Ergebnisses auf der Ergebnisseite, indem Sie der maximalen Höhe des Ergebnis Layouts JSON folgen.Avoid cropping the result on the result page by following the maximum height of the result layout JSON. Wenn Sie die maximale Höhe des Ergebnis Layouts überschreiten, wird das Ergebnis auf der Ergebnisseite abgeschnitten.If you exceed the maximum height of the result layout, the result will be cropped on the result page.
  • Verwenden Sie keine px Werte in Elementeigenschaften.Don't use px values in element properties.
  • Verwenden Sie keinen Abschlag mit der ResultSnippet -Eigenschaft im Ergebnis Layout, um die Abfrage Übereinstimmung im Suchergebnis hervorzuheben.Don't use markdown with the ResultSnippet property in the result layout to highlight query match in the search result.

RessourcenResources

Anpassen der SuchergebnisseiteCustomize search result page

Adaptive KartenAdaptive cards

Vorlagensprache für Adaptive KartenAdaptive Cards Template language

Adaptives Karten SchemaAdaptive card schema