cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Leeyong88
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
renatoromao
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.650 students) : 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.650 students) : English | Português

View solution in original post

11 REPLIES 11
renatoromao
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.650 students) : 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.650 students) : 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

mlaurich
Advocate II
Advocate II

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.

Leeyong88
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.650 students) : English | Português

View solution in original post

Helpful resources

Announcements
March Update

Welcome to the User Group Private Preview

Check out new user group experience and if you are a leader please create your group

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Kudoed Authors
Users online (1,824)