Text not wrapping in hero card - botframework

Question

Im using a template from MS that allows me to use multi turn in QnA maker. the problem is the text on the hero cards wont wrap. From what i can see of the code the card title and subtitle are dynamically generated dependant on the existence of a prompt in Qna maker.
So far i've looked up on SO and can see the \n\n example but that wont apply in this case. or if it does could anyone help me with the correct syntax. there doesn't seem to be any further advice.
public static Activity GetHeroCard(string cardTitle, QnAPrompts[]
prompts)
{
var chatActivity = Activity.CreateMessageActivity();
var buttons = new List<CardAction>();
var sortedPrompts = prompts.OrderBy(r => r.DisplayOrder);
foreach (var prompt in sortedPrompts)
{
buttons.Add(
new CardAction()
{
Value = prompt.DisplayText,
Type = ActionTypes.ImBack,
Title = prompt.DisplayText,
});
}
var plCard = new HeroCard()
{
Title = cardTitle,
Subtitle = string.Empty,
Buttons = buttons
};
var attachment = plCard.ToAttachment();
chatActivity.Attachments.Add(attachment);
return (Activity)chatActivity;
}
}
so the code creates the card and attaches it to the return message to the user. Can Anyone advise how to wrap the text on the card.

Answer 1

First, you should assign your returned QnA result to the 'text' field, not the 'title' field. If you do so, you should find that there is no character limit. I say 'should' because the number of lines of text a hero card can display is channel specific. At the time of this writing, I know for certain that web chat, Teams, and Facebook do not have a character limit (you will need to test others that interest you).
As I don't know the channel you are trying to display your hero card over, your mileage may vary.
Here is an example of a hero card with the text field taken from the docs. You can read more about hero cards here. You can also reference this official sample from the Botbuilder-Samples repo.
public static HeroCard GetHeroCard()
{
var heroCard = new HeroCard
{
Title = "BotFramework Hero Card",
Subtitle = "Microsoft Bot Framework",
Text = "Build and connect intelligent bots to interact with your users naturally wherever they are," +
" from text/sms to Skype, Slack, Office 365 mail and other popular services.",
Images = new List<CardImage> { new CardImage("https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg") },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "https://learn.microsoft.com/bot-framework") },
};
return heroCard;
}
Hope of help!

Answer 2

First of all hero cards will only let you display two lines of text, so if you want more number of lines to be shown, then I advise you to use adaptive cards. Currently formatting is not supported for hero cards.
public static AdaptiveCard AdaptiveCard(string subtitle)
{
AdaptiveCard card = new AdaptiveCard();
card.Body.Add(new AdaptiveTextBlock()
{
Text = string.IsNullOrEmpty(subtitle) ? string.Empty : subtitle,
Speak =text ,
Wrap = true,
});
return card;
}