Pcf 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.

PCF Controls Tips and Tricks : How to skip Linting at Build-Time

Tue, 08 Jul 2025 01:09:42 +0000

Have you ever been unable to properly build a PCF control because of linting errors? Well, lately I have, and it can get really frustrating. Especially when the errors have nothing to do with your code, but are caused by an unexpected failure in the way the PCF framework handles the linting process.

Turns out I’m not alone as other members of the PCF community like Charles Channon have recently flagged linting issues with recent pcf-scripts releases.

PCF Controls Tips & Tricks : How to detect Authoring Mode

Mon, 02 Jun 2025 02:57:10 +0000

When you configure a PCF control on a Dataverse model-driven app, the form designer will try to render the control even though it’s not running in the actual app context.

This usually isn’t a problem, but for complex controls that depend on runtime data, it can cause errors—and even break the form designer.

Moreover, as a PCF developer, you might want to show a simplified or placeholder version of your control in the form designer to help makers understand how it will look when the app actually runs.

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.

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.

PCF Control compile error : Cannot find module 'ajv/dist/compile/codegen'

Tue, 03 Jan 2023 18:09:56 +0000

I was working on a new PCF control project and I encountered an unexpected error when attempting to build the project, even though no custom code had been added yet. (Cannot find module ajv/dist/compile/codegen)

For reference, I’m using the latest version ( at the time of writing) of the Microsoft Power Platform CLI ( 1.21.4+g4869036) and here are the steps to reproduce :

Execute the init method of the pac cli. This will scaffold a new PCF control projects with all the basic dependencies.
Execute npm install to download the dependencies
Try to build the project : npm run build
❌Fails with error : Cannot find module “ajv/dist/compile/codegen”

pac pcf init -ns <Namespace> -n <ProjectName> -t field
npm install
npm run build

The error message is quite straitforward and points toward a node module that cannot be found : ajv/dist/compile/codegen . Upon checking the node_modules directory, even if the ajv module seems present, the compile/codegen part is nowhere to be found.

The PCF Control Framework chooses Esbuild-Loader for Faster Build Time

Mon, 10 Oct 2022 13:45:03 +0000

While I was starting a new PowerApps Component Framework ( PCF) project, I stumbled upon the latest release notes of the framework’s main package ( pcf-scripts v1.18.4). I was stoked 🤩 to see that they improved the performance of the bundling process by switching from babel-loader to esbuild-loader.

Let’s take this opportunity to nerd-out on the bundling process of a PCF control and see if this change really measures up ⌚.

Storybook for PCF Controls - Part 2 : Publish to GitHub Pages

Thu, 29 Sep 2022 00:16:42 +0000

This is the second part of a series on Storybook for PowerApps Component Framework ( PCF) controls, where I take one of my community PCF control hosted on Github (CountryPicker.PCF) and implement a Storybook from scratch.

While the first post, revolved around the setup and authoring process of the Storybook, this one focuses on the publishing steps required to make Storybook static site publicly available from GitHub Pages.

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.

Visual Studio Talk Show

Fri, 08 Apr 2022 03:47:38 +0000

In this episode of the Visual Studio Talk Show, I had the great pleasure to talk (In French) with Microsoft MVP’s Mario Cardinal and Guy Barette.

We talked about the PowerPlatform in general and mostly about my open source PCF control projects.

Visual Studio Talk Show: 0266 – David Rivard – PowerApps Control Framework (PCF) Nous discutons avec David Rivard de PowerApps Control Framework (PCF), un cadre de programmation logiciel permettant de créer des composantes UI pour l’outil Power Apps. Power Apps permet l’écriture d’applications commerciales sans être un programmeur professionnel car il nécessite très peu de code… visualstudiotalkshow.libsyn.com

PCF control - Generate Shields.IO Badges in the PowerPlatform

Thu, 07 Apr 2022 02:49:10 +0000

One of the thing I like the most about PCF controls for the PowerPlatform is the ability to change the normal behavior and rendering of forms attributes to add a new twist to the user experience.

With that in mind, for my latest communityPCF control, ShieldsIO.Badge.PCF, I wanted to bring the ability to render custom (and awesome ) Shields.IO badges to the PowerPlatform.

Using badges in Model-driven or Canvas Apps forms is a great way to provide concise, actionable and visually appealing controls to end users.

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.

PCF Controls - Useful Webpack Plugins

Tue, 16 Nov 2021 04:58:31 +0000

In my last post I explained how to enable custom webpack configurations in a PowerApps Control Framework project. I also showed how to generate the source-map file of the generated PCF bundle.

PCF controls – Custom Webpack configurations

To continue on this track and push things a little further, I want to explore how to enhance the PCF development experience with the use of webpack plugins that can be referenced in the custom configuration file.

PCF controls - Custom Webpack configurations

Wed, 20 Oct 2021 02:06:29 +0000

When developing Power Platform PCF controls, at build-time, Webpack is invoked to bundle the code and dependencies into deployable assets.

While the out-of-the-box configurations are suitable for most of the basic PCF control needs, sometimes, you need to throw your own custom instructions in the game. This is what we are going to cover in this post.

Webpack and PCF

I will not spend too much time on the fundamentals of Webpack, there are tons of great blog post that deep-dives on the matter. But I think its important to understand what Webpack is and how it works in PCF control development.