React on It Must Be Code!

PCF Controls Tips & Tricks: How to Bundle and Resolve Static JSON Files

Sun, 19 Oct 2025 21:21:41 +0000

JSON files are one of the most common and convenient ways to store structured data. They’re lightweight, human-readable, and easy to parse in JavaScript. In PCF Control development, they can be used a quick and convenient way to store and access static data.

In this post, I’ll show you how to easily configure your PCF control projects to bundle static JSON files and resolve their contents at runtime.

How it started

It all started when I began receiving complaints that my open-source Country Picker PCF control had suddenly stopped working properly. After some investigation, I realized the issue came from its dependency on a free third-party service used to query the country data— restcountries.

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

PowerApps Grid Control - How to make Cell Renderers more Generic

Mon, 02 Oct 2023 01:46:28 +0000

The Power Apps grid control is a new and improved version for the data grid control for Power Platform model-driven applications. It introduces a modern data grid user experience and a range of noteworthy features, including the ability to perform inline editing and seamless infinite scrolling of the grid records, amongst others.

Simply implement the Power Apps grid control component on your applications data grids (table views or form subgrids) to unlock up its capabilities.

Storybook for PCF Controls - Part 1 : Set the Story Straight

Mon, 12 Sep 2022 01:43:09 +0000

In the frontend development world, Storybook as emerged as the industry standard to showcase and test UI components.

In this series of posts I will show how easy (and rewarding) it is to implement and publish a Storybook for a PowerApps Component Framework (PCF) project. That way users can have a direct and interactive access to the control without having to install anything on their side.

Part 1, will focus on setting up Storybook and write the stories in the context of a PCF control project.
Part 2, will demontrate how to publish the Storybook to Github Pages on every commit using GitHub Actions.

What is Storybook

In essence, Storybook is a framework that helps web developers express and test frontend workflows. It can be used for building, documenting, and testing UI components in isolation.

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.