Usar a API do Microsoft Pesquisa para gerenciar modelos de layout para obter resultados de pesquisa
Você pode usar a API do Microsoft Pesquisa no Microsoft Graph para gerenciar modelos de layout para obter resultados de pesquisa. Um layout de exibição de pesquisa ou tipo de resultado é uma regra que faz com que tipos distintos de resultados de pesquisa sejam exibidos de diferentes maneiras nas páginas de resultados da pesquisa. Ele consiste no seguinte:
- Uma ou mais características ou condições para comparar cada resultado da pesquisa, como a origem do resultado ou o tipo de conteúdo do resultado da pesquisa.
- O modelo de exibição pesquisa os resultados que atendem às condições. O modelo de exibição controla a forma que os resultados que correspondem às condições serão exibidos e se comportarão na página dos resultados da pesquisa.
A API Pesquisa do Microsoft Graph fornece uma resposta renderizável com base em Cartões Adaptáveis. Usando o modelo de Cartão Adaptável, os clientes podem renderizar diferentes resultados de pesquisa em telas diferentes.
Os clientes podem personalizar o tipo de resultado da pesquisa no Centro de administração do Microsoft 365.
Exemplo de solicitação
O exemplo a seguir mostra como obter os layouts de exibição ou modelos de resultado para renderizar os resultados da pesquisa definindo a propriedade enableResultTemplate para true no contrato de solicitação.
A resposta mostra três acertos de pesquisa, dois deles relacionados, com o resultadoTemplateId 1603900360618_5XCBK2OXG e o outro com o resultadoTemplateId 1603900360618_5XCBK2OXP. Essas IDs correspondem a uma das chaves dos dois layouts de exibição contidos no dicionário resultTemplates incluído no contrato de resposta. Usando as IDs do modelo de resultado, você pode determinar qual layout de exibição usar para renderizar cada resultado da pesquisa.
Solicitação
POST https://graph.microsoft.com/v1.0/search/query
Content-Type: application/json
{
"requests": [
{
"entityTypes": [
"externalItem"
],
"contentSources": [
"Connectors"
],
"query": {
"queryString": "*"
},
"resultTemplateOptions": {
"enableResultTemplate": true
}
}
]
}
Resposta
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"
}
}
}
}
]
}
Exemplo de componente Web
O exemplo a seguir mostra como usar a templating do Cartão Adaptável para renderizar os resultados da pesquisa.
Importante
Este exemplo usa uma versão de templating de Cartão Adaptável anterior à versão de maio de 2020. Para saber mais, consulte:
<!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>