Visualizzare una scheda adattiva in Copilot Studio

Articolo
09/27/2024

Nota

Questo articolo si applica solo ai chatbot classici . Per estendere i copiloti creati in Copilot Studio, non è necessario utilizzare Bot Framework Composer. Tutte le funzionalità descritte in questo articolo sono disponibili per i copiloti, direttamente in Copilot Studio.

Migliora il tuo bot sviluppando finestre di dialogo personalizzate con Bot Framework Composer e poi aggiungile al tuo bot Microsoft Copilot Studio.

In questo esempio imparerai come mostrare una scheda adattiva in Microsoft Copilot Studio utilizzando Composer.

Importante

L'integrazione di Composer non è disponibile per gli utenti che hanno solo la licenza licenza Microsoft Copilot Studio per Teams. Devi avere una licenza Microsoft Copilot Studio di valutazione o completa.

Prerequisiti

Crea un nuovo argomento

In Microsoft Copilot Studio, crea un nuovo bot chiamato Contoso Meal Delivery Service.
Vai alla pagina Argomenti e crea un nuovo argomento chiamato Meal delivery options.

Copia e incolla le seguenti frasi trigger:

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

Nell'area del contenuto, seleziona il nodo predefinito Messaggio. Seleziona i tre punti verticali, quindi seleziona Elimina.
Nel nodo Frasi trigger, seleziona Aggiungi nodo (+) quindi seleziona Fai una domanda. Quindi nel nodo Domanda:
1. Per Fai una domanda, inserisci What city are you in?.
2. Per Identifica, seleziona Città.
In Salva risposta con nome, seleziona la variabile creata automaticamente. Quindi nel riquadro delle proprietà delle variabili:
1. Per Nome inserisci user_city.
2. Per Utilizzo, seleziona Bot (qualsiasi argomento può accedere).
Seleziona Salva.

Variabile di Microsoft Copilot Studio.

Creare una scheda adattiva

Successivamente, visualizzerai le immagini della scelta dei pasti disponibili nella città dell'utente utilizzando Composer.

Apri il tuo bot in Composer. Per istruzioni su come procedere, vedi Introduzione a Bot Framework Composer.
Vai alla pagina Crea. Nel tuo bot, seleziona Altre opzioni (...) quindi seleziona + Aggiungi una finestra di dialogo.
Per Nome, inserisci Meals, quindi seleziona OK.
Passa alla pagina Risposte bot. In Esplora bot, seleziona Pasti, quindi seleziona Mostra codice.

Nella vista del codice, copia e incolla la seguente risposta del bot. Quindi sostituisci i tre URL immagine di esempio con il tuo.

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

Scheda Risposte bot di Composer con stringhe.

Copia e incolla il codice seguente nella stessa vista codice per aggiungere una scheda adattiva che mostra tre immagini.

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Scheda Risposte bot di Composer - Codice JSON scheda adattiva.

Copia e incolla il codice seguente nella stessa vista codice per aggiungere un'attività che visualizzerà la scheda adattiva.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

Visualizza la scheda adattiva

Vai alla pagina Crea. In Esplora bot, seleziona la finestra di dialogo Pasti, quindi seleziona il trigger BeginDialog.
Nell'area del contenuto, seleziona Aggiungi (+) quindi seleziona Invia una risposta.
Seleziona il nuovo nodo Invia una risposta per aprire il riquadro delle proprietà. Sotto Risposte del bot, seleziona Mostra codice per passare all'editor di codice.

Avviso

Aggiungendo l'espressione nel passaggio successivo all'editor di risposta al posto dell'editor di codice farà sì che il bot risponda con JSON non elaborato invece di una scheda adattiva.
Copia e incolla l'espressione seguente nell'editor del codice.
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Le variabili globali Microsoft Copilot Studio sono accessibili in Composer utilizzando l'ambito virtualagent. Questo ambito non verrà visualizzato nel menu di riferimento delle proprietà di Composer, ma è possibile accedervi immettendo direttamente un'espressione.

In questo esempio, ${virtualagent.user_city} farà riferimento alla user_city variabile globale che è stata creata nel bot di Microsoft Copilot Studio.

Pubblica il tuo contenuto

Pubblica i tuoi contenuti Composer per renderli disponibili nel tuo Microsoft Copilot Studio bot.

Importante

La selezione di Pubblica in Composer rende disponibili le modifiche per il test, ma non pubblica automaticamente il bot.

Pubblica il tuo bot in Microsoft Copilot Studio per aggiornare il tuo bot su tutti i canali a cui è collegato.
Vai alla pagina Argomenti di Microsoft Copilot Studio per vedere il nuovo argomento Pasti.
Apri l'argomento Opzioni di consegna pasti.
Nel nodo Domanda, seleziona Aggiungi nodo (+). Seleziona Reindirizzare a un altro argomento, quindi scegli Pasti.
Seleziona Salva per salvare le modifiche all'argomento.

Prova il tuo bot

Per testare le tue modifiche in Microsoft Copilot Studio, apri il riquadro Test del bot e assicurati che Tieni traccia tra argomenti sia attivato. Inserisci il messaggio What meals do you deliver? per iniziare la conversazione.

Il tuo bot attiverà l'argomento Opzioni di consegna dei pasti, che chiede all'utente la sua città attuale. Quindi il bot ti reindirizzerà alla finestra di dialogo Composer Pasti per visualizzare una scheda adattiva.

Test dell'esempio 1 di Microsoft Copilot Studio.

Passaggio successivo

Visualizza un elenco di opzioni a selezione multipla Copilot Studio.

Condividi tramite