Customize the options display

(0) Share

Report

Posted on by Chatbotdev

Can we change the display alignment of options from being displayed horizontally, can it be displayed vertically.

Categories:

General topics

I have the same question (0)

All responses (14)

Answers (1)

Gitika Gupta on at

Like (7)

Report

Hello, You can do with a custom canvas implementation which requires code, but not out of the box yet. We are adding support for vertical alignment shortly and will post in the announcements when we release it. Thanks.

Was this reply helpful? Yes No
jdelga2 2 on at

Like (0)

Report

Can you please provide the code to get this vertical allignment?, I can't find it anywhere, not in the documentation, default style file, and not even in the forums.

Thanks,
Juan

Was this reply helpful? Yes No
murthyyvsn Microsoft Employee on at

Like (1)

Report

Any update on this topic?

Was this reply helpful? Yes No
webmonkee 29 on at

Like (0)

Report

const styleOptions = {
// Add styleOptions to customize Web Chat canvas
suggestedActionLayout: 'stacked',
};
That should do it.

Was this reply helpful? Yes No
DiegoPeres 327 on at

Like (0)

Report

Hi @ggupta
any news about the improvement to put the menus vertically?

Was this reply helpful? Yes No
Verified answer

PowerPuffKK 316 on at

Like (6)

Report

Hi @DiegoPeres,

I've had to do this for my first PVA project some time ago as the carousel format of the options was raised as an accessibility issue. It took a while to work it out but I have done so successfully and have used it ever since - I thought it might be easier to paste the code snippet that you can reuse if you wish. You'll need to go to https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas for the full code and then in the const styleOptions section, paste the line I have bolded below. This will change the layout of the suggested actions from carousel to stacked. I'd also suggest using the second bolded line with the wrapped text (this will ensure that for long text options, the text will be wrapped within the button - this also took me ages to figure out!).

Please mark my answer as a solution if it helped!

const styleOptions = {
// Add styleOptions to customize web chat canvas
botAvatarInitials: 'BT',
accent: '#003087',
botAvatarBackgroundColor: "#FFFFFF",
botAvatarImage: 'https://image.flaticon.com/icons/png/128/265/265668.png',
userAvatarInitials: 'BT',
accent: '#003087',
userAvatarBackgroundColor: "#FFFFFF",
userAvatarImage: 'https://image.flaticon.com/icons/png/128/4776/4776976.png',
hideUploadButton: true,
suggestedActionLayout: 'stacked',
suggestedActionDisabledBorder: null,
suggestedActionDisabledBorderColor: '#E6E6E6',
suggestedActionDisabledBorderStyle: 'solid',
suggestedActionDisabledBorderWidth: 2,
suggestedActionsStackedLayoutButtonTextWrap: true,
emojiSet: true,
};

Kind regards,
Kristine
PowerPuffKK

Was this reply helpful? Yes No
marvin_B 2 on at

Like (0)

Report

Hi Everyone,

Is there a way to customize the options inside Teams? From what I gather, the solutions in these forums refer to customizing the web app.

Was this reply helpful? Yes No
PowerPuffKK 316 on at

Like (1)

Report

Hi @marvin_B ,

The Teams version of PVA renders slightly differently and doesn't support stacked options which can only be accommodated using code. I've tried extending the PVA for Teams using Bot Framework but even thumbnail/hero cards get rendered differently. At present I don't think it's possible.

Kristine

Was this reply helpful? Yes No
lisha 80 on at

Like (0)

Report

Hi @webmonkee ,

How can we update the code in original virtual agent chatbot so that we can see the change in original chatbot? Please help me to resolve my issue.

Thanks

Was this reply helpful? Yes No
Kumar_bi 190 on at

Like (0)

Report

@ggupta any update on this sir ? can i have a vertical choices display with low code/no code ?

Was this reply helpful? Yes No