How to style "suggested actions" in Microsoft bot framework?

Question

I am using the bot framework v4 SDK for webchat. I have used suggested actions for the choice prompt. By default, the suggested actions are aligned horizontally. Is there a way in which that can be made vertical?

I have tried the style options for the choice prompt as hero card and list.B ut in both the cases the choices will remain on the chat window and will not disappear. So the only option I had, was to use suggested actions. I could not find a way to make the suggested actions to appear vertically.

 PromptOptions choicePromptOptions = new PromptOptions
        {
            Choices = choices,
            Prompt = MessageFactory.Text("Please choose :"),
            RetryPrompt = null,
            Style = ListStyle.SuggestedAction
         };

Is there any other way to make the choices disappear other than suggested actions ?

score 3 · Accepted Answer · answered Aug 12 '19 at 23:13

Unfortunately, this is not possible with suggested actions. Suggested actions, by design, are meant to consume as little real estate as possible due to their temporary existence. Hence, the horizontal display.

If you are wanting a horizontal display, then I would suggest you use a hero card. However, it will remain part of the web chat transcript and not disappear once a selection or other activity occurs.

Here is sample code borrowed from the referenced doc:

private static async Task DisplayOptionsAsync(ITurnContext turnContext, CancellationToken cancellationToken)
{
    var card = new HeroCard
    {
        Text = "You can upload an image or select one of the following choices",
        Buttons = new List<CardAction>
        {
            new CardAction(ActionTypes.ImBack, title: "1. Green", value: "1"),
            new CardAction(ActionTypes.ImBack, title: "2. Blue", value: "2"),
            new CardAction(ActionTypes.ImBack, title: "3. Red", value: "3"),
        },
    };

    var reply = MessageFactory.Attachment(card.ToAttachment());
    await turnContext.SendActivityAsync(reply, cancellationToken);
}

score 0 · Answer 2 · edited Mar 25 '21 at 20:13

0

In the latest version of the bot framework just apply the following setting

suggestedActionLayout: 'carousel', // either 'carousel' or 'stacked'

see https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js for more details

edited Mar 25 '21 at 20:13

shaedrich

5,457
3
26
42

answered Mar 25 '21 at 11:32

Joshua Douce

1
1

Thanks for your answer, Joshua. As far as I can see, while your answer uses the BotFramework-WebChat, the question uses the bot framework v4 SDK. Are you sure, your answer solves the question? – shaedrich Mar 25 '21 at 12:01
1

also interested how exactly to use that? is that option for backend or for frontend? Link is 404 – Andrey Stepanov May 10 '21 at 15:29

How to style "suggested actions" in Microsoft bot framework?

2 Answers2