Fluentui on It Must Be Code!

How to Get PCF Controls Ready for Dark Mode in Model-Driven Apps

Fri, 05 Apr 2024 04:03:22 +0000

Although not officially released, there are strong signals that the support for Dark mode 🌚 is coming very soon to Power Platform Model-Driven apps.

Recent investments made in the platform like the ’ New look’ that leverages the Fluent 2 design system are paving the way to Dark Mode.

🔗 Adapting PCF Controls for Model Driven apps New (Modern) Look

🔗 Modern, refreshed look for model-driven apps - Power Apps | Microsoft Learn

PCF Controls with FluentUI v9 - Avoid DOM id collisions

Tue, 16 Jan 2024 02:24:28 +0000

Recently, while developing a PCF control with the FluentUI React v9 library, I encountered a rather unusual and annoying runtime display bug. Its resolution ended up shedding light on an important concept that had previously escaped my attention and I thought it deserves its own blog post.

🤒The symptoms

The control I was developing is my latest community PCF control, the FluentUI Month Picker.

🔗FluentUI Month Picker | PCF Gallery 🔗 GitHub repo : drivardxrm/FluentUI.MonthPicker.PCF

Adapting PCF Controls for Model Driven apps New (Modern) Look

Tue, 17 Oct 2023 01:59:13 +0000

If you’re a user of a Power Platform’s model-driven app, you’ve likely come across the ’ Try the new look’ switch appearing on your app header.

Indeed, toggling this switch will result in the platform adopting a modern Fluent Design System (a.k.a. Fluent 2) for rendering model-driven form elements such as fields and command bars.

While this evolution is undoubtedly a positive and necessary step for the platform as a whole, it can present several challenges for PCF Control authors aiming to ensure their controls seamlessly blend with the out-of-the-box UI, delivering a polished user experience.

Develop PCF Controls with FluentUI React v9

Fri, 26 Aug 2022 04:50:52 +0000

Microsoft recently unveiled the first stable version of FluentUI React v9( @fluentui/react-components). This new edition of FluentUI is the result of joint efforts from the Office and Teams product teams to streamline their respective React front-end libraries into one component framework.

To celebrate this 🎉, I have released 2 community PowerApps Control Framework ( PCF) Controls that targets this new library.

In this post I will reflect on my experience authoring PCF controls with this new set of components and highlight the main differences with prior versions.

PCF Controls - Tree-Shaking For Better Bundle Size

Mon, 25 Jul 2022 02:29:08 +0000

Building modern front-end controls and application requires great care to keep the size of the assets as low as possible. The development of PowerApps Control Framework (PCF) controls doesn’t fall short from this rule.

In this post I will show how to optimize the tree-shaking process and reduce thebundle size of PCF controls with simple adjustments to module resolution of the Typescript configuration file.

How I got there

After seeing this tweet from Scott Durow that announced the release of FluentUI React v9 , I felt the urge and I immediately started a new PCF control project that targets this new library.

Related Record Filtering with the Lookup Dropdown PCF

Wed, 09 Feb 2022 02:37:48 +0000

In the latest release of the LookupDropdown PCF control for Dataverse, I have added a new feature that adds support for related record filtering, hence the ability to filter the values of a dropdown in real-time based on the value of another lookup field. When rendered, this can produce nice cascading effect as seen below.

In this post I will show how to configure the PCF control for this scenario and dissert on what’s happening under the hood to make the magic happen.

Better UX with a Lookup Dropdown PCF Control

Thu, 06 Jan 2022 02:35:50 +0000

One of the most anticipated feature of the PowerApps Control Framework (PCF) last year was the Lookup datatype support. Hence the ability to bind a PCF control to a Lookup field in a Dataverse Model-Driven form to customize it’s behavior.

The feature was released last summer (see official post) and the first idea that came to my mind was to create a PCF control that renders a lookup field as a dropdown list instead of the of the out-of-the-box lookup selector.