Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Apps - Power Apps Pro Dev & ISV
Answered

FluentUI v9 and virtual

(0) ShareShare
ReportReport
Posted on by 76

v8 gives us the performance benefit of virtual controls. FluentUI v9 is here but represents breaking changes in controls and layout from v8. I am pulled to use v9 because it's the future and v8 because it's virtual.

 

What are thoughts on the roadmap and timing of v9 being supported in virtual (if it can be)?

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: FluentUI v9 and virtual

    Hi @srx_nstratton , 
    Definitely a gray zone...
    I've learned from the theming sample to use a combination of platform-library and package.json dependency.
    (the links are in my first answer in this thread).
    I can only say that it works (it's a little magic 😉), but for now it's only for experiments. I'll wait for the docs to be refreshed with platform-library for Fluent UI 9,  until I use this in production.

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: FluentUI v9 and virtual

    Thank you @cchannon 😍
    It looks very nice  😎!

  • srx_nstratton Profile Picture
    76 on at
    Re: FluentUI v9 and virtual

    @DianaBirkelbach your ToDos's references spec 9.4.0 (does this allow control-type='virtual'?).

     

     <platform-library name="React" version="16.8.6" /> 
     <platform-library name="Fluent" version="9.4.0" />

    and you pull in @fluentui-contrib/react-data-grid-react-window, which use the @fluentui/react-components, but it states a min version of 9.25.1

    "peerDependencies": {
    "@fluentui/react-components": ">=9.25.1 <10.0.0",
    "react": ">=16.8.0 <19.0.0"
    }

     What happens when you use it?

  • cchannon Profile Picture
    4,702 Super User 2025 Season 1 on at
    Re: FluentUI v9 and virtual

    That's really excellent, @DianaBirkelbach  - I especially love your handling of theming: making it easy for other devs to build out custom themes quickly (never seen tinycolor2 before, but that lighten/darken bit is really slick!).

     

    Inspired by this thread, I've got one in progress right now for user notification preferences: "for events A-Z, does the user want Email, In-App, or Push notifications?" I'm using 9.4 for the Accordion and 8 for checkboxes and stacks--it's working out nicely so far!

    cchannon_1-1706540624770.png

     

    I'll ask if my customer is OK with me open sourcing parts of it. 🤞

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: FluentUI v9 and virtual

    Hi @cchannon , 

    I have a virtual PCF based ob Fluent 9 DataGrid. It works, but I wouldn't use it in production for now.
    But still, maybe you want to have a look: https://github.com/brasov2de/ToDosDataGridFluent9

  • cchannon Profile Picture
    4,702 Super User 2025 Season 1 on at
    Re: FluentUI v9 and virtual

    Aaah, so we can use Fluent 9.4, but it is older than current so it only has a handful of components (current release is 9.46):

    cchannon_0-1706132338240.png

    So I guess if you need a datagrid, or a messagebar, or any of a bunch of other common controls the answer is to hybridize 8 and 9? That seems messy, and prone to issues... But then, Dataverse MDAs do it, so maybe not as much of a problem as I think... I'll give it a shot!

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: FluentUI v9 and virtual

    Thank you, @cchannon ! Happy to hear that! 😊 

  • cchannon Profile Picture
    4,702 Super User 2025 Season 1 on at
    Re: FluentUI v9 and virtual

    Nice one, @DianaBirkelbach! I didn't know that one, but I will be using it from now on!

  • Verified answer
    Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: FluentUI v9 and virtual

    Hi @srx_nstratton , 

    @cchannon pointed out the right direction. The only documentation about using Fluent v9 is made for theming.

    I would like to add, that there we see how we can use the virtual components with Fluent v9 (v9.4.0): 

    https://learn.microsoft.com/en-us/power-apps/developer/component-framework/fluent-modern-theming?WT.mc_id=BA-MVP-5004107

    DianaBirkelbach_0-1705998678519.png

    On the other side only the Fluent 8 is documented, where the platform library are listed: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries?WT.mc_id=BA-MVP-5004107

     

    So it is possible to use Fluent 9 in virtual components, but I guess we should consider that as a preview for now.
    On the other side, you can always switch to a supported way in case you have issues with Fluent 9, by removing the Fluent from the platform-library. That way you have a virtual component using React, but you bring your own Fluent version. 

    I know, React version in combination with Fluent 9 could also be an issue; I guess then we would need to switch to standard PCFs. But the change in code between standard and virtual component is not that big.. so it could be a strategy to start with Fluent 9 virtual, because we have a fallback with a small change, in case there are issue.

    But of course, it depends on the project, if we can risk to work with "preview" features.

     

    If you have already the component build with Fluent 8, you don't have to migrate for now. You could only apply the theming from Fluent. Have a look to the "Modern theming API" sample: there are examples of using Fluent 9 (virtual), but also how to theme a Fluent v8 component: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/modern-theming-api-control?WT.mc_id=BA-MVP-5004107

    Hope it helps 😊

     

  • cchannon Profile Picture
    4,702 Super User 2025 Season 1 on at
    Re: FluentUI v9 and virtual

    Yeah, the platform group does seem pretty disorganized on this front, I will agree with you.

     

    V8 is downright ancient in React terms, especially considering the rest of the MSFT world has long since moved past that to v9, and past that to Fluent 2. BUT... there is only so fast this ship will steer and we have to trust they're going slowly because they must and that virtual components will eventually modernize (unlike plugins which are still stuck in C# 4.6.2) 

    Now, ranting aside, there is some clear embrace of v9 already in PCFs, just not where you'd expect. The Theming API object is built specifically for v9, and is a peek at the future when someday Dataverse will offer user theme choices. Until that day, or until there is broader v9 support, it is a nice way to--I guess you could say--'downgrade' the look of v9 so it looks more Dataverse-y. And that is useful, even if it is a bit disappointing.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Leaderboard > Power Apps - Power Apps Pro Dev & ISV

#1
WarrenBelz Profile Picture

WarrenBelz 109 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 82 Super User 2025 Season 1

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 72

Overall leaderboard