cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
Super User
Super User

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 (+2.250 students | PROMOTIONS) : English | Português

View solution in original post

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

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 (+2.250 students | PROMOTIONS) : English | Português

View solution in original post

9 REPLIES 9
Super User
Super User

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 (+2.250 students | PROMOTIONS) : English | Português

View solution in original post

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

 

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 (+2.250 students | PROMOTIONS) : English | Português

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

Advocate I
Advocate I

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?

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

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.

Advocate II
Advocate II

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?

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 (+2.250 students | PROMOTIONS) : English | Português

View solution in original post

Helpful resources

Announcements
PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Check out Tomasz Poszytek's session from the 2020 Power Platform Community Conference!

PVA Commnity Blog

NEW Power Virtual Agents Community Blog

View articles posted by fellow community members on the Power Virtual Agents Community Blog!

Top Solution Authors
Users online (6,518)