How to use PCF components in Power Apps how to use 19

Power apps components framework – briefly PCF – allows you to create complex customs components using traditional web development tools such as HTML, CSS, and Javascript.

When making a new PCF project, you can choose from two types of control: Standard control And Reacting virtual controls. For extraordinary ingredients, the reaction is often a good choice as it summarizes most of the heavy domesticles manipulation. But, when you are using the reaction with the PCF, you are currently limited to 16 reactions to the canvas apps and react to 17 reactions to the model -driven apps.

This does not mean you Can’t Use a new version – but to do so means choosing virtualization support. That trade is generally acceptable for many PCF components.

In this article, I show you how to connect the latest version of the React (V19) with your PCF component. We will install the necessary dependence and form a component to take full advantage of the latest version of the reaction.

This article assumes that you:

• How to use PACCLI to make PCF projects.

• Are comfortable using command line and code editor (eg, VS code)

• Learn the basics of reaction

• Have some experience with PCF development

Note: You do not need access to the power platform environment unless you want to deploy the ingredient. It would be enough to follow the built -in test control along with this article.

In this tutorial, you will:

Create a PCF project

Creating PCF Project L you, you will use PACC. If you have not yet installed it, follow the instructions Here.

From the directory of your choice, create a new folder for this project, and then open your terminal and drive:

pac pcf init -ns SampleNameSpace -n SampleComponent --template field

Once it is finished, drive:

npm install

It installs dependence on a default project.

So why did we not use --framework Flags to explain the reaction during the project creation? Because this flag has established a react virtual control, which only supports the reaction 16/17. Instead, we are building a standard control and reacting ourselves.

Install the reaction dependent

Reaction 19 to use LOY’LL, you will need four dependents:

• react

• react-dom

• @types/react

• @types/react-dom

These provide type script typing for the last two reactions. Install the above -mentioned dependence:

npm install -D react react-dom @types/react @types/react-dom

You can confirm the installation by seeing package.json File in the project.

Although it is not necessary for what we do, but to use some new reaction features, you may need to adapt it compilerOptions I tsconfig.json To add the line below:

"jsx": "react-jsx"

What is here tsconfig.json Should look like adding a file jsx Line:

Create a non -reaction button

Let’s confirm that everything works before our reaction is introduced.

From the command line, run:

npm run start:watch

It may take a moment. It will open a browser that shows your PCF test. You will see an empty screen. It is expected – we have not yet offered anything.

Open index.ts I SampleComponent The folder is a class in the file that enforces the PCF standard control interface. Let’s create a basic non -react button.

Update init In index.ts File like this:

public init(
    context: ComponentFramework.Context,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
): void {
    
    const btn = document.createElement('button');
    btn.textContent = 'Click me!';
    container.appendChild(btn);

    
    btn.addEventListener('click', () => {
        alert('Button clicked!');
    });
}

Now, go back to your test control. You should see a button. Clicking on this should show alert.

Create a reaction button

Next, let’s change your simple domestic reaction.

Delete the button code from init()Excluding, leaving init Method empty.

Then, create a new file: Button.tsx. In Button.tsxAdd code below,. This component will accept a label prop and a onClick Make sure the event is exported to this function.

export default function Button(props: { label: string; onClick: () => void }) {
    return {props.label};
}

Add the reaction button to the PCF component

I index.tsUpdate the file:

1. Export createRoot By react-dom/client

2. Import Button Ingredient

3. Rander Button Ingredient

Here is the least example of:

import { createRoot } from 'react-dom/client'; 
import Button from './Button'; 

export class SampleComponent
    implements ComponentFramework.StandardControl
{
    constructor() {
        
    }
    public init(
        context: ComponentFramework.Context,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): void {
        
        const root = createRoot(container);
        root.render(
            Button({ label: 'React Button', onClick: () => alert('React Button Clicked!') })
        );
    }
    
}

Now you should see the “react button” in the browser. Clicking on this will begin a warning.

When the PCF component is updated to submit the reaction button

Many PCF components receive dynamic input values. If the inputs change, we want the reaction component to be re -elected. It is that place updateView() It comes in. updateView() When the PCF property bag changes, it is dynamic.

Let’s move the rendering logic init() to updateView().

Before, imported Root By react-dom/clientAnd start root As a class property.

import { createRoot, Root } from 'react-dom/client'; 

export class SampleComponent implements ComponentFramework.StandardControl {
    root: Root; 
    constructor() {
        
    }
    
}

Then, edit init() To set this.root Toward the root created by the reaction createRoot Transfer the method from the rendering logic init For a method updateView()Replace, replace root With this.root.

public init(
    context: ComponentFramework.Context,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
    ): void {
        this.root = createRoot(container); 
    }

public updateView(context: ComponentFramework.Context): void {
    
    this.root.render(
        Button({ label: 'React Button', onClick: () => alert('Button Clicked!') })
    );
}

With the aforementioned setup, when a PCF component’s property bag changes, the reaction will now reproduce your button.

Wrap

Now you have created a PCF component that uses the latest version of the rect! By manually installing and forming the reaction, you avoid the limits of the Microsoft Built -in React Controls.

Although this setup does not support virtualization, for many components that have modern tooling and fair trade for maintaining.

If you are making PCF ingredients out of simple dominant manipulation, your developmental workflow and UI can be a powerful way to improve flexibility.

Enjoy this article? I regularly write about low code, development patterns and practical tech topics Scriptted bytes dot com