MS Teams adaptive card "herocard" not work on mobile

user_14030748 0
Viewed 97

I`m creating bot for MS Teams and using JS Microsoft Bot Framework V4 SDK. In my work, I use search message extension and to work with it, I implemented the onSelectItem method that returns a adaptive card. I will give an example of the code below.

    return Promise.resolve({
      type: "result",
      attachmentLayout: "list",
      attachments: [CardFactory.heroCard(
        `${file.name}`,
        `${text}`,
        undefined,
        CardFactory.actions([
          {
            type: "openUrl",
            title: "Open",
            value: `${openLink}`
          },
          {
            type: "openUrl",
            title: "Download",
            value: `${downloadLink}`
          },
        ]),
      )]
    });

Where I pass undefined, this should be the path to the picture, but in my implementation I don't need it. So and this code works great in the browser and on the desktop version here is a screenshot

however, on the mobile version, I get the following result

this is absolutely not the right card, it has no content or buttons

microsoft-teams adaptive-cards javascript
1 Answers

I think I found the answer myself. When the message extension search is triggered, the onQuery method is called and suppose you made a query and received an array of values ​​that you want to display. And here, in the same method, iterating over the array, you must draw two cards at once. For example


files.forEach((file: IDocumentInfo): void => {
      const card: any = CardFactory.heroCard(
        cutString(file.name, LIMIT),
        text,
        undefined,
        [
          {
            type: "openUrl",
            title: "Open",
            value: "", // some value
          },
          {
            type: "openUrl",
            title: "Download",
            value: "" //some value,
          },
        ]
      );

      const preview: any = {
        contentType: "application/vnd.microsoft.card.thumbnail",
        content: {
          title: `${cutString(file.name, LIMIT)}`,
          text: "", // some text
        }
      };

And here the variable preview in my case will respond to a small view of information after the search and the variable card will be responsible for the view after selection. And after the card is selected, the onSelectItem method is triggered, which I need to get more information about the document

It turns out that the adaptive heroCard is not to blame here, the onSelectItem method is not called in the mobile application, or I am doing something wrong

user_140307480
Related