Introduction to Power Apps component framework

Completed100 XP

Microsoft Power Apps component framework enables you to create reusable code components that you can use within your Power Apps applications and Power Pages websites. The component framework empowers developers to build code components when the out-of-the-box components don't fit an app maker's needs. Code components are visual controls that help you create a custom user experience. These components can also include business logic that complements the visualization to enforce rules unique to the scenario you're implementing.

For example, an existing app detail form might resemble the following image.

However, if you reconfigured your app to use custom code components, your app might look something like the following image.

Before the Power Apps component framework existed, you would have used HTML web resources to provide any custom presentation to an app's form. Now, you can use a more modernized framework that allows you to expose capabilities to your app that would otherwise be impossible to access or, even worse, be unsupported by Microsoft.

Power Apps component framework advantages

Power Apps components are built on top of a robust framework that supports modern web practices. As a result, a few of the advantages are:

Access to a rich set of framework APIs that expose capabilities like component lifecycle management, contextual data, and metadata.

Support of client frameworks such as React and AngularJS.

Seamless server access through Web API, utility and data formatting methods, and device features like camera, location, and microphone.

Optimization for performance.

Reusability.

Use of responsive web design principles to provide an optimal viewing and interaction experience for any screen size, device, or orientation.

Ability to bundle all files into a single solution file with other app resources.

Types of components that you can create

Field - A custom control for a field on a form. For example, you could use a custom code component to render a slider instead of a simple text box to input a number. The slider could have custom business logic that limited the stops on the slider based on other data available and bound to the component.

Dataset - A custom control to display rows of data. For example, you could build a daily scheduler code component instead of a common grid with rows and columns to display today's appointments. The code component could include features like drag and drop to reschedule appointments.

Creator Kit components

The Power Platform Creator Kit is a collection of several commonly used Power Apps component framework controls. Additionally, the kit includes a set of templates and other utilities to help improve developer productivity. All of the components included use the Fluent UI framework to provide consistency. These components can be ready to use or provide inspiration for code components you might build. You can find all the source code for the components on GitHub.

Community components

The Power Apps community has been active in building open-source code components and sharing them with others. For example, validating user input against a regular expression is a common requirement. You could write client script to perform this validation or even write and use your own Power Apps code component. But it might be beneficial for you to check if someone else has already solved this problem for you. Numerous samples can be found at PCF Gallery.

Where to find help

If you encounter areas where you need assistance, the best place to start is the Power Apps component framework, ALM & Pro Dev community forum. There, you can find a wealth of questions and answers on a wide variety of topics, and you can submit your own questions as well.

Power Apps component framework architecture

Completed100 XP

You can implement code components using HTML, CSS, and TypeScript. While you aren't required to use any particular UI Framework, React and Fluent UI are popular choices.

Component composition

The following image shows the three key areas of a Power Apps component: a manifest input file, its implementation, and any other resource files that the component might need.

A manifest is used to identify any properties that are available for use by the application hosting the component. When app makers use the code component, they can statically set a value for the properties. Or they can dynamically bind it to one of the available data columns in the application. Properties allow the application and the component to communicate about data without the app having to understand the implementation of the component.

When you create a component, your code needs to implement an interface that provides a consistent way for the hosting app to interact with your component. Your code component accomplishes this by implementing the StandardControl interface.

export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}

Power Apps component life cycle

When you develop a component, you implement all or some of the StandardControl interface methods in the following table depending on your component requirements. These methods allow the hosting runtime to manage the life cycle of the code component.

Expand table

MethodDescription

init	Required. Use this method to initialize the component instance. Components can kick off remote server calls and other initialization actions in this method. You can't initialize dataset values with this method; you must use the updateView method.
updateView	Required. This method is called when any value in the component’s property bag has changed. If you started any load data requests in the init method that might not be finished, your code must handle this state and provide a visual loading indicator.
getOutputs	Optional. Called by the framework before the receipt of new data. Use this method when dynamically managing bound properties in a control.
destroy	Required. Invoked when the component is to be removed from the DOM tree. Use the destroy method for cleanup and release any memory the component uses. For example, if you're using React, use ReactDOM.unmountComponentAtNode inside the destroy method. This prevents any performance issues caused by code components being loaded and unloaded within a given browser session.

These methods are invoked through a framework runtime process in a standardized life cycle, as shown in the following illustration.

At the top of the image, the framework calls your component's init() function. If your component is interactive, you also need to notify the host that the component's output has changed by calling the notifyOutputChanged method.

The framework runtime then calls the getOutputs method to get values for all bound properties of your component.

The runtime then notifies the host, which validates the output. If the output is valid, it calls the updateView method on your component. If it isn't valid for whatever reason (for example, a business rule found the new output invalid), it calls your updateView method and passes the old value along with an error message. In either scenario, your component can update the user interface and display an error message if appropriate.

Next unit: Power Apps component tooling

Power Apps component tooling

Completed100 XP

When you build a Power Apps code component, you use a combination of tools to streamline the steps required from start to finish.

Let's take a look at some of the tools that we use.

Power Platform CLI

The Power Platform CLI (command-line interface) is a developer-focused command-line tooling that provides commands for building custom code. This currently includes code components and plug-ins. The tool also has environment admin commands available for managing environments. You can also use the solution and package commands to implement application lifecycle management with solutions.

The CLI only takes a few steps to install. You can ensure you have the latest version by using the following update command:

pac install latest

When you start to build your code component, you use the CLI to scaffold your initial files using a template. The following command is an example of initializing a component using the field template:

pac pcf init --namespace Contoso --name Slider --template field

One of the prerequisites of installing the CLI is to install node package manager (npm), which you use to manage dependencies and build your code component. When you use the init command, it creates a package.json file configured with the dependencies for your code component and several commands like build that you use during the development of your component. The first npm command you run after initializing the component is install. This command downloads all the libraries needed to support the Power Apps component framework.

npm install

You can also request that when the initialization runs, it also runs the npm install by adding --run-npm-install to your init command options.

pac pcf init --namespace Contoso --name Slider --template field --run-npm-install

As you develop your code component, you can check for any code issues using the following build command:

npm run build

This command validates your manifest, run the TypeScript transpiler, and let you know of any problems.

A test harness is also available so you can test your code component locally without having to deploy it to an environment. You can launch the test harness with your code component using the following start command:

npm start

You can also enable watch mode by using npm start watch command. If you make changes to your code in watch mode, the test harness automatically picks them up without restarting.

To speed up your testing of code components, the CLI can authenticate to your development environment and push your code component for testing in real apps. The following command would build and push the latest version of your code component to your currently configured Dataverse development environment.

pac pcf push --publisher-prefix dev

Tools for Visual Studio Code

The Power Platform extension for Visual Studio Code brings the Power Platform command line interface (CLI) to work within the context of the editor environment. You can install the extension from the Visual Studio Marketplace. Once installed you can use the CLI pac command from the terminal window.

Tools for Visual Studio

You install these tools either using the standalone install or as part of installing Visual Studio. You can find them at Download Visual Studio 2022 for Windows & Mac.

The msbuild command is used when you package your component as part of a Power Apps solution for deployment into a Dataverse environment. For example, the following commands initialize a new solution for your component and create a msbuild project file that manages creation of the output solution files during a build.

pac solution init --publisher-name Contoso --publisher-prefix contoso ‑‑outputDirectory vssolution

To have your code component packaged in the solution, you must add a reference to your component. This ensures that when a build is run your component is included in the output solution that is generated. The following command adds the reference:

pac solution add-reference --path \<path to your Power Apps component framework project\>

You can use the msbuild command to generate the solution files with the solution references configured. The following command runs the build the first time:

msbuild /t:build /restore

After the first build, you can run the msbuild command to regenerate the solution files. The generated solution files are located in the \bin\debug\ (or \bin\release) folder after the build is successful. Once the output zip file is ready, you can either manually import the solution into Dataverse or automatically deploy it using the Microsoft Power Platform Build Tools.

Choose an IDE

We recommend using Visual Studio Code or Visual Studio to write your components. But you can use any IDE you choose to build custom Power Apps code components.