web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Copilot Studio / Adaptive card shown as...
Copilot Studio
Unanswered

Adaptive card shown as json in PVA instead of the actual card

(0) ShareShare
ReportReport
Posted on by 17

Hi,

I have followed the steps provided in docs (https://docs.microsoft.com/en-us/power-virtual-agents/advanced-bot-framework-composer) to test adding a dialog from bot framework composer. When i test the dialog in PVA, it is not displaying the adaptive card. Instead its showing it in the JSON format. Can anyone help?

 

shazrul_0-1617338354306.png

 

Categories:
I have the same question (0)
  • Jcook Profile Picture
    7,781 Most Valuable Professional on at

    Hello @shazrul 

     

    Unfortunately the link you provided is broken.

     

    Did you create this inside Bot Framework Composer?

  • Shazrul Profile Picture
    17 on at

    Sorry here is the link: Mircosoft docs

     

    I created the dialog in bot framework and then published it to PVA. 

     

     

  • Jcook Profile Picture
    7,781 Most Valuable Professional on at

    Thanks @shazrul 

     

    How did you create the Adaptive Card?

    did you use https://adaptivecards.io/designer ?

     

    Could you post your Json here.

  • Shazrul Profile Picture
    17 on at

    I followed the steps for Example 1 as explained in the link. Here are my bot responses:

    [import](common.lg)
    
    # Chicken()
    -Chicken
    
    # Steak()
    -Steak
    
    # Tofu()
    -Tofu
    
    # SteakImageURL()
    -https://contososcubademo.azurewebsites.net/assets/steak.jpg
    # ChickenImageURL()
    -https://contososcubademo.azurewebsites.net/assets/chicken.jpg
    # TofuImageURL()
    -https://contososcubademo.azurewebsites.net/assets/tofu.jpg
    
    
    # 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"
     }
     ]
     }
     ]
     }
     ]
    }
    ```
    
    
    # AdaptiveCardMeals(location)
    [Activity
     Attachments = ${json(adaptivecardjson_meals(location))}
    ]
    
    
    # SendActivity_VjZdQI()
    [Activity
     Text = ${AdaptiveCardMeals(virtualagent.user_city)}
    ]
     
  • Verified answer
    Shazrul Profile Picture
    17 on at

    I managed to fix it. I shouldn't have used the response editor for the Text in Send A Response. I should use the code editor. This resulted in the following bot response code which rectified my issue 

     

    [import](common.lg)
    
    # Chicken()
    -Chicken
    
    # Steak()
    -Steak
    
    # Tofu()
    -Tofu
    
    # SteakImageURL()
    -https://contososcubademo.azurewebsites.net/assets/steak.jpg
    # ChickenImageURL()
    -https://contososcubademo.azurewebsites.net/assets/chicken.jpg
    # TofuImageURL()
    -https://contososcubademo.azurewebsites.net/assets/tofu.jpg
    
    
    # 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"
     }
     ]
     }
     ]
     }
     ]
    }
    ```
    
    
    # AdaptiveCardMeals(location)
    [Activity
     Attachments = ${json(adaptivecardjson_meals(location))}
    ]
    
    
    # SendActivity_VjZdQI()
    - ${AdaptiveCardMeals(virtualagent.user_city)}

    Thanks

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Copilot Studio

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 265 Super User 2025 Season 2

#2
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 240 Super User 2025 Season 2

#3
S-Venkadesh Profile Picture

S-Venkadesh 101 Moderator

Last 30 days Overall leaderboard