search

MicrosoftDocs / msteams-docs

Source for the Microsoft Teams developer platform documentation.
https://aka.ms/teamsdev
Creative Commons Attribution 4.0 International
288 stars 511 forks source link

"Container" type in Adaptive Card not supported in Teams Tab #4937

Closed StevieBleeds closed 2 years ago

StevieBleeds commented 2 years ago

I've followed the official documentation when creating an Adaptive Card in a Teams Tab.

However, I've encountered an issue where if "type": "container" is present in the adaptive card template, the Teams app returns an There was a problem reaching this app error. If I remove the container, the card renders as expected.

const {
    StatusCodes
} = require('botbuilder');

const createFetchResponse = async () => {
    console.log("Create fetch response");

    const res = {
        status: StatusCodes.OK,
        body: {
            "tab": {
                "type": "continue",
                "value": {
                    "cards": [
                        {
                            "card": getAdaptiveCard(),
                        }
                    ]
                },
            },
        }
    };

    return res;
};

const getAdaptiveCard = () => {
    const adaptiveCard = {
        $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
        body: [
            {
            "type": "TextBlock",
            "text": "How do I get started?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "Some text."
        },
        {
            "type": "TextBlock",
            "text": "What do I need to know?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "I've run into a problem, what do I do?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text.",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Can I learn more about this?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text.",
            "wrap": true
        }
        ],
        type: 'AdaptiveCard',
        version: '1.4'
    };
    return adaptiveCard;
}

module.exports = {
    createFetchResponse
}
ghost commented 2 years ago

Hi StevieBleeds! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

sayali-MSFT commented 2 years ago

@StevieBleeds - We are looking into this I will get back to you soon.

sayali-MSFT commented 2 years ago

@StevieBleeds - We are tried to repro the scenario, it's looks like Container is support to Adaptive card teams Tab. you can tried to add container in c# as given below snippest.

        public static Attachment GetAdaptiveCardForTaskModule()
        {
            AdaptiveCard card = new AdaptiveCard(new AdaptiveSchemaVersion("1.2"))
            {
                Body = new List<AdaptiveElement>
                {
                    new AdaptiveContainer
                    {
                         Items =
                         {
                              new AdaptiveTextBlock
                              {
                                 Text = "Hello ss ",
                                 Weight = AdaptiveTextWeight.Bolder,
                                 Wrap = true,
                              }
                         }
                    },
                },
                Actions = new List<AdaptiveAction>
                {
                    new AdaptiveSubmitAction
                    {
                        Title = "Close",
                        Data = new AdaptiveCardAction
                        {
                            MsteamsCardAction = new CardAction
                            {
                                Type = "task/submit",
                            },
                        },
                    },
                },
            };

            return new Attachment()
            {
                ContentType = AdaptiveCard.ContentType,
                Content = card,
            };
        }

adaptive

StevieBleeds commented 2 years ago

Thanks, I will give that a try. I've been able to replicate the issue using the following in the Teams Web Client.

Dependencies

        "@azure/cosmos": "^3.12.3",
        "@azure/identity": "^1.5.1",
        "@microsoft/microsoft-graph-client": "^3.0.0",
        "adaptive-expressions": "^4.14.1",
        "adaptivecards-templating": "^2.1.0",
        "botbuilder": "~4.14.0",
        "botbuilder-applicationinsights": "^4.14.1",
        "botbuilder-azure": "^4.14.1",
        "botbuilder-dialogs": "^4.14.1",
        "dotenv": "^10.0.0",
        "isomorphic-fetch": "^3.0.0",
        "path": "^0.12.7",
        "restify": "~8.5.1"

bot.js

....
    /**
     * Action the tab/fetch activity
     */
    async onInvokeActivity(context) {

        // Validate invoke activity
        if (context.activity.name === 'tab/fetch') {

            // Validate the tab being invoked
            if (context.activity.value.tabContext.tabEntityId == 'myhelpTab') {

                // Execute the fetch response
                return helpAdaptiveCard.createFetchResponse();
            }
      }
}

Not working

helpAdaptiveCard.js

// Import the required modules
const {
    StatusCodes
} = require('botbuilder');

// Card response for tab fetch request
const createFetchResponse = async () => {
    console.log("Create fetch response");

    const res = {
        status: StatusCodes.OK,
        body: {
            "tab": {
                "type": "continue",
                "value": {
                    "cards": [
                        {
                            "card": getAdaptiveCard(),
                        }
                    ]
                },
            },
        }
    };

    return res;
};

// Adaptive Card showing sample text and Submit Action
const getAdaptiveCard = () => {
    const adaptiveCard = {
        $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
        body: [
            {
            "type": "TextBlock",
            "text": "How do I get started?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "More text"
        },
        {
            "type": "Container"
        },
        {
            "type": "TextBlock",
            "text": "What do I need to know?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "I've run into a problem, what do I do?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Can I learn more ?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        }
        ],
        type: 'AdaptiveCard',
        version: '1.4'
    };
    return adaptiveCard;
}

module.exports = {
    createFetchResponse
}
ac_not_working

Working

helpAdaptiveCard.js

// Import the required modules
const {
    StatusCodes
} = require('botbuilder');

// Card response for tab fetch request
const createFetchResponse = async () => {
    console.log("Create fetch response");

    const res = {
        status: StatusCodes.OK,
        body: {
            "tab": {
                "type": "continue",
                "value": {
                    "cards": [
                        {
                            "card": getAdaptiveCard(),
                        }
                    ]
                },
            },
        }
    };

    return res;
};

// Adaptive Card showing sample text and Submit Action
const getAdaptiveCard = () => {
    const adaptiveCard = {
        $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
        body: [
            {
            "type": "TextBlock",
            "text": "How do I get started?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "More text"
        },
        {
            "type": "TextBlock",
            "text": "What do I need to know?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "I've run into a problem, what do I do?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Can I learn more?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "More text",
            "wrap": true
        }
        ],
        type: 'AdaptiveCard',
        version: '1.4'
    };
    return adaptiveCard;
}

module.exports = {
    createFetchResponse
}

ac_working

sayali-MSFT commented 2 years ago

@StevieBleeds - as you mention above, It is not valid way to add "type": "Container" in adaptive card. The card elements are render inside the Container. Could you please check it once as given below:-

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "This is some text"
        },
        {
          "type": "Image",
          "url": "https://adaptivecards.io/content/cats/1.png"
        }
      ]
    }
  ]
}
StevieBleeds commented 2 years ago

That's worked, thanks for that!

ghost commented 2 years ago

Tell us about your experience!

Hi StevieBleeds! This issue is closed in our system. We would like your feedback on your experience with our support team and Platform.

Best regards, Teams Platform