Vis et dynamisk kort i Copilot Studio

Artikkel
09/27/2024

Merk

Denne artikkelen gjelder bare for klassiske chatroboter . Hvis du vil utvide copiloter som er opprettet i Copilot Studio, trenger du ikke å bruke Bot Framework Composer. Alle funksjonene som er beskrevet i denne artikkelen, er tilgjengelige for copiloter, direkte inn Copilot Studio.

Forbedre roboten ved å utvikle egendefinerte dialoger med Bot Framework Composer, og deretter legge dem til i Microsoft Copilot Studio-roboter.

I dette eksemplet lærer du hvordan du viser et dynamisk kort i Microsoft Copilot Studio ved hjelp av Composer.

Viktig

Composer-integrering er ikke tilgjengelig for brukere som bare har Teams Microsoft Copilot Studio-lisens. Du må ha en prøveversjonslisens eller en fullstendig Microsoft Copilot Studio-lisens.

Forutsetning

Opprett et nytt emne

I Microsoft Copilot Studio oppretter du en ny robot kalt Contoso Meal Delivery Service.
Gå til Emner-siden, og opprett et nytt emne kalt Meal delivery options.

Kopier og lim inn følgende utløseruttrykk:

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

I Redigering av lerret velger du standard Melding-node. Velg de tre loddrette prikkene, og velg deretter Slett.
Under Utløseruttrykk-noden velger du Legg til node (+), og deretter velger du Still et spørsmål. Deretter, i Spørsmål-noden:
1. For Still et spørsmål, angi What city are you in?.
2. For Identifiser velg By.
I Lagre svar som velger du den automatisk opprettede variabelen. Deretter, i ruten Egenskaper for variabel:
1. For Navn angir du user_city.
2. For Bruk velger du Robot (alle emner har tilgang).
Velg Lagre.

Microsoft Copilot Studio-variabel.

Opprett et dynamisk kort

Deretter viser du bilder for matvalg som er tilgjengelige i brukerens by ved hjelp av Composer.

Åpne roboten i Composer. Hvis du vil ha instruksjoner om hvordan du gjør dette, kan du se Komme i gang med Bot Framework Composer.
Gå til Opprett-siden. I roboten velger du Flere alternativer (...) og velger + Legg til dialog.
For Navn angi Meals og deretter OK.
Gå til Robotsvar-siden. I robotutforskeren velg Måltider, og velg deretter Vis kode.

Kopier og lim inn følgende robotsvar i kodevisningen. Bytt deretter ut de tre URL-eksempeladressene til avbildninger med dine egne.

# 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

Robotsvar-fanen i Composer med strenger.

Kopier og lim inn følgende kode i samme kodevisning for å legge til et tilpasset kort som viser tre bilder.

# 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"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Robotsvar-fane i Composer – JSON for dynamisk kort.

Kopier og lim inn følgende kode i samme kodevisning for å legge til en aktivitet som viser det dynamiske kortet.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

Vise det dynamiske kortet

Gå til Opprett-siden. I robotutforskeren velger du Måltider, og velg deretter BeginDialog-utløseren.
På redigeringslerrettet velger du Legg til (+), og deretter Send et svar.
Velg den nye Send et svar-noden for å åpne Egenskaper-ruten. Under Robotsvar velger du Vis kode for å bytte til koderedigeringsprogrammet.

Advarsel!

Hvis du legger til uttrykket i neste trinn i svar-redigeringsprogrammet i stedet for kode-redigeringsprogrammet, fører dette til at roboten svarer med rå JSON i stedet for et dynamisk kort.
Kopier og lim inn følgende uttrykk til koderedigeringsprogrammet.
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Microsoft Copilot Studio globale variabler kan nås i Composer ved å bruke virtualagent-omfanget. Dette omfanget vises ikke på Composer-egenskapsreferansemenyen, men du får tilgang til det ved å angi et uttrykk direkte.

I dette eksempel refererer ${virtualagent.user_city} til den globale verdien user_city som ble opprettet i Microsoft Copilot Studio-roboten.

Publiser innholdet

Publiser Composer-innholdet for å gjøre det tilgjengelig i Microsoft Copilot Studio roboten.

Viktig

Valg av Publiser i Composer gjør at endringene blir tilgjengelige for testing, men publiserer ikke automatisk roboten.

Publiser roboten for Microsoft Copilot Studio å oppdatere roboten på tvers av alle kanalene den er koblet til.
Gå til Microsoft Copilot Studio Emner-siden for å se det nye Måltider-emnet.
Åpne emnet Alternativene for måltidslevering.
Under Spørsmål-noden velger du Legg til node (+). Velg Omdiriger til et annet emne, og velg deretter Måltider.
Velg Lagre for å lagre endringene i emnet.

Teste roboten

Hvis du vil teste endringene i Microsoft Copilot Studio, åpner du Test robot-ruten og kontrollerer at Spor mellom emner er aktivert. Skriv inn meldingen What meals do you deliver? for å starte samtalen.

Roboten utløser emnet Alternativene for måltidslevering, som ber brukeren om å angi sin gjeldende by. Dermed omdirigerer roboten til Composer-dialogen Måltider for å vise et dynamisk kort.

Microsoft Copilot Studio-eksempel 1-test.

Neste trinn

Vis en liste over alternativer med flere valg i Copilot Studio.

Del via