Introduction
In this article, we are going to see what PowerApps is and why it is popular in the market. PowerApps is, basically, a development platform for mobile and web apps. It allows “citizen developers” to reach capabilities that were once only reserved for high-end development tools.
PCF (PowerApps component framework) empowers professional developers and app makers to create code components for model-driven apps and canvas apps to provide an enhanced user experience for the users to view and work with data in forms, views, and dashboards.
For more details about what PowerApps is, please read my previous article. What is PowerApps?
![]()
Source: PCF Gallery
Create PCF components
In this article, we will learn how to build a Custom code component that enables users to change the numeric values using a visual slider instead of typing the values in the column.
PowerApps component framework (PCFx)creates code components that can be used across the full breadth of PowerApps capabilities. Unlike HTML web resources, code components are rendered as a part of the same context and load at the same time as any other components, providing a seamless experience for the users.
PowerApps Developers can bundle all the HTML, CSS, and TypeScript or JavaScript files into a single solution package file. Code components can be reused many times across different entities and forms.
Major Steps we need to understand before starting to develop any PCF Components,
- Manifext File
- Index.ts Source Code File
- Custom CSS
- Deployment method using msbuild
The following steps are required to build a PowerApps (PCFx) code component:
Prerequisites
![]()
For this Custom Code Development, you need to install the following components:
- Visual Studio Code (VSCode)
- node.js
- Microsoft Power Platform CLI (Use either the Visual Studio Code extension or the MSI installer)
![]()
Install Node JS
![]()
Power Platform CLI
![]()
Creating a new component project Folder
Step 1: Open a command prompt window. Create a new folder for the project using the following command:
C:\>mkdir demoPCFx
![]()
Step 2: Open your demoPCFx folder inside Visual Studio Code. The quickest way to start is by using cd DemoPCFx and then running code. from the command prompt once you are in the project directory. This command opens your component project in Visual Studio Code.
![]()
Step 3: Open a new terminal inside Visual Studio Code using Terminal -> New Terminal.
![]()
Step 4: At the terminal prompt, create a new component project by passing basic parameters using the command.
pac pcf init --namespace HelloWorldNamespace --name demoPCF --template field
![]()
The command also runs the npm install
command for you to setup the project build tools.
![]()
That’s it, the Folder Structure has been created successfully and you can view the files on your visual studio code editor on left side,
![]()
Manifest File
The control manifest is an XML file that contains the metadata of the code component. It also defines the behavior of the code component. In this tutorial, this manifest file is created under the demoPCF
subfolder.
When you open the ControlManifest.Input.xml
file in Visual Studio Code, you'll notice that the manifest file is predefined with some properties
![]()
Index.ts File
After implementing the manifest file the next step is to define the component logic using TypeScript. The component logic should be implemented inside the index.ts
file.
The index.ts
file in the Visual Studio Code, you'll notice that the four essential functions are predefined. Now, let's implement the logic for the code component.
Section 1: constructor.
import {IInputs, IOutputs} from "./generated/ManifestTypes";
export class demoPCF implements ComponentFramework.StandardControl<IInputs, IOutputs> {
/**
* Empty constructor.
*/
constructor()
{
}
/**
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
*/
Section 2: Add control initialization code
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
{
// Add control initialization code
}
Section 3: Add code to update control view
/**
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void
{
// Add code to update control view
}
Section 4: Add code to cleanup control
/**
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void
{
// Add code to cleanup control if necessary
}
To run, in the command bar, type:
npm run build
![]()
Now run:
npm start
![]()
This will open the component in local browser
![]()
After npm install, you will need to run this below command to generate ManifestDesignTypes.d.ts file in this directory
npm run refreshTypes
CSS Section
- Create a new
css
subfolder under the demoPCF
folder.
- Create a new
demoPCF
.css
file inside the css
subfolder.
- Add the following style content to the
demoPCF
.css
file:
![]()
Debug
To debug the component use the below command in Terminal
npm start watch
Build and Package
Let’s package and deploy this new control.
Create a new folder called Solutions in the demoPCF directory and run the command:
![]()
pac solution init --publisher-name developer --publisher-prefix dev
Navigate into the Solutions Folder using cd command and run the above code
![]()
Now solutions Folder has created files
![]()
Next, we need to add a reference to where the component is. Run the command below
pac solution add-reference --path C:\demoPCF\
![]()
Now run below in the Solutions directory
msbuild /t:restore
If you find msbuild does not exist, you can find it in your Visual Studio directory, e.g.
C:\demoPCF\demoPCF\Solutions>"C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exe" /t:restore
![]()
![]()
Ok we have done almost everything and the final step is run the following command again
msbuild
If you have any error run the below command
"C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exe"
![]()
![]()
Finally build is ready and we can check our zip package in this below location
Solutions\bin\debug location
![]()
Now let’s import this into Dynamics 365 / PowerApps. Log into https://make.powerapps.com/
Please check my previous Blog how to import into Model Driven APPs.
Adding code components in model-driven apps
To add a code component like a linear input component, follow the steps mentioned in the article
https://www.c-sharpcorner.com/article/import-powerapps-component-framework-pcfx-into-model-driven-powerapps/
References:
Please check the below link for more information
https://docs.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript#implementing-manifest
Conclusion
PowerApps gives you the ability to connect with all kinds of data, which is not only available with your Tenant but connected to it via the Data Management Gateways.
PowerApps is truly the future of building custom forms and then making them available on the mobile devices for your organization.
Now, in some cases, the PCF.Gallery component will not contain a ZIP solution. We will look at how to install these in a future post. We must use PowerApps CLI to import the component in upcoming videos.
Was my article helpful? If yes, please let me know and if not, please explain what was confusing or missing. I’ll use your feedback to double-check the facts, add info and update this article.