I want to create an adaptive card with buttons for email and call functionality. Whats the possible way for that? - botframework

Question

I want to create an adaptive card with buttons for email and call functionality. I cannot find a format for call and email in adaptive cards. Is there a way to combine adaptive cards with hero cards, since hero cards have the cardAction object functionality ?

Answer 1

Adaptive Cards have action elements and selectactions that can be set. You would create a card with your input requirements and then use a submit action to process the input. Note on the text input elements, the format has been set to either email or tel
{"type":"AdaptiveCard","version":"1.0","id":"c2de1dd7-c916-4196-a914-0694957aff77","minVersion":"1.0","fallbackText":"","speak":"","body":[{"type":"TextBlock","id":"23af4d94-cf3b-480e-8c28-5a7988b8a26b","text":"Email Address","maxLines":1},{"type":"Input.Text","id":"4a47c737-dbf0-42d0-aa9f-10f4f38bd20f","placeholder":"enter your email here","value":"","style":"email","maxLength":250,"isRequired":false},{"type":"TextBlock","id":"b4f3bce9-2464-473f-9129-48a3740aec8b","size":"large","text":"OR","horizontalAlignment":"center","maxLines":1},{"type":"TextBlock","id":"fe2d84aa-79e7-4fdf-91a0-79a9eb264dc1","text":"Call me","maxLines":1},{"type":"Input.Text","id":"d03d538f-7ead-4959-8a8e-7703dbaf1899","placeholder":"What's your number?","value":"","style":"tel","maxLength":250,"isRequired":false}],"actions":[{"type":"Action.Submit","id":"8421a872-2c4f-4fa2-8254-b1d88503cc8a","data":"","title":"Email Me"},{"type":"Action.Submit","id":"2ccf2819-ad38-492a-80f9-7cd5152fea09","data":"","title":"Call Me"}]}

Answer 2

Is there a way to combine adaptive cards with hero cards, since hero cards have the cardAction object functionality ?
No, but Buttons within AdaptiveCard are not created using CardAction objects, you can use schema that is defined in AdaptiveCard instead.
There're three kinds of actions OpenUrl, Submit and ShowCard. Here Submit is what we need.
If you want to create AdaptiveCard in C#, you can for example create it and send the message like this:
AdaptiveCard card = new AdaptiveCard()
{
Body = new List<CardElement>()
{
new Container()
{
Speak = "<s>Hello!</s><s>Send Email!</s>",
Items = new List<CardElement>()
{
new TextBlock()
{
Text = "Hello!",
Weight = TextWeight.Bolder,
IsSubtle = true
},
new TextBlock()
{
Text = "Send Email!",
Wrap = true
},
new TextInput()
{
Id = "EmailAddTo",
Placeholder = "To:"
},
new TextInput()
{
Id = "EmailAddFrom",
Placeholder = "From:"
},
new TextInput()
{
Id = "Subject",
Placeholder = "Subject:"
},
new TextInput()
{
Id = "Content",
Placeholder = "Content:",
IsMultiline = true,
}
}
}
},
Actions = new List<ActionBase>()
{
new SubmitAction()
{
Title = "Send Email",
DataJson = "{\"Type\": \"EmailSend\"}"
}
}
};
Attachment attachment = new Attachment()
{
ContentType = AdaptiveCard.ContentType,
Content = card
};
var reply = context.MakeMessage();
reply.Attachments.Add(attachment);
await context.PostAsync(reply,CancellationToken.None);
When using Submit action, the Bot Framework will handle the submission and your bot will receive a new IMessageActivity with its Value, you can then handle it in your code for example like this:
private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
{
var message = await result;
if (message.Value != null)
{
// Got an Action Submit
dynamic value = message.Value;
string submitType = value.Type.ToString();
switch (submitType)
{
case "EmailSend":
/* */
return;
}
}
}
For more information, you can refer to the official Adaptive Cards Bot Sample.