knowledgecenter-breadcrum

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

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.

  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

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.

Comment

This is a Required Field

Loading

Recent Updates

Email Storage Made Easy: Dynamics 365 Space Saving Tips
Blogs
29 Feb, 2024

Email Storage Made Easy: Dynamics 365 Storage Saving Tips

Email Storage Made Easy: Dynamics 365 Storage Saving Tips Introduction Microsoft's latest feature allows you to migrate email descriptions from CRM…

READ MORE
Blogs
28 Feb, 2024

How to enable the enhanced email template editor in Dynamics 365?

How to enable the enhanced email template editor in Dynamics 365? To activate the Enhanced Email Template editor for your…

READ MORE
RCA for ARC Migration Issue
Blogs
28 Feb, 2024

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365 Problem Statement We implemented D365 Customer…

READ MORE