Adaptive card on Select Item event of Search Message Extension

Question

I am trying to return an adaptive card when search result is selected in Search Message extension. Below is my class to return the card:

import { IEntity } from '../model/IEntity';
import { Attachment, CardFactory } from "botbuilder";

export class AccountResultCard {

    public static getCard(account: IEntity): Attachment {

        // Get map
        let logo = `https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg`;
        let url = `https://pbs.twimg.com/docs/test.aspx?GoPage=AccountCard.aspx?AccountID='${account.ID}'&_Division_='${account.Division}'`;
        const accountDetail = account.Code ? account.Code + ' - '  + account.Description : '';
        const accountcontextinfo1 = account.ContextInfo[1] ? account.ContextInfo[1] : '';
        const accountcontextinfo2 = account.ContextInfo[3] ? account.ContextInfo[3] + ' '+ account.ContextInfo[2] : '';

        
        const card =  CardFactory.adaptiveCard(
            {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "TextBlock",
                        "size": "Large",
                        "weight": "Bolder",
                        "text": "Title"
                    },
                    {
                        "type": "TextBlock",
                        "size": "Medium",
                        "weight": "Bolder",
                        "text": accountDetail
                    },
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": accountcontextinfo1,
                                        "wrap": true
                                    },
                                    {
                                        "type": "TextBlock",
                                        "spacing": "None",
                                        "text": accountcontextinfo2,
                                        "wrap": true
                                    },
                                    {
                                        "type": "TextBlock",
                                        "spacing": "None",
                                        "text": "Missing state and country",
                                        "wrap": true
                                    }
                                ],
                                "width": "stretch"
                            },
                            {
                                "type": "Column",
                                "items": [
                                    {
                                        "type": "Image",
                                        "style": "Person",
                                        "url": logo,
                                        "size": "Small"
                                    }
                                ],
                                "width": "auto"
                            }
                        ]
                    }
                ],
                "actions": [
                    {
                        "type": "Action.OpenUrl",
                        "title": "Open in Aurora",
                        "url": url,
                        "width": "Small",
                        "style": "default"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "version": "1.2"
            }
        );

        return card;
    }
}

and below is my select item event:

 public async handleTeamsMessagingExtensionSelectItem(
    context: TurnContext,
    obj: any
  ): Promise<any> {
   const item = this.response.find(e => e.ID == obj.name);
    return {
      composeExtension: {
        type: "result",
        attachmentLayout: "list",
        attachments: [AccountResultCard.getCard(item)],
      },
    };
  }

But it never return anything. I deleted everything from get card and sent just a one single text block with hard coded value in body. That also didn't work.Can you guys suggest me where I am doing wrong.

Answer 1

I was able to send the adaptive card in SelectItem event by changing the code to :

return {
  composeExtension: {
    type: "result",
    attachmentLayout: "list",
    attachments: [{preview: CardFactory.heroCard("title", ""),
      ...yourAdaptiveCard}],
  },
};

This has been answered here.