Blog, Development

Updating PCF Controls to support new UI

In this post, I will share my experience updating one “Lookup to Optionset” PCF control I developed a while ago. You can check the video and/or source code if you are unfamiliar with it.

Let’s check Microsoft Learn

Here are a few articles and examples you can check for educational purposes:

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/fluent-modern-theming

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/modern-theming-api-control

https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/FluentThemingAPIControl

I went through examples and decided to use the “Fluent’s v8 to v9 migration package” approach. After some time I got it working but the dropdown didn’t look like Model-Driven-App native control. On top of it, the bundle of PCF control was quite heavy and I had to use the tricks I described in this blog post to make it smaller. I was not satisfied with the result so I had to look for a solution somewhere else.

Let’s check what is available online

I remember that David Rivard wrote a blog post on a similar subject (if you haven’t subscribed to his blog yet, check it out, the content is amazing!).

Based on what I saw in the code – depending on the property fluentDesignLanguage of the Context – control rendered one of 2 separately developed and styled-components – so one for Old UI (FluentUI8) and the other for new UI (FluentUI9). I decided not to reinvent the wheel and used a similar approach in my code.

Component architecture

  • RecordSelector contains the “proxy” component that is used to first query all the records available for the entity and then depending on the currently active UI render one of 2 components available
  • IDropDownProps contains a “properties” interface that’s common for both UI components
  • DropdownOld and DropdownNew are UI components that will render the version of UI that corresponds to the current UI

Usage of FluentUI8 and FluentUI9 in one component

The next question I asked myself was if it is possible and supported to have both UI frameworks inside the same component. Here is what I found in the “React controls & platform libraries” article:

Based on what I have tried so far – it works but one of the Fluent UI bits will be added to the final bundle.js pretty much how it was done for the old (HTML type of controls).

Styling

To pick up the current theme from the PCF control context the following code can be used:

When the ‘theme’ is ‘undefined’ it means that the old UI is used. Otherwise, a new UI is used. In this post, I will provide instructions on how to style the component New UI MDA way.

The styling approach has drastically changed compared to the previous version. Check this post to see the approach used now  for styling – https://react.fluentui.dev/?path=/docs/concepts-developer-styling-components–page

The only good way I found to eliminate differences between OOB FluentUI9 components and the MDA New UI version is to investigate the CSS of the component using Browser Developer Tools (if you have a better idea or a way – please leave a comment under this post). The good thing about FluentUI9 is that CSS properties contain references to exact references to the theme, check the following demonstration:

That’s how I ended up with the following styling:

Here is what the result of full conversion looks like (Old UI, New UI, and New UI with the dark theme enabled):

Full source code of PCF component is available in my GitHub repository – https://github.com/AndrewButenko/FluentUITheming

2 Comments

  1. Look cool!. I’d like to use the one you made. Getting it from github, but im not sure what other dependecies should i load other then : “npm install react react-dom @fluentui/react-components”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.