Is there a way to highlight a button option displayed through Choice using PromptOptions in MS Chat BOT created in C# and SDKV4?

Question

I am creating a chatBot using microsoft Bot framework using SDKV4 in C#. The BOT has multiple waterfall dialogs.

In this one dialog class shows few choice options in form of buttons using Prompt Options.I want to know whether or is there a way to highlight one(only one) of the buttons displayed in different color.

If we observe, in general the choice buttons are displayed in White(background of button) and Blue(blue text and border of button) combination.

So is there a way to change the white background color? Either only color or making the button to give blinking effect or flashing effect based on a certain conditions.

Let's say there is a bool flag ,if it is true i want to display one of the option in other color or as is if it is false.

Code:

 return await stepContext.PromptAsync(
                        "choicePrompt",
                        new PromptOptions
                        {
                            Prompt = stepContext.Context.Activity.CreateReply("Please click/choose any one from the following: "),
                            Choices = new[] { new Choice { Value = "Option0" }, new Choice { Value = "Option1" }, new Choice { Value = "Option2" }, new Choice { Value = "Option3" }, new Choice { Value = "Option4" }, new Choice { Value = "Option5" }}.ToList(),
                            RetryPrompt = stepContext.Context.Activity.CreateReply("Sorry, I did not understand that. Please choose any one from the options displayed below: "),
                        });

I want the Option2 to be displayed in different color based on Bool flag as tried to explain above.

Is this possible? or this is a wrong expectation and it cannot be done?

if it is possible can anyone please provide me the detailed steps to achieve this. Please note that i am a bit new to coding hence i would humbly request to provide detailed steps if this is behaviour is achievable.

Thanks in Advance

Regards

ChaitanyaNG

mdrichardson mdrichardson · Accepted Answer · 2020-02-18T17:42:15

There's no built-in way to do this, no. The closest thing that PromptOptions offers is the Style property, but even that is only for setting different ListStyles, none of which offer any color customization.

If you're only using Web Chat, there's likely some CSS customization I can help you with. But if you're using any other channel, you're pretty much stuck with how the channel decides to render the choices.

Alternatively, instead of choices, you could send small Adaptive Cards and set a different background image for the first one. Note, however, that the channel doesn't have to display the background image (although it likely will). Non-Microsoft channels (Slack, Facebook, etc) also don't work very well with using Adaptive Cards as inputs.

To answer further comments, I was able to find the appropriate CSS selector for Choices. This may differ in your version of Web Chat, but I used:

.css-1wegtiu > ul > li:first-child > .css-y5o52s > button {
    background: red
}

and this resulted in:

Is there a way to highlight a button option displayed through Choice using PromptOptions in MS Chat BOT created in C# and SDKV4?

1 Answers