bot framework welcome message. how to CardAction?

Question

in use ms azure botFrameWork v3. I want to display a welcome message CardAction. Not a simple message I want to use CardAction. I do not know how to code it.

public class MessagesController : ApiController{
            public virtual async Task<HttpResponseMessage> Post([FromBody] Activity activity){
                if (activity != null && activity.GetActivityType() == ActivityTypes.Message){
                    await Conversation.SendAsync(activity, () => new EchoDialog());
                }else{
                    HandleSystemMessage(activity);
                }
                return new HttpResponseMessage(System.Net.HttpStatusCode.Accepted);
            }

            private Activity HandleSystemMessage(Activity message){
                if (message.Type == ActivityTypes.DeleteUserData){
                }
                else if (message.Type == ActivityTypes.ConversationUpdate){
                    if (message.MembersAdded.Any(o => o.Id == message.Recipient.Id)){
                        ////////////welcom
                        var reply = message.CreateReply("hello~");
                        ConnectorClient connector = new ConnectorClient(new Uri(message.ServiceUrl));
                        connector.Conversations.ReplyToActivityAsync(reply);   
                    }
    return null;
            }
        }
    }

Answer 1

There are multiple ways of doing this. One way that is very convenient is by using adaptive cards designer .

Simply design the message you want and store the resulting json as a file in your project, eg under Cards/Welcome.json .

Of course, you can construct the adaptive card using code , but this way it's easier to play around and learning the concepts of adaptive cards along the way.

From there you can do something like this in your MessageController.cs :

private async Task<Activity> HandleSystemMessage(Activity message)
{
    if (message.Type == ActivityTypes.ConversationUpdate)
    {
        // Handle conversation state changes, like members being added and removed
        // Use Activity.MembersAdded and Activity.MembersRemoved and Activity.Action for info
        // Not available in all channels
        if (message.MembersAdded.Any())
        {
            var reply = message.CreateReply();
            foreach (var member in message.MembersAdded)
            {
                // the bot is always added as a user of the conversation, since we don't
                // want to display the adaptive card twice ignore the conversation update triggered by the bot
                if (member.Name.ToLower() != "bot")
                {
                    // Read the welcome card from file system and send it as attachment to the user
                    string json = File.ReadAllText(HttpContext.Current.Request.MapPath("~\\Cards\\Welcome.json"));

                    AdaptiveCard card = JsonConvert.DeserializeObject<AdaptiveCard>(json);
                    reply.Attachments.Add(new Attachment
                    {
                        ContentType = AdaptiveCard.ContentType,
                        Content = card
                    });

                    using (var scope = DialogModule.BeginLifetimeScope(Conversation.Container, message))
                    {
                        var connectorClient = scope.Resolve<IConnectorClient>();
                        await connectorClient.Conversations.ReplyToActivityAsync(reply);
                    }                                
                }
            }
        }
    }

    return null;
}

Always note the adaptive cards support for your channel. In case your channel is not supporting adaptive cards, you can go for hero cards and then fallback to plain text again.

Personal note: I found documentation about the status and the support of adaptive cards for the various channels being mostly outdated and sometimes wrong. It's worth checking GitHub or StackOverflow if you find your adaptive card not rendering as you want it on that particular channel.

Result in Bot emulator

Welcome adaptive card sample

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "Large",
                    "weight": "Bolder",
                    "text": "Welcome"
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "Small",
                                    "weight": "Bolder",
                                    "text": "This is a bot",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "I'm helping you...",
                    "wrap": true
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Quick Quote",
            "data": {
                "action": "quickquote"
            }
        },
        {
            "type": "Action.Submit",
            "title": "Some Action",
            "data": {
                "action": "someAction"
            }
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}