Unanswered

FluentUI v9 and virtual

(0) Share

Report

Posted on by srx_nstratton

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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (10)

Answers (1)

cchannon 4,702 Moderator on at

Like (1)

Report

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.

Was this reply helpful? Yes No
Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (2)

Report

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

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 😊

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report

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

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

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

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report

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):

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!

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report

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

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report

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!

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

Was this reply helpful? Yes No
srx_nstratton 76 on at

Like (0)

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

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

Thank you @cchannon 😍
It looks very nice 😎!

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No