cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
thegreatdanton1
Regular Visitor

How can Microsoft Fluent UI styling be integrated with a Microsoft Power Portal?

Hi, 

 

A developer working for me is building a Microsoft Power Page. This will have a registration and login function. Once logged in there is a digital form. However, the styling of the form needs a lot of work. For example, radio buttons are on top of each other, as you can see below.

 

thegreatdanton1_0-1706572604570.png

I'm not a developer myself, but I have a few questions:

 

  1. Can the portal form design/styling be changed to incorporate Fluent styling for the majority of the components? For example, I'm looking at https://explore.fast.design/components and there are some slick form elements there. 
  2. If yes to #1 above, what's the best way to achieve this?
  3. The form on the portal is displayed in a way that there are 3 columns. But some of the field labels are long and push the field down to the next line. So in that case, the text box is not in line with the other 2 columns. I presume the form can be customised to have certain rows as 2 columns and others as 3 columns?

Thanks for any advice.

2 REPLIES 2
JadyMulqueeney
Helper II
Helper II

I'd say yes you could add Fluent UI framework into Power Pages, but it would cause more problems than it is worth. Power Pages is built on the Bootstrap UI framework, and the conflicts would be significant, not to mention disrupting the Power Pages Editor. They are fundamentally different. 

Instead, if you really want Fluent UI look & feel, I would suggest modifying the Bootstrap CSS to look like Fluent UI, and explore the many CSS classes offered in Bootstrap to change how your controls and component are displayed. This will take quite a lot of work in modifying the entire Bootstrap CSS, but at a minimum, changing font-families, form styles and buttons styles to mimic Fluent UI might be enough.  

EmadBeshai
Super User
Super User

Hi @thegreatdanton1 ,

 

Please your developer to edit the CSS classes and modify the needed styles instead of using the Fluent UI, this is based on my long real experience with similar UI issues.

 

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up. 

Helpful resources

Announcements

Check out the Copilot Studio Cookbook today!

We are excited to announce our new Copilot Cookbook Gallery in the Copilot Studio Community. We can't wait for you to share your expertise and your experience!    Join us for an amazing opportunity where you'll be one of the first to contribute to the Copilot Cookbook—your ultimate guide to mastering Microsoft Copilot. Whether you're seeking inspiration or grappling with a challenge while crafting apps, you probably already know that Copilot Cookbook is your reliable assistant, offering a wealth of tips and tricks at your fingertips--and we want you to add your expertise. What can you "cook" up?   Click this link to get started: https://aka.ms/CS_Copilot_Cookbook_Gallery   Don't miss out on this exclusive opportunity to be one of the first in the Community to share your app creation journey with Copilot. We'll be announcing a Cookbook Challenge very soon and want to make sure you one of the first "cooks" in the kitchen.   Don't miss your moment--start submitting in the Copilot Cookbook Gallery today!     Thank you,  Engagement Team

Tuesday Tip | How to Report Spam in Our Community

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   Today's Tip: How to Report Spam in Our Community We strive to maintain a professional and helpful community, and part of that effort involves keeping our platform free of spam. If you encounter a post that you believe is spam, please follow these steps to report it: Locate the Post: Find the post in question within the community.Kebab Menu: Click on the "Kebab" menu | 3 Dots, on the top right of the post.Report Inappropriate Content: Select "Report Inappropriate Content" from the menu.Submit Report: Fill out any necessary details on the form and submit your report.   Our community team will review the report and take appropriate action to ensure our community remains a valuable resource for everyone.   Thank you for helping us keep the community clean and useful!

Hear what's next for the Power Up Program

Hear from Principal Program Manager, Dimpi Gandhi, to discover the latest enhancements to the Microsoft #PowerUpProgram, including a new accelerated video-based curriculum crafted with the expertise of Microsoft MVPs, Rory Neary and Charlie Phipps-Bennett. If you’d like to hear what’s coming next, click the link below to sign up today! https://aka.ms/PowerUp    

Tuesday Tip: Subscriptions & Notifications

TUESDAY TIPS are our way of communicating helpful things we've learned or shared that have helped members of the Community. Whether you're just getting started or you're a seasoned pro, Tuesday Tips will help you know where to go, what to look for, and navigate your way through the ever-growing--and ever-changing--world of the Power Platform Community! We cover basics about the Community, provide a few "insider tips" to make your experience even better, and share best practices gleaned from our most active community members and Super Users.   With so many new Community members joining us each week, we'll also review a few of our "best practices" so you know just "how" the Community works, so make sure to watch the News & Announcements each week for the latest and greatest Tuesday Tips!   This Week: All About Subscriptions & Notifications We don't want you to a miss a thing in the Community! The best way to make sure you know what's going on in the News & Announcements, to blogs you follow, or forums and galleries you're interested in is to subscribe! These subscriptions ensure you receive automated messages about the most recent posts and replies. Even better, there are multiple ways you can subscribe to content and boards in the community! (Please note: if you have created an AAD (Azure Active Directory) account you won't be able to receive e-mail notifications.)   Subscribing to a Category  When you're looking at the entire category, select from the Options drop down and choose Subscribe.     You can then choose to Subscribe to all of the boards or select only the boards you want to receive notifications. When you're satisfied with your choices, click Save.     Subscribing to a Topic You can also subscribe to a single topic by clicking Subscribe from the Options drop down menu, while you are viewing the topic or in the General board overview, respectively.     Subscribing to a Label Find the labels at the bottom left of a post.From a particular post with a label, click on the label to filter by that label. This opens a window containing a list of posts with the label you have selected. Click Subscribe.       Note: You can only subscribe to a label at the board level. If you subscribe to a label named 'Copilot' at board #1, it will not automatically subscribe you to an identically named label at board #2. You will have to subscribe twice, once at each board.   Bookmarks Just like you can subscribe to topics and categories, you can also bookmark topics and boards from the same menus! Simply go to the Topic Options drop down menu to bookmark a topic or the Options drop down to bookmark a board. The difference between subscribing and bookmarking is that subscriptions provide you with notifications, whereas bookmarks provide you a static way of easily accessing your favorite boards from the My subscriptions area.   Managing & Viewing Your Subscriptions & Bookmarks To manage your subscriptions, click on your avatar and select My subscriptions from the drop-down menu.     From the Subscriptions & Notifications tab, you can manage your subscriptions, including your e-mail subscription options, your bookmarks, your notification settings, and your email notification format.     You can see a list of all your subscriptions and bookmarks and choose which ones to delete, either individually or in bulk, by checking multiple boxes.     A Note on Following Friends on Mobile Adding someone as a friend or selecting Follow in the mobile view does not allow you to subscribe to their activity feed. You will merely be able to see your friends’ biography, other personal information, or online status, and send messages more quickly by choosing who to send the message to from a list, as opposed to having to search by username.

Back to Basics Tuesday Tip #8: Subscriptions & Notifications

This is the eighth post in our series dedicated to helping the amazing members of our community--both new members and seasoned veterans--learn and grow in how to best engage in the community! Each Tuesday, we feature new content that will help you best understand the community--from ranking and badges to profile avatars, from Super Users to blogging in the community. Our hope is that this information will help each of our community members grow in their experience with Power Platform, with the community, and with each other!   This Week: All About Subscriptions & Notifications Subscribing to a CategorySubscribing to a TopicSubscribing to a LabelBookmarksManaging & Viewing your Subscriptions & BookmarksA Note on Following Friends on Mobile   Subscriptions ensure that you receive automated messages about the most recent posts and replies. There are multiple ways you can subscribe to content and boards in the community! (Please note: if you have created an AAD (Azure Active Directory) account you won't be able to receive e-mail notifications.)   Subscribing to a Category  When you're looking at the entire category, select from the Options drop down and choose Subscribe.   You can then choose to Subscribe to all of the boards or select only the boards you want to receive notifications. When you're satisfied with your choices, click Save.   Subscribing to a Topic You can also subscribe to a single topic by clicking Subscribe from the Options drop down menu, while you are viewing the topic or in the General board overview, respectively.   Subscribing to a Label You can find the labels at the bottom left of a post.From a particular post with a label, click on the label to filter by that label.          This opens a window containing a list of posts with the label you have selected. Click Subscribe.   Note: You can only subscribe to a label at the board level. If you subscribe to a label named 'Copilot' at board #1, it will not automatically subscribe you to an identically named label at board #2. You will have to subscribe twice, once at each board.   Bookmarks Just like you can subscribe to topics and categories, you can also bookmark topics and boards from the same menus! Simply go to the Topic Options drop down menu to bookmark a topic or the Options drop down to bookmark a board.   The difference between subscribing and bookmarking is that subscriptions provide you with notifications, whereas bookmarks provide you a static way of easily accessing your favorite boards from the My subscriptions area.   Managing & Viewing Your Subscriptions & Bookmarks To manage your subscriptions, click on your avatar and select My subscriptions from the drop-down menu. From the Subscriptions & Notifications tab, you can manage your subscriptions, including your e-mail subscription options, your bookmarks, your notification settings, and your email notification format.     You can see a list of all your subscriptions and bookmarks and choose which ones to delete, either individually or in bulk, by checking multiple boxes.     A Note on Following Friends on Mobile Adding someone as a friend or selecting Follow in the mobile view does not allow you to subscribe to their activity feed. You will merely be able to see your friends’ biography, other personal information, or online status, and send messages more quickly by choosing who to send the message to from a list, as opposed to having to search by username.              

Back to Basics Tuesday Tip #7: Resources for User Groups

This is the seventh post in our series dedicated to helping the amazing members of our community--both new members and seasoned veterans--learn and grow in how to best engage in the community! Each Tuesday, we feature new content that will help you best understand the community--from ranking and badges to profile avatars, from Super Users to blogging in the community. Our hope is that this information will help each of our community members grow in their experience with Power Platform, with the community, and with each other!   Today's Tip: Resources for User Groups Once you've launched your Community User Group, we are excited to have many resources available that can help you lead, engage, and grow your User Group! Whether it's access to the Microsoft Community Tenant for User Groups, help with finding speakers for your User Group meetings (both local and virtual speakers), and even finding spaces to have your meetings in--we have the resources you need to make your User Group experience be the best it can be!       Microsoft Community Tenant Community Tenant is a free platform where User Group leaders can host virtual events using the Microsoft Teams platform, engage with their communities, share resources, collaborate with fellow organizers, and gain access to best practices and resources. Find out everything you need to know--and how to get started!  Just follow the link: Accessing the Microsoft Community Tenant - Power Platform CommunityNeed Help Finding a Speaker or a Space?We happily provide assistance to our User Groups in finding speakers and rooms for your meetings. Simply fill out the request forms below with as much detail and information as possible, and we will do our best to provide you with the assistance you need! Speaker Requests: https://aka.ms/UGSpeakerOptionsRoom Requests: https://aka.ms/UGroomrequest   Monthly Featured User Group--And User Group Leader We share a featured User Group AND a featured User Group leader here in the community every month. It's our way of sharing how excited we are for what the User Groups are doing around the world and an appreciation for the hard-working leaders who help make them happen. Nominate a User Group doing great work--or a great User Group leader--today! Nomination Form: https://aka.ms/NominateandshareUG

Users online (2,945)