PCF Controls with REACT: Beginner's Guide

PowerApps Component Framework (PCF) allows developers to create custom controls that enhance the functionality and user interface of Microsoft PowerApps. By leveraging React, a powerful JavaScript library for building user interfaces, developers can create highly responsive and efficient PCF controls.

In this blog, we’ll go through the basics of building PCF controls with React, from setup to deployment in PowerApps. Whether you’re a seasoned developer or new to the field, you’ll find practical insights to enhance your PowerApps projects.

Before we dive in, I strongly encourage you to visit the PCF Gallery website and explore the incredible controls created by the developers. These examples showcase the amazing features that can be achieved using PCF controls and serve as inspiration for your own projects.

Set Up Development Environment

Before you start building PCF controls with React, ensure you have the necessary tools installed on your machine:

Node.js: LTS version is recommended
Visual Studio Code (VS Code): It’s recommended to use an editor like Visual Studio Code for a better coding experience.
Microsoft Power Platform CLI: Use either Power Platform Tools for VS Code or Power Platform CLI for Windows to install Power Platform CLI.

Create New PCF Control

Once your environment is ready, create a new PCF control project.

From visual studio code, open a new folder and navigate to the terminal using ctrl + `
Run the following command to create a new PCF control project:

pac pcf init --namespace SampleNamespace --name ReactSample --template field --framework react --run-npm-install

--namespace specifies the namespace for your control.
--name specifies the name of your control.
--template specifies the type of control (e.g., field or dataset)
--framework (optional) specifies the framework for the control.
--run-npm-install installs the required node modules for the control.

3. Running the above pac pcf init command sets up a basic PCF control with all the required files and dependencies, making it ready for you to customize and deploy to PowerApps.

Build PCF Control

Now that our control is created, let’s build it and see how its looking.

Execute the following command to build your project:

npm run build

Note: You may get an error saying cannot find module ajv/dist/compile/codegen after executing the build command.

To resolve that, install the ajv npm module in your project using npm install --save-dev ajv and then again build the project using npm run build

2. After successful build, execute the following command to run your PCF control in the local browser and see how it’s looking.

npm start watch

Great Work…with only 3 commands you have successfully created a basic PCF control that displays a Hello World message to the users.

Project Structure

Before we dive into deploying our PCF control to PowerApps environment, let’s take a moment to review the various files that are created and understand their purposes.

ControlManifest.Input.xml

The ControlManifest.Input.xml is the manifest file where you define the configuration and properties of your PCF control. It includes information such as the control’s name, version, description, and the data types it will accept.

Key Sections:

Control: Contains the ID, namespace, and version of your control.
Property: Defines the properties your control will use. Each property includes attributes like name, type, and binding.
Resources: Specifies the resources (like CSS and JavaScript files) your control will use.

HelloWorld.tsx

The HelloWorld.tsx file contains a simple React component that is being called in the index.ts file.

Imports: Brings in React and required modules.
IHelloWorldProps Interface: Defines the expected name property of type string.
Component Definition: A HelloWorld class extending the React component class that returns the HTML Label element with the value of the name property

Index.ts

The index.ts serves as the entry point for your PCF control’s business logic. It is where you define the behavior and interactions of your control.

Key Sections:

Imports: At the top of the file, you import necessary modules and types. These might include interfaces such as IInputs and IOutputs, which define the input and output types for your control.

Lifecycle Methods:

init: This method is called when the control is initialized. It is used to set up the control, including event handlers, and to render the initial UI.
updateView: This method is called whenever the control needs to be updated, for example, when the control's data or properties change. It is used to re-render the UI with the latest data.
getOutputs: This method returns the current value of the control's outputs, which can be used by other components or stored in the database.
destroy: This method is called when the control is removed from the DOM. It is used to clean up resources, such as event handlers, to prevent memory leaks.

In our control, the updateView method is called when the page loads. This method renders the HelloWorld component from the HelloWorld.tsx file. The HelloWorld component is configured with a property named name, which is set to 'Hello World'. This results in a message box displaying the text 'Hello World' on the page.

Try changing the name property value from ‘Hello World’ to something else and you can see the value being updated in the browser.

package.json configuration file manages the dependencies and scripts for your project. It lists the libraries your project depends on and defines scripts for building and testing your control.

node_modules directory contains all the Node.js modules installed based on your

package.json dependencies. It's automatically generated and typically excluded from version control.

Deploy PCF Control to PowerApps

Now that the control is created, let’s go ahead and deploy our control to the Power Apps environment.

Build the PCF control.

npm run build

2. Create a connection with your power apps environment,

pac auth create --environment "{Your Environment Name}"

3. Deploy the control to your environment,

pac pcf push

After successful deployment, go to make.powerapps.com:

Select Your Environment: Choose the environment where you deployed the control.
Navigate to Solutions: Go to Solutions > Default Solution > Custom controls
Check Your Control: Your PCF control should appear in the list.

Add PCF Control on the Form

We can now add our custom PCF control on any form fields.

Open any entity form from the Power Apps form designer, select a field and navigate to field properties and click on Add Component button.

Go to Get More Components and search for the custom PCF control ReactSample that we just created and add it to the list.
Then click on the control, add it to the field and Save & Publish.

With these steps completed, you should see your “Hello World” message displayed in the field, confirming that your PCF control is functioning as expected.

Conclusion

By following this guide, you’ve learned how to set up your development environment, understand the project structure, and deploy a basic “Hello World” PCF control.
Now that you have a solid foundation, I encourage you to dive deeper into PowerApps Component Framework (PCF) and React. These powerful technologies allow you to create dynamic, interactive, and highly customized solutions. By mastering PCF, you can build seamless controls for your business processes, and with React, you can design sophisticated user interfaces.

Resources

To further enhance your skills in React and PCF controls, do explore the following resources where you will get in-depth knowledge about creating React components and using them to create dynamic and more advanced PCF controls:

Happy Coding…

PCF Controls using REACT— Get Started

Table of contents