Verwenden der Microsoft Search-API zum Verwalten von Layoutvorlagen für Suchergebnisse
Sie können die Microsoft Search-API in Microsoft Graph verwenden, um Layoutvorlagen für Suchergebnisse zu verwalten. Ein Suchanzeigelayout oder -ergebnistyp ist eine Regel, die bewirkt, dass unterschiedliche Arten von Suchergebnissen auf Suchergebnisseiten auf unterschiedliche Weise angezeigt werden. Ein Ergebnistyp hat folgende Bestandteile:
- Ein oder mehrere Merkmale oder Bedingungen, mit denen jedes Suchergebnis verglichen werden soll, z. B. die Ergebnisquelle oder der Inhaltstyp des Suchergebnisses.
- Eine Anzeigevorlage für Suchergebnisse, die die Bedingungen erfüllen. Die Anzeigevorlage steuert, wie alle Ergebnisse, die die Bedingungen erfüllen auf einer Suchergebnisseite angezeigt werden und sich verhalten.
Die Microsoft Graph-Search-API bietet eine renderbare Antwort basierend auf adaptiven Karten. Mithilfe der Vorlage adaptive Karte können Clients unterschiedliche Suchergebnisse in verschiedenen Canvass rendern.
Kunden können ihren Suchergebnistyp im Microsoft 365 Admin Center anpassen.
Anforderungsbeispiel
Das folgende Beispiel zeigt, wie Sie die Anzeigelayouts oder Ergebnisvorlagen zum Rendern der Suchergebnisse abrufen, indem Sie die enableResultTemplate-Eigenschaft im Anforderungsvertrag auf true festlegen.
Die Antwort zeigt drei Suchtreffer an, von denen zwei in Beziehung stehen, wobei die resultTemplateId 1603900360618_5XCBK2OXG und der andere mit der resultTemplateId 1603900360618_5XCBK2OXP. Diese IDs stimmen mit einem der Schlüssel der beiden Anzeigelayouts überein, die im resultTemplates-Wörterbuch enthalten sind, das im Antwortvertrag enthalten ist. Mithilfe der Ergebnisvorlagen-IDs können Sie bestimmen, welches Anzeigelayout zum Rendern der einzelnen Suchergebnisse verwendet werden soll.
Anforderung
POST https://graph.microsoft.com/v1.0/search/query
Content-Type: application/json
{
"requests": [
{
"entityTypes": [
"externalItem"
],
"contentSources": [
"Connectors"
],
"query": {
"queryString": "*"
},
"resultTemplateOptions": {
"enableResultTemplate": true
}
}
]
}
Antwort
HTTP/1.1 200 OK
Content-type: application/json
{
"@odata.context": "https://graph.microsoft.com/v1.0/$metadata#Collection(microsoft.graph.searchResponse)",
"value": [
{
"searchTerms": [],
"hitsContainers": [
{
"total": 1201701,
"moreResultsAvailable": true,
"hits": [
{
"hitId": "85437765-b430-434f-a945-38eceead5b93",
"rank": 1,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXG",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17397",
"Title": "[SM00186] Number of tests - Liquid",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
},
{
"hitId": "85437765-5430-434f-a945-38eceead5b94",
"rank": 2,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXP",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17398",
"Title": "[SM00186] Number of tests - Liquid 2",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
},
{
"hitId": "85437765-b430-434f-a945-38eceead5b95",
"rank": 3,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXG",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17399",
"Title": "[SM00186] Number of tests - Liquid 3",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
}
]
}
],
"resultTemplates": {
"1603900360618_5XCBK2OXG": {
"displayName": "Liquid-3",
"body": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://searchuxcdn.azureedge.net/designerapp/images/LiquidLogo.png",
"horizontalAlignment": "Center",
"size": "Small"
}
],
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "[{Title}]({URL})",
"weight": "Bolder",
"color": "Accent",
"size": "Medium",
"maxLines": 3
},
{
"type": "TextBlock",
"text": "{ResultSnippet}",
"maxLines": 3,
"wrap": true
}
],
"spacing": "Medium"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
"1603900360618_5XCBK2OXP": {
"displayName": "Liquid-2",
"body": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://searchuxcdn.azureedge.net/designerapp/images/LiquidLogo.png",
"horizontalAlignment": "Center",
"size": "Small"
}
],
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "[{Title}]({URL})",
"weight": "Bolder",
"color": "Accent",
"size": "Medium",
"maxLines": 3
},
{
"type": "TextBlock",
"text": "{ResultSnippet}",
"maxLines": 3,
"wrap": true
}
],
"spacing": "Medium"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
}
}
]
}
Webkomponentenbeispiel
Das folgende Beispiel zeigt, wie Sie Vorlagen für adaptive Karten verwenden, um Suchergebnisse zu rendern.
Wichtig
In diesem Beispiel wird eine Version von Vorlagen für adaptive Karten verwendet, die vor dem Release vom Mai 2020 liegt. Weitere Details finden Sie unter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adaptive Cards Example</title>
<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.js"></script>
<script src="https://unpkg.com/adaptivecards/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptivecards-templating@0.1.0-alpha1/dist/adaptivecards-templating.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style type="text/css">
#exampleDiv {
border: solid 1px black;
}
</style>
<script type="text/javascript">
function renderCard() {
var mockdata = this.getMockData();
var renderTemplates = [];
// Convert object to map
var templateDictionary = new Map(Object.entries( mockdata.value[0].resultTemplates));
for (let hit of mockdata.value[0].hitsContainers[0].hits) {
renderTemplates.push(this.renderACT(hit, templateDictionary));
}
for(let template of renderTemplates){
document.getElementById('exampleDiv').appendChild(template);
}
}
function renderACT(hit, templateDictionary) {
var templateId = hit.resultTemplateId;
// Define a template payload
var templatePayload = templateDictionary.get(templateId).body;
var template = new ACData.Template(templatePayload);
// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload
console.log(hit.resource);
// Create a data binding context, and set its $root property to the
// data object to bind the template to
var context = new ACData.EvaluationContext();
context.$root = hit.resource;
console.log(context);
var card = template.expand(context);
// OPTIONAL: Render the card (requires that the adaptivecards library be loaded)
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(card);
return adaptiveCard.render();
}
function getMockData() {
return {
"@odata.context": "https://graph.microsoft.com/v1.0/$metadata#Collection(microsoft.graph.searchResponse)",
"value": [
{
"searchTerms": [],
"hitsContainers": [
{
"total": 1201701,
"moreResultsAvailable": true,
"hits": [
{
"hitId": "85437765-b430-434f-a945-38eceead5b93",
"rank": 1,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXG",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17397",
"Title": "[SM00186] Number of tests - Liquid",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
},
{
"hitId": "85437765-5430-434f-a945-38eceead5b94",
"rank": 2,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXP",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17398",
"Title": "[SM00186] Number of tests - Liquid 2",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
},
{
"hitId": "85437765-b430-434f-a945-38eceead5b95",
"rank": 3,
"summary": "",
"resultTemplateId": "1603900360618_5XCBK2OXG",
"resource": {
"@odata.type": "#microsoft.graph.externalConnectors.externalItem",
"id": "B5B6E9C7-152C-4478-BCCB-CEF053F17399",
"Title": "[SM00186] Number of tests - Liquid 3",
"URL": "https://liquid.microsoft.com/Web/Object/Read/scanningtoolwarnings/Requirements/CodeQL.SM00186"
}
}
]
}
],
"resultTemplates": {
"1603900360618_5XCBK2OXG": {
"displayName": "Liquid-3",
"body": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://searchuxcdn.azureedge.net/designerapp/images/LiquidLogo.png",
"horizontalAlignment": "Center",
"size": "Small"
}
],
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "[{Title}]({URL})",
"weight": "Bolder",
"color": "Accent",
"size": "Medium",
"maxLines": 3
},
{
"type": "TextBlock",
"text": "{ResultSnippet}",
"maxLines": 3,
"wrap": true
}
],
"spacing": "Medium"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
"1603900360618_5XCBK2OXP": {
"displayName": "Liquid-2",
"body": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://searchuxcdn.azureedge.net/designerapp/images/LiquidLogo.png",
"horizontalAlignment": "Center",
"size": "Small"
}
],
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "[{Title}]({URL})",
"weight": "Bolder",
"color": "Accent",
"size": "Medium",
"maxLines": 3
},
{
"type": "TextBlock",
"text": "{ResultSnippet}",
"maxLines": 3,
"wrap": true
}
],
"spacing": "Medium"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
}
}
]
}
}
</script>
</head>
<body onload="renderCard()">
<h1>Adaptive Cards Data Binding Example</h1>
<div id="exampleDiv"></div>
</body>
</html>