Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs

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.