search

OfficeDev / BotBuilder-MicrosoftTeams

Microsoft Bot Builder extension library for developing bots for Microsoft Teams
MIT License
257 stars 150 forks source link

Adaptive Card is not rendered in mobile client app of Teams #204

Closed kafka-yu closed 5 years ago

kafka-yu commented 5 years ago

Hi Team,

I'm building an adaptive card, but it seems this card is not rendered in Teams mobile app client.

{"type":"AdaptiveCard","$schema":"http://adaptivecards.io/schemas/adaptive-ca
rd.json","version":"1.0","body":[{"type":"ColumnSet","columns":[{"type":"Column","w
idth":"stretch","items":[{"type":"TextBlock","text":"John","weight":"bolder","spaci
ng":"none"}]},{"type":"Column","width":"auto","items":[{"type":"Image","altText":"C
onfigure your Test Call App Bot","horizontalAlignment":"Right","url":"https://i103studio-test.mynatapp.cc/assets/auth/images/settings-icon.png","size":"Small","width":"20px"}],"selectAction":{"type":"Action.Submit","data":{"actionId":"OPEN_SETTINGS"}},"verticalContentAlignment":"Center","horizontalAlignment":"Left"}]},{"type":"ColumnSet","separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Work","spacing":"None"}],"spacing":"Large","verticalContentAlignment":"Center"},{"type":"Column","width":2,"items":[{"type":"TextBlock","text":"101","spacing":"None"}],"verticalContentAlignment":"Center","horizontalAlignment":"Left"},{"type":"Column","width":"auto","items":[{"type":"Image","url":"https://i103studio-test.mynatapp.cc/assets/auth/images/call-icon.png","size":"small","width":"20px","spacing":"None","horizontalAlignment":"Center"}],"horizontalAlignment":"Left","selectAction":{"type":"Action.OpenUrl","title":"Call","url":"http://test-dial-url?number=101"},"altText":"Call using Test Call App phone"}]},{"type":"TextBlock","text":"Please install Test Call App app before you make a call.","color":"Dark","horizontalAlignment":"Left"}],"minHeight":"150px"}

image

It works on web and desktop client.

Does anyone know the reason? Thanks Ruaki.

aosolis commented 5 years ago

The card uses properties that are not in the v1.0 schema, like minHeight (added in 1.2) and verticalContentAlignment (added in 1.1).

Gousia-Begum commented 5 years ago

@RukaiYu I have added few id's and required fields from the json and removed few which are not supported. Please try out this json and let me know if that helps.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "id": "col1",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "id": "txt1",
                            "spacing": "None",
                            "weight": "Bolder",
                            "text": "John"
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "id": "img1",
                            "horizontalAlignment": "Right",
                            "selectAction": {
                                "type": "Action.Submit",
                                "id": "sa1",
                                "title": "Test",
                                "data": {
                                    "actionId": "OPEN_SETTINGS"
                                }
                            },
                            "url": "https://i103studio-test.mynatapp.cc/assets/auth/images/settings-icon.png",
                            "size": "Small",
                            "width": "20px",
                            "altText": "Configure your Test Call App Bot"
                        }
                    ],
                    "width": "stretch"
                }
            ]
        },
        {
            "type": "ColumnSet",
            "id": "col2",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "id": "txt2",
                            "spacing": "None",
                            "text": "Work"
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "id": "txt3",
                            "spacing": "None",
                            "text": "101"
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "id": "img2",
                            "horizontalAlignment": "Center",
                            "spacing": "None",
                            "selectAction": {
                                "type": "Action.OpenUrl",
                                "id": "sa2",
                                "title": "Call",
                                "url": "http://test-dial-url?number=101"
                            },
                            "url": "https://i103studio-test.mynatapp.cc/assets/auth/images/call-icon.png",
                            "size": "Small",
                            "width": "20px",
                            "altText": "Call using Test Call App phone"
                        }
                    ],
                    "width": "stretch"
                }
            ]
        },
        {
            "type": "TextBlock",
            "id": "txt5",
            "horizontalAlignment": "Left",
            "color": "Dark",
            "text": "Please install Test Call App app before you make a call."
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}
kafka-yu commented 5 years ago

Thank you guys! @aosolis @Gousia-MSFT that fixed me! I should look at the schemas clearly 👍

Wajeed-msft commented 5 years ago

@RukaiYu - Do you need more help with this? Is your issue not resolved?

kafka-yu commented 5 years ago

@Wajeed-msft oh sorry I should create a new one. That card body issue is fixed, but about the 

"selectAction": {
                                "type": "Action.OpenUrl",
                                "id": "sa2",
                                "title": "Call",
                                "url": "http://test-dial-url?number=101"
                            },

This action can open the url on desktop client, while on mobile client(iOS), I need to hold the image about 3 seconds to trigger the action. Is it possible to trigger it by clicking/taping? I'm looking for another Action type. But not found..

@Gousia-MSFT @aosolis

kafka-yu commented 5 years ago

@Gousia-MSFT @aosolis Sorry, guys, are there any updates for my question?

kafka-yu commented 5 years ago

I've created a new issue https://github.com/OfficeDev/BotBuilder-MicrosoftTeams/issues/207, and close this one.