cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate II
Advocate II

Change Multiple Options Layout

Demo chatDemo 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!!

3 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Super User
Super User

Re: Change Multiple Options Layout

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-informat...

Documentation to implement javascript and CSS inside the canvas app: https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-...

 

---
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/


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+1.000 students): https://www.udemy.com/pva-beginners

View solution in original post

Highlighted
Dual Super User II
Dual Super User II

Re: Change Multiple Options Layout

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-...

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-agent...

 

Regards,

Reza

View solution in original post

Highlighted
Super User
Super User

Re: Change Multiple Options Layout

Yes, @Leeyong88 !

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


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+1.000 students): https://www.udemy.com/pva-beginners

View solution in original post

9 REPLIES 9
Highlighted
Super User
Super User

Re: Change Multiple Options Layout

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-informat...

Documentation to implement javascript and CSS inside the canvas app: https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-...

 

---
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/


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+1.000 students): https://www.udemy.com/pva-beginners

View solution in original post

Highlighted
Advocate II
Advocate II

Re: Change Multiple Options Layout

@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?

 

Highlighted
Super User
Super User

Re: Change Multiple Options Layout

Yes @Leeyong88 .

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


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+1.000 students): https://www.udemy.com/pva-beginners
Highlighted
Dual Super User II
Dual Super User II

Re: Change Multiple Options Layout

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-...

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-agent...

 

Regards,

Reza

View solution in original post

Highlighted
Advocate I
Advocate I

Re: Change Multiple Options Layout

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?

Highlighted
Advocate II
Advocate II

Re: Change Multiple Options Layout

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!!BOT.JPG

Highlighted
Advocate I
Advocate I

Re: Change Multiple Options Layout

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.

Highlighted
Advocate II
Advocate II

Re: Change Multiple Options Layout

Hi All, 

 

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

 

Stacked Option.JPG

 

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?

Highlighted
Super User
Super User

Re: Change Multiple Options Layout

Yes, @Leeyong88 !

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


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+1.000 students): https://www.udemy.com/pva-beginners

View solution in original post

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

Community Conference

Experience what’s next for Power Virtual Agents

See the latest Power Virtual Agents innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Top Solution Authors
Top Kudoed Authors
Users online (6,808)