Change Multiple Options Layout

(0) Share

Report

Posted on by Leeyong88

108

Demo chat

Hi, is there anyway to change multiple options layout from horizontal to vertical?

Horizontal: Option1; Option 2; Option3

Vertical:

Option1;

Option2;

Option3;

Thanks for advise!!

Categories:

Publish & channel management

I have the same question (0)

All responses (15)

Answers (3)

Verified answer

CU22081450-0 Most Valuable Professional on at

Like (1)

Report

Hi @Leeyong88 ,

You can customize using CSS in a canvas app, is not by default feature.
Template to see the options in a horizontal alignment: https://powervirtualagents.microsoft.com/en-us/blog/helping-organizations-provide-real-time-information-about-covid-19-with-microsoft-power-virtual-agents/
Documentation to implement javascript and CSS inside the canvas app: https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-bot-icon-and-name/

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.
Thanks!
Renato Romão
https://www.linkedin.com/in/renatoromao/

Was this reply helpful? Yes No
Leeyong88 108 on at

Like (0)

Report

@renatoromao Appreciate for your reply. So that means any layout changes I have to use CSS in canvas app to edit it. And it requires basic coding knowledge to make the changes right?

Was this reply helpful? Yes No
CU22081450-0 Most Valuable Professional on at

Like (1)

Report

Yes @Leeyong88 .
It's basic because is just using JS and CSS and have a lot of content on the internet around these technologies.

Was this reply helpful? Yes No
Verified answer

RezaDorrani 12,143 on at

Like (2)

Report

Hi @Leeyong88

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

stacked - will stack up the buttons one below the other.

https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-bot-icon-and-name/

You would need to host this index.html file on a web server which is anonymously available.

If you want to learn more, we have a AMA webinar tomorrow

https://powervirtualagents.microsoft.com/en-us/blog/what-is-new-and-exciting-for-power-virtual-agents-webinar-may-15th/

Regards,

Reza

Was this reply helpful? Yes No
mlaurich 15 on at

Like (0)

Report

So would the need for this suggest that there are to many choices and a redesign is more suitable? I am trying to grasp the concept of the topic layout and how granular do you go instead of just asking a question with 8-10 choices?

Was this reply helpful? Yes No
Leeyong88 108 on at

Like (0)

Report

Hi @mlaurich ,would like to hear about your opinion in design the BOT.

In my design when comes to service catalog option, there are more branches.

Example: User chose the option About SimpleHelp. From this option there will be 5 or 6 potential questions in the choices. In the chat BOT it appear to be horizontal and users has to scroll left-right to see/read the choices. I wish to make it appear like right side layout (vertical). Thanks!!

Was this reply helpful? Yes No
mlaurich 15 on at

Like (1)

Report

The comment mentioned about using CSS to change the design to have the buttons vertical is all I have seen and I also was interested into doing that as well once I decided if the Q&A is a good design.

My bigger question is based on how PVA is coded, did they intend for 5 or 8 or greater answers to a question? Instead should the questions be more specific or granular only having 2-3 choices? Having more questions and smaller answers? maybe this is a personal choice but without the vertical buttons it seems they only planned for short 2-3 answer buttons.

Its hard to say how granular you should go with your topic and questions I feel and still trying to grasp the best way to do so. Would love to hear others about their thoughts on this as I have several paths that I will end up with 5+ answers.

Was this reply helpful? Yes No
Leeyong88 108 on at

Like (0)

Report

Hi All,

Thanks for your guide I manage to change it in custom canvas as following:

Since I customized canvas for my BOT. It won't reflect in my demo web BOT right?I want to ask if I want to publish in my custom website. I should provide this customized canvas code to IT Administrator for deploy right? (not the default embed code from channel > Custom Website)? @renatoromao @ ,could you please advise?

Was this reply helpful? Yes No
Verified answer

CU22081450-0 Most Valuable Professional on at

Like (1)

Report

Yes, @Leeyong88 !

You need to implement this code inside your custom website, it's not default code embedded.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

I've unsuccessfully tried using info from the following sources to update the question options layout to vertical in our bot: Editing in Bot Framework Composer and configure the canvas with your bot.

I haven't been able to find any updated information on the update for this setting, so checking in to see if this feature is still expected to be included. Despite whatever question overhauls designers could make in their process (to just include fewer questions), this seems like a pretty important feature.

Was this reply helpful? Yes No