What is a PCF Control?
In Power Apps, you build low-code applications using various pre-built components such as text boxes, dropdowns, grid views, and more; also called controls. Sometimes these standard controls don’t fully meet your needs. In such cases, PCF controls come in handy.
PCF stands for Power Apps Component Framework, which is the development framework within Power Platform that allows you to create your own (advanced) UI components using TypeScript, HTML, and CSS.
A PCF control is therefore a custom-made component that is reusable across projects and can be used in both model-driven apps and canvas apps.
Why and when to use a PCF Control?
Although standard controls are sufficient in most scenarios, there are, as mentioned earlier, situations where the complexity requires more customization. In those cases, it’s best to use PCF controls.
Some examples:
- You want an interactive component, such as a calendar or chart visualization.
- You want to use a specific component that isn’t available in the standard library, such as a flip card, rating control, or file preview.
- You want more control over layout, behavior, and styling of your components (for example, to apply a consistent brand design).
Benefits of PCF Controls
- Full control and freedom: Build and customize as you wish. You can work not only with your own code but also with imported third-party PCF controls and tailor them completely to your needs.
- Easy to use: PCF controls behave like built-in Power Apps components.
- Reusable: A created PCF control can be imported across different projects and doesn’t need to be rebuilt every time.
Getting started with PCF Controls
Where can you find PCF Controls?
You can build PCF controls yourself, but there are also various libraries where existing PCF controls are available for download. Always make sure to research the reliability of your source, since these are open-source controls. There are both free options (for example, PCF Gallery or GitHub) and commercial libraries (for example, Resco). Whenever possible, choose verified libraries, as their packages are better maintained and updated.
How to import and use PCF Controls?
Importing a package:
- Go to make.powerapps.com and select your environment.
- Click on “Solutions” and then select “Import Solution” at the top.
- Select your downloaded .zip file and click “Next”.
Using in model-driven apps:
- Open the form of your entity.
- Click on “Components” on the left, then “More components”.
- Drag the desired PCF control onto your form.
- Configure its properties and click “Done”.
Using in canvas apps:
- Open the editor of your canvas app.
- Click on “Insert” and then “More components”.
- Go to the “Code” tab.
- Click “Import” and select your PCF control.
- After import, drag the component onto your screen.
- Configure properties such as data bindings.
And that’s how you implement a PCF control.
Building your own PCF Control (general explanation):
What do you need?
- Visual Studio Code
- Node.js (version ≥ 14)
- Power Platform CLI
- TypeScript knowledge
Step 1:
Install the tools: Visual Studio Code, Node.js, and Microsoft Power Platform CLI.
Step 2:
Create a folder for your project.
Navigate to it via Visual Studio Code and run the following command to initialize your project (this generates the base structure):
- pac pcf init –namespace MyNamespace –name MyNewControl –template field
Step 3:
Develop your component the way you want.
Edit the files in index.ts and ControlManifest.Input.xml.
Use your TypeScript knowledge to write the control logic and optionally add styling with CSS.
Step 4:
To test your component, run the following command first:
- npm run build
Then:
- npm start
You can also export your component to a solution file with:
- pac solution pack –zipfile <output_zip_pad> –folder <project_folder_pad>
Import the solution .zip through the Power Apps portal into your environment to see your custom PCF control in full action.
And voilà, you’ve successfully created and implemented a PCF control.
Conclusion
PCF controls take your applications to the next level. Whether you choose an existing control or build one yourself, they give you the freedom to create professional, interactive, and unique user experiences. So don’t forget to occasionally browse the available libraries or develop and share your own creative solutions!
