Hello! Welcome to the first lesson in our module on Power Apps Component Framework (PCF) Development.
In our previous module, you became proficient at integrating pre-built AI Builder models into your Power Apps and flows. We focused on leveraging existing capabilities to add intelligence to your applications. Now, we're making a significant shift from using components to building them from scratch. This module addresses a topic you've shown a strong interest in: creating fully custom, code-based controls that can radically extend the functionality of both Model-driven and Canvas apps. This is a core competency for the PL-400 exam and a key skill for any Power Platform pro-developer.
Today's lesson is the foundational first step. Our goal is to install the Power Platform CLI and initialize a PCF component project. By the end of this session, you will have your local development environment fully configured and will have created the boilerplate code for your first component.
1. Setting Up Your Development Environment
Before writing any code, we need to set up the necessary tools. As an experienced developer, you're familiar with the importance of a well-configured environment. For PCF development, there are a few key prerequisites.
The official Microsoft documentation provides a clear list of what you need.
Create your first component using Power Apps ...
Please review the 'Prerequisites' section in the Microsoft Learn article titled 'Create your first component'. This will serve as our checklist for the required tooling.
Read the 'Prerequisites' section to confirm the software you need. The key items are: Visual Studio Code Node.js (LTS version is recommended) Microsoft Power Platform CLI .NET Build Tools (or the .NET SDK)
Most of your C# and .NET experience means you likely have VS Code and the .NET tools installed. The new player here is Node.js, which provides the runtime and package manager (npm) for the TypeScript-based tools we'll be using.
2. The Power Platform CLI: Your Central Tool
The cornerstone of modern Power Platform development is the Microsoft Power Platform CLI. This command-line interface, invoked with the pac command, is your one-stop tool for managing environments, solutions, and, most importantly for us, PCF components.
Installing the Power Platform CLI
There are several ways to install the CLI. The official documentation provides the best overview of the options and their cross-platform support. For a seamless development experience, installing the Power Platform Tools for Visual Studio Code is highly recommended, as it integrates the CLI directly into your editor.
Let's turn to the official documentation, 'What is Microsoft Power Platform CLI?', to understand the installation options.
Please read the section titled 'Install Microsoft Power Platform CLI'. Pay close attention to the table comparing the three methods: Visual Studio Code extension, .NET Tool, and Windows MSI. For our purposes, the VS Code extension is the most integrated approach.
To see these installation steps in action, the following video provides a clear visual guide.
How to create a PowerApps PCF control | Tutorial
This video, 'How to create a PowerApps PCF control | Tutorial' by Tiyani 365, walks through the setup process. We'll focus on the section covering the installation of Node.js and the Power Platform CLI.
Watch the segment from 01:59 to 03:47. The video demonstrates installing Node.js and then shows how to install the Power Platform CLI, focusing on the Visual Studio Code extension method we just read about.
Verifying the Installation
Once the installation is complete, you should always verify that the CLI is available in your terminal.
- Open Visual Studio Code.
- Open a new terminal (Terminal > New Terminal).
- Type
pacand press Enter.
You should see a welcome message with the CLI version and a list of available commands, confirming the installation was successful.
3. Initializing Your First PCF Project
With the tooling in place, you are ready to create your first PCF component project. This is done using the pac pcf init command. This command scaffolds a complete project structure with all the necessary files to get you started.
The most important parameters for this command are:
--namespace(-ns): A unique identifier for your components, similar to a namespace in C#.--name(-n): The name of your specific component.--template(-t): Specifies the type of component. The two options arefield(for components that bind to a single column on a form) anddataset(for components that bind to a grid or view).
Let's walk through the official guide for creating a new component.
Create your first component using Power Apps ...
The Microsoft Learn article 'Create your first component' provides a concise, step-by-step guide to initializing a project.
Follow the steps in the 'Creating a new component project' section. This will guide you through creating a directory, opening it in VS Code, and running the pac pcf init command. Note the use of the --run-npm-install flag, which conveniently runs the next required step for you.
After running the pac pcf init command followed by npm install (or using the --run-npm-install flag), your project folder will be populated. The npm install command is analogous to nuget restore in the .NET world; it downloads all the project dependencies defined in the package.json file.
Your terminal output should look something like this:
For your reference, if you're a heavy user of XRM Toolbox from your Dynamics 365 work, know that there is also a tool called PCF Builder that provides a graphical interface over these CLI commands. While the CLI is the core skill to master for the PL-400, the PCF Builder can be a helpful utility for managing components.
Test your understanding!
You have been tasked with creating a custom grid component that will replace the standard "Activities" view on the Account form. Based on what you've learned, how would you modify the pac pcf init command to start this project? Assume you want to use Contoso.Grids as the namespace and ActivityTimeline as the component name.
Show answer
You would change the --template parameter from field to dataset. The full command would be:
pac pcf init --namespace Contoso.Grids --name ActivityTimeline --template dataset --run-npm-install
This tells the CLI to scaffold a project configured to bind to a collection of records (a dataset) rather than a single field.
Conclusion
Excellent work! You have successfully configured your local machine for professional Power Platform development and scaffolded your very first Power Apps Component Framework project. This is a critical milestone and the launchpad for all custom component development.
Key Takeaways:
- Essential Tooling: PCF development relies on Node.js, the .NET SDK, and VS Code.
- Power Platform CLI: The
paccommand is the central utility for creating and managing Power Platform assets from your local machine. - Project Initialization: The
pac pcf initcommand creates a standardized project structure for your component. - Dependency Management:
npm installis the command used to download all the necessary libraries for building and testing your component.
What's Next?
Now that we have a project skeleton, our next step is to understand what the CLI has created for us. In the next lesson, "Implement the init and updateView methods to render the component and respond to data changes," we will explore the two most important files in your new project: the manifest (ControlManifest.Input.xml) and the main component logic file (index.ts). You'll learn how to declare properties for your component and write the initial code to render its user interface.