Uso de la API de Microsoft Búsqueda para administrar plantillas de diseño para los resultados de búsqueda
Puede usar microsoft Búsqueda API en Microsoft Graph para administrar plantillas de diseño para los resultados de búsqueda. Un tipo de resultado o diseño de presentación de búsqueda es una regla que hace que distintos tipos de resultados de búsqueda se muestren de diferentes maneras en las páginas de resultados de búsqueda. Consta de lo siguiente:
- Una o varias características o condiciones con las que comparar cada resultado de búsqueda, como el origen de resultados o el tipo de contenido del resultado de la búsqueda.
- Una plantilla de visualización que se usa en los resultados de búsqueda que reúnen las condiciones en cuestión. La plantilla de visualización controla el modo en que todos los resultados que reúnen las condiciones van a aparecer y comportarse en una página de resultados de búsqueda.
Microsoft Graph Búsqueda API proporciona una respuesta representable basada en tarjetas adaptables. Mediante la plantilla Tarjeta adaptable, los clientes pueden representar diferentes resultados de búsqueda en distintos lienzos.
Los clientes pueden personalizar su tipo de resultado de búsqueda en el Centro de administración de Microsoft 365.
Ejemplo de solicitud
En el ejemplo siguiente se muestra cómo obtener los diseños de presentación o las plantillas de resultado para representar los resultados de la búsqueda estableciendo la propiedad trueenableResultTemplate en en el contrato de solicitud.
La respuesta muestra tres aciertos de búsqueda, dos de ellos relacionados, con el 1603900360618_5XCBK2OXG resultTemplateId y el otro con el resultTemplateId 1603900360618_5XCBK2OXP. Estos identificadores coinciden con una de las claves de los dos diseños de presentación contenidos en el diccionario resultTemplates que se incluye en el contrato de respuesta. Con los identificadores de plantilla de resultado, puede determinar qué diseño de pantalla se va a usar para representar cada resultado de búsqueda.
Solicitud
POST https://graph.microsoft.com/v1.0/search/query
Content-Type: application/json
{
"requests": [
{
"entityTypes": [
"externalItem"
],
"contentSources": [
"Connectors"
],
"query": {
"queryString": "*"
},
"resultTemplateOptions": {
"enableResultTemplate": true
}
}
]
}
Respuesta
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"
}
}
}
}
]
}
Ejemplo de componente web
En el ejemplo siguiente se muestra cómo usar plantillas de tarjeta adaptable para representar los resultados de la búsqueda.
Importante
En este ejemplo se usa una versión de plantillas de tarjeta adaptable anterior a la versión de mayo de 2020. Para más detalles, vea:
<!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>