Utiliser l’API Microsoft Recherche pour gérer les modèles de disposition pour les résultats de recherche
Vous pouvez utiliser l’API Microsoft Recherche dans Microsoft Graph pour gérer les modèles de disposition des résultats de recherche. Une disposition d’affichage de recherche ou un type de résultat est une règle qui entraîne l’affichage de différents types de résultats de recherche dans les pages de résultats de recherche. Il se compose des éléments suivants :
- Une ou plusieurs caractéristiques ou conditions pour comparer chaque résultat de recherche, telles que la source du résultat ou le type de contenu du résultat de recherche.
- Un modèle d'affichage à utiliser pour les résultats de recherche qui répondent aux conditions. Le modèle d'affichage contrôle la façon dont tous les résultats qui répondent aux conditions apparaissent et se comportent sur une page de résultats de recherche.
L’API Microsoft Graph Recherche fournit une réponse restaurable basée sur des cartes adaptatives. En utilisant le modèle carte adaptative, les clients peuvent afficher différents résultats de recherche dans différents canevas.
Les clients peuvent personnaliser leur type de résultat de recherche dans le Centre d'administration Microsoft 365.
Exemple de requête
L’exemple suivant montre comment obtenir les dispositions d’affichage ou les modèles de résultats pour le rendu des résultats de la recherche en définissant la propriété trueenableResultTemplate sur dans le contrat de demande.
La réponse affiche trois résultats de recherche, dont deux sont liés, avec l'1603900360618_5XCBK2OXG resultTemplateId et l’autre avec l'1603900360618_5XCBK2OXP resultTemplateId . Ces ID correspondent à l’une des clés des deux dispositions d’affichage contenues dans le dictionnaire resultTemplates inclus dans le contrat de réponse. À l’aide des ID de modèle de résultat, vous pouvez déterminer la disposition d’affichage à utiliser pour afficher chaque résultat de recherche.
Demande
POST https://graph.microsoft.com/v1.0/search/query
Content-Type: application/json
{
"requests": [
{
"entityTypes": [
"externalItem"
],
"contentSources": [
"Connectors"
],
"query": {
"queryString": "*"
},
"resultTemplateOptions": {
"enableResultTemplate": true
}
}
]
}
Réponse
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"
}
}
}
}
]
}
Exemple de composant web
L’exemple suivant montre comment utiliser la création de modèles de carte adaptative pour afficher les résultats de la recherche.
Importante
Cet exemple utilise une version de la création de modèles de carte adaptative antérieure à la version de mai 2020. Si vous souhaitez en savoir plus, veuillez consulter les rubriques suivantes :
<!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>