Bot Framework Rendering Choices Changes Format

Question

I've just tested a dialog with a list of choices that seem to render differently and I can't find any information on why this would be happening.

Given this list of choices:

Choices = ChoiceFactory.ToChoices(new List<string> 
{
    "No", 
    "Yes - xxxxxxxxxxxxxxxxx", 
    "Yes - xxxxxxxxxxxxxxxxx", 
    "Yes - xxxxxxxxxxxxxxxxx", 
    "Yes - xxxxxxxxxxxxxxxxx" 
})

It renders like this:

Whereas this list:

Choices = ChoiceFactory.ToChoices(new List<string> 
{ 
    "No", 
    "Yes 2", 
    "Yes - 3", 
    "Yes - 4", 
    "Yes - 5"
})

It renders how I want it too:

I've got other instances where I have a long list of buttons that scroll so I'm very confused why the first list above rendered like a list.

How can I force it to render like the second example?

score 2 · Accepted Answer · answered Dec 22 '18 at 00:12

This behavior has to do with the size of each choice and the amount of choices. When the choices themselves are small (ex: "Yes 2"), then they are able to show as the button type (how you want it to look). When they are displayed in this fashion, and there are many choices; then it will scroll off the screen (as you have seen).

When the choices (any one choice) becomes longer (ex: "Yes - xxxxxxxxxxxxxxxxx") then they get put into the list format. I don't believe there is a way to override this, but I will take a look. If not; the only option is to try and keep your choices small in size.

Additionally; each channel handles rendering/displaying in it's own fashion. For example; if i create many (~20) choices of the small variety; then they will show as the scroll-able "buttons" in web chat, where in Skype they will show as a list.

Maybe if I define each choice with specific `CardAction`, there is a way to list the long text defined in the `CardAction` and card for short text defined in the same `CardAction`? — baruchiro, Mar 19 '19 at 12:04

score 0 · Answer 2 · answered Mar 19 '19 at 16:50

Because of the strange relationship between Choice and his CardAction, You can shorten the value, but leave the title long, so you'll see cards with long text.

var values = new Dictionary<string, string>
{
    {"1", "No"},
    {"2", "Yes - xxxxxxxxxxxxxxxxx"},
    {"3", "Yes - xxxxxxxxxxxxxxxxx"},
    {"4", "Yes - xxxxxxxxxxxxxxxxx"},
    {"5", "Yes - xxxxxxxxxxxxxxxxx"}
};

Choices = values.Select(v =>
        new Choice(v.Key)
        {
            Action = new CardAction(title: v.Value, value: v.Key)
        })
    .ToList()

The key point is to put a short value in Value and a desired value in Title.

The rest of the CardAction settings can be found in this answer.

Bot Framework Rendering Choices Changes Format

2 Answers2