Getting React and Office UI Fabric work with PowerApps component framework

PowerApps component framework has been in public preview for a while now. While it allows you to create wonderful customizations, you may want to make use of React and Office Fabric UI for your components. In this article, we are going to show you how.

First, you need to install PowerApps CLI and then scaffold a component:

pac pcf init --namespace TheNetworg --name PCFReact --template field

Next, you need to add React into your project. Start with adding the packages (React and ReactDOM) via npm:

npm install react@16 react-dom@16

Next, you need the component to actually carry the library with itself and load it if not available. In order to properly include the library, you need to go to the ControlManifest and modify the resources element:

Once you have this done, you can proceed with creating a sample React Component like this (control.tsx in the same directory where index.ts is):

Next you have to modify index.ts in order to render your custom React Component. Simply import your create control:

Then in init, all you have to do is call the render method to render the created component:

Yay! Now we have React working within PCF!

Lets take it a step further – lets add support for Office Fabric UI! To start with, you need to add Office Fabric UI via npm:

npm install office-ui-fabric-react@6

Tip: When including different versions, make sure that React, ReactDOM and Office UI Fabric React is compatible with each other (I spent about an hour trying to figure out what’s wrong).

Next, you need to modify the ControlManifest to include the library (and change the load order):

Next we go back to control.tsx and modify it to include Office Fabric UI and add some component:

And then all you have to do is to call it from index.ts:

Once you run the control, you will end up with Office Fabric UI control working!

Great! What about changing index.ts to index.tsx? By default, it doesn’t work, but if you want it to work, you have to do a little hack. You have to go to the pcf-scripts module (node_modules\pcf-scripts\controlcontext.js) and modify the line 34 (at the time of writing) to include .tsx files:

Now, you can have index.tsx file and render the components like you are used to in regular React apps:

Sidenote regarding the resource loading:

In some posts, you can find another way to add React support by forcing the use of React by adding it into the rendering template. While this is going to work – because PowerApps UI is built in React, there is no guarantee that React and other dependencies will be available (like Office Fabric UI).

Also, internally, Dynamics has a way to figure out the dependencies in a single page for multiple components (and load them only once – super smart!), so you should be definitely using the manifest way, rather than relying on React and other libraries being actually present on the page.

Footnote: This article doesn’t demonstrate end to end integration (input and output), however it should be super simple after this point.

Author: Jan Hajek

I am Honza, hi. @hajekj | https://hajekj.net

Leave a Reply