Introduction

PCF stands for power apps component framework. This allow developers to create reusable component that can be used in Model Driven App and Canvas App.

The PCF control is of two types as below:

1. Field: When we want to create control at attribute level.

For e.g. Consider an account entity, On Account Form, we have Boolean field and we want to show PCF control on it then we can the Field type.

2. Dataset: When we want to create control at Grid/Dataset level.

For e.g. Consider an account entity, On All Account view, if we want to show some custom PCF control then we must use the Dataset field type.

In this blog, we will see the steps required to create the PCF control and few important details about the PCF control.

Components Required for PCF

1. Node JS, Power CLI
2. Visual Studio 2017, 2019 or Visual Studio Code

Note: In this article, we have used VS2019 and VS2019 command prompt

Steps Required to create PCF Control.

1. Select the local working directory where you want to store the PCF Control.

For e.g. “D:\Training\PCF\FirstPCFControl”.

2. After Selecting the directory, open Visual Studio Command prompt (i.e. VS2019 Command Prompt) as shown below:

After this please run below command:

pac pcf init –namespace <namespacename> –name <componentname> –template <templatetype>

Here we must replace below attributes from above command:

• Namespacename – Namespace for PCF control
• Componentname – define the name of the PCF Control
• templateType – here we must specify the templatetype either “field” or “dataset”

For e.g.

pac pcf init –namespace CRM –name FieldPCFControl –template field

pac pcf init –namespace CRM –name DataSetPCFControl –template dataset

3. After running above command the project gets created as shown below:

Here, we have run the dataset command and above folders is gets created.

4. After running above command, please run the below command

npm install

5. After this, we can open project in Visual Studio the structure we will be as shown below:

• index.ts – In this file, we need to write our logic for the PCF Control and this file consists of below methods

1. Init
2. Updateview
3. getOutputs
4. destroy

• Input.xml – This file contains information about the PCF control. To know more about, XML file please refer below link

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/

In the next blog, we will see how we can configure the PCF control using fluent UI.