Knowledge Center

09 Jul, 2020

Create and Setup the PCF Control Using Visual Studio 2019

Posted on 09 Jul, 2020 by Admin, Posted in Power Platform

Create and Setup the PCF Control Using Visual Studio 2019 Blogs

Create and Setup the PCF Control Using Visual Studio 2019


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.

  1. 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”.

  1. 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 –name –template

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

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

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

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

npm install

  1. 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

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


This is a Required Field


Recent Updates

16 Jul, 2024

How to use Solutions with Power Pages

What is Solution in power Pages? A solution is a container for components such as Website Configuration and Dataverse Components.…

15 Jul, 2024

Create a Dataverse table with a SharePoint List

In today’s business world, Organization uses SharePoint lists for document management, and data storage. Let's assume a scenario where an organization…

Case Study BW - Nebulaa IT Solutions
Case Study
03 Jul, 2024

Revolutionizing Build Warranty's Operations with a Scalable and Automated Dynamics 365 Solution

Customer Overview Build Warranty (BW), a leading UK-based provider of warranty solutions for the construction industry, sought a strategic partner…