Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Les cartes adaptatives peuvent être formatées pour agir comme un carrousel, dans lequel les utilisateurs peuvent parcourir les messages de manière interactive. Les utilisateurs interagissent avec un carrousel en sélectionnant des flèches, qui leur permettent de faire défiler plusieurs choix.
Les carrousels sont utiles dans les scénarios où les options de menu sont longues et nécessitent une phrase complète ou un court paragraphe pour que l’utilisateur comprenne parfaitement les options disponibles.
Dans l’exemple suivant, vous créez un carrousel pour présenter vos produits aux clients sur le site web Contoso. Le carrousel aide les clients à sélectionner le produit qu’ils trouvent le plus intéressant, dans le cadre du flux de conversation.
Note
Les icônes et les descriptions sont à des fins de démonstration. Vous pouvez copier et réviser les exemples de code pour votre propre scénario.
Créer un carrousel à l’aide d’une carte adaptative
Cet exemple utilise un tableau de données JSON d’entrée comme variable de chaîne pour simplifier le flux de conversation. Il utilise également des exemples d’URL pour afficher les icônes de produit et les représentations SVG pour les flèches gauche et droite. Vous pouvez référencer n’importe quelle combinaison de fichiers SVG ou d’URL pour les médias. Pour de meilleurs résultats lors du référencement d’un média, stockez-le dans un emplacement statique et non authentifié.
Dans Copilot Studio, créez une rubrique et appelez-la « Créer un carrousel », par exemple.
Utilisez les mots « carrousel » et « créer un carrousel » pour les phrases déclencheur.
Sélectionnez l’icône Ajouter un nœud
sous le nœud Déclencheur, sélectionnez Gestion des variables, puis sélectionnez Définir une valeur de variable.Créez une variable nommée
DataJSON. Cette variable est une chaîne et contient la représentation JSON de la carte adaptative.Copiez et collez le bloc de code DataJSON dans le champ Valeur de fin du nouveau nœud.
Pour transformer le tableau JSON en carte adaptative, vous devez analyser le bloc de code.
Sélectionnez l’icône Ajouter un nœud
sous le nœud Définir la valeur de la variable, sélectionnez Gestion des variables, puis Analyser la valeur. Ce nœud permet d’analyser la variable du nœud précédent.Pour Analyser la valeur, sélectionnez la variable du nœud précédent, DataJSON, dans cet exemple.
Pour le Type de données :
Sélectionnez À partir des exemples de données, puis sélectionnez Obtenir le schéma à partir de l’exemple JSON.
Dans l’éditeur qui s’ouvre, collez le bloc de code DataJSON et sélectionnez Confirmer.
Sinon, si vous disposez déjà du schéma souhaité pour la table :
Sélectionnez Table et sélectionnez Modifier le schéma.
Dans l’éditeur qui s’ouvre, collez votre schéma et sélectionnez Confirmer.
Dans cet exemple, le schéma approprié serait :
kind: Table properties: description: String icon: String linklabel: String linkurl: String name: String
Pour Enregistrer sous, créez une autre variable personnalisée. Cette variable est une table nommée
DataTable. Il conserve les résultats analysés en tant qu’enregistrement.
Créez une table indexée à utiliser par la carte adaptative :
Sélectionnez l’icône Ajouter un nœud
sous le nœud Analyser la valeur et ajoutez un autre nœud Définir une valeur de variable.Créez une variable et nommez-la
DataTableWithIndex.Pour Valeur de fin, entrez la formule suivante :
ForAll( Sequence( CountRows(Topic.DataTable) ), { ItemNumber: Value, Name: Index(Topic.DataTable, Value).name, Description: Index(Topic.DataTable, Value).description, ImageURL: Index(Topic.DataTable, Value).icon, URL: Index(Topic.DataTable, Value).linkurl, Label: Index(Topic.DataTable, Value).linklabel } )Cette formule crée un tableau JSON pour l’affichage de chaque fenêtre du carrousel. La fonction Sequence ajoute un index pour fournir des ID individuels prévisibles pour chaque enregistrement. Les flèches précédente et suivante du carrousel affichent l’enregistrement souhaité, en fonction de cet index.
Ajoutez un nœud Message avec une carte adaptative en bas des nœuds de la rubrique :
Sélectionnez l’icône Ajouter un nœud
sous le dernier nœud et sélectionnez Envoyer un message.Dans la barre de menu du nœud, sélectionnez Ajouter, puis Carte adaptative.
Dans le volet Propriétés de la carte adaptative, passez à Formule et remplacez le contenu par défaut par la Formule de la carte adaptative.
Enregistrez votre rubrique et testez-la.
Bloc de code DataJSON
Dans le bloc de code JSON suivant, il y a des clés répétées : icon, name, description, linkurl et linklabel. Ces clés représentent des points de navigation dans la carte.
- icon : lien vers l’icône à afficher à gauche de la fenêtre du carrousel.
- name : étiquette du nom du produit, non affichée sur la carte adaptative.
- description : description du produit.
- linkurl : Lien hypertexte associé au produit ou à la sélection.
- linklabel : texte à afficher au-dessus du lien hypertexte.
L’exemple de carte est un carrousel de cinq produits. Si votre scénario nécessite un carrousel avec plus de cinq éléments (ou moins de cinq), copiez et collez (ou supprimez) des éléments de ce bloc de code si nécessaire.
[{
"icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-14.jpg",
"name": "Productum 1",
"description": "Hard drive est dispositivum electromechanicum quod data retinet in forma magnetica vel optica. Haec data accessibilis est ad operandum systema computatorum.",
"linkurl": "http://www.microsoft.com/",
"linklabel": "Learn More"
}, {
"icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-13.jpg",
"name": "Productum 2",
"description": "Sellam infantium describere possumus quae te monere potest si infans in sella sedet et tu non es in proximo. Sellae haec est instructa sensoribus qui monent te per telephonum tuum mobilum si infans in sella manet et tu non es in loco.",
"linkurl": "http://www.microsoft.com/",
"linklabel": "Learn More"
}, {
"icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-12.jpg",
"name": "Productum 3",
"description": "Pluteus librorum est structura lignea vel metallica quae libros et alia volumina continet. Altitudine non amplius quam decem pedes, pluteus potest habere plures gradus vel tabulas ad libros exponendos. Hoc loco maximam aesthetiam et ordinem litterarum praestat.",
"linkurl": "http://www.microsoft.com/",
"linklabel": "Learn More"
}, {
"icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-11.jpg",
"name": "Productum 4",
"description": "Servitium conficiendi et transmittendi tortarum ad nuptias, quae formas et delicias unicas offert, sub vices quam viginti quinque verbis descriptum.",
"linkurl": "http://www.microsoft.com/",
"linklabel": "Learn More"
}, {
"icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-10.jpg",
"name": "Productum 5",
"description": "Bot GPT in correctione textus praecellit, grammaticam scrutans, errores corrigens, et textum meliorem reddens, sub vices quam viginti quinque verbis.",
"linkurl": "http://www.microsoft.com/",
"linklabel": "Learn More"
}
]
Formule de carte adaptative
Le bloc de code suivant définit la formule d’une carte adaptative de type carrousel :
{
type: "AdaptiveCard",
'$schema': "http://adaptivecards.io/schemas/adaptive-card.json",
version: "1.5",
body: ForAll(Topic.DataTableWithIndex,
{
type: "Container",
items: [
{
type: "ColumnSet",
columns: [
{
type: "Column",
width: "auto",
items: [
{
type: "Image",
url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.2801%2016.5307L12.3527%2016.4466C12.5706%2016.153%2012.5464%2015.7363%2012.2801%2015.47L9.56078%2012.7507L16.2505%2012.7504L16.3523%2012.7435C16.7183%2012.6939%2017.0005%2012.3801%2017.0005%2012.0004L16.9936%2011.8986C16.944%2011.5325%2016.6302%2011.2504%2016.2505%2011.2504L9.55878%2011.2507L12.2807%208.52997L12.3534%208.44587C12.5713%208.1523%2012.5471%207.73563%2012.2809%207.46931C11.9881%207.17637%2011.5132%207.17628%2011.2203%207.46911L7.21873%2011.4691L7.14609%2011.5532C6.92816%2011.8468%206.95233%2012.2636%207.21863%2012.5299L11.2195%2016.5307L11.3036%2016.6033C11.5972%2016.8212%2012.0138%2016.797%2012.2801%2016.5307ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2020.5C7.30558%2020.5%203.5%2016.6944%203.5%2012C3.5%207.30558%207.30558%203.5%2012%203.5C16.6944%203.5%2020.5%207.30558%2020.5%2012C20.5%2016.6944%2016.6944%2020.5%2012%2020.5Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
}
],
selectAction: {
type: "Action.ToggleVisibility",
title: "Preview",
targetElements: [
"card" & If(ItemNumber = 1, Last(Topic.DataTableWithIndex).ItemNumber, ItemNumber - 1),
"card" & ItemNumber
]
}
},
{
type: "Column",
width: "stretch",
items: [
{
type: "Container",
items: [
{
type: "ColumnSet",
columns: [
{
type: "Column",
width: "auto",
items: [
{
type: "Image",
url: ImageURL,
size: "Small"
}
]
},
{
type: "Column",
width: "stretch",
items: [
{
type: "TextBlock",
text: Description,
wrap: true,
size: "Small"
}
]
}
]
}
]
},
{
type: "ActionSet",
actions: [
{
type: "Action.OpenUrl",
title: Label,
url: URL
}
]
}
]
},
{
type: "Column",
width: "auto",
items: [
{
type: "Image",
url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.001%202C17.5238%202%2022.001%206.47715%2022.001%2012C22.001%2017.5228%2017.5238%2022%2012.001%2022C6.47813%2022%202.00098%2017.5228%202.00098%2012C2.00098%206.47715%206.47813%202%2012.001%202ZM12.001%203.5C7.30656%203.5%203.50098%207.30558%203.50098%2012C3.50098%2016.6944%207.30656%2020.5%2012.001%2020.5C16.6954%2020.5%2020.501%2016.6944%2020.501%2012C20.501%207.30558%2016.6954%203.5%2012.001%203.5ZM11.648%207.55308L11.7206%207.46897C11.9869%207.2027%2012.4036%207.17849%2012.6972%207.39635L12.7813%207.46897L16.7821%2011.4698C17.0484%2011.7361%2017.0726%2012.1528%2016.8547%2012.4464L16.782%2012.5306L12.7805%2016.5306C12.4876%2016.8234%2012.0127%2016.8233%2011.7198%2016.5303C11.4536%2016.264%2011.4295%2015.8474%2011.6474%2015.5538L11.72%2015.4697L14.442%2012.749L7.75027%2012.7493C7.37058%2012.7493%207.05678%2012.4671%207.00712%2012.1011L7.00027%2011.9993C7.00027%2011.6196%207.28243%2011.3058%207.6485%2011.2561L7.75027%2011.2493L14.44%2011.249L11.7206%208.52963C11.4544%208.26336%2011.4302%207.8467%2011.648%207.55308L11.7206%207.46897L11.648%207.55308Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
}
],
selectAction: {
type: "Action.ToggleVisibility",
title: "Next",
targetElements: [
"card" & ItemNumber,
"card" & If(ItemNumber = Last(Topic.DataTableWithIndex).ItemNumber, 1, ItemNumber + 1)
]
}
}
]
}
],
minHeight: "1px",
spacing: "None",
id: "card" & ItemNumber,
bleed: true,
isVisible: If(ItemNumber = 1, true, false)
}
)
}