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

Blogs
30 Sep, 2024

SMS Integration with Twilio Number in D365 Customer Service- Part 1

Introduction Integrating SMS functionality into Dynamics 365 can significantly enhance customer communication by providing a direct and efficient channel for…

READ MORE
Blogs
24 Sep, 2024

White Box Testing - Its Techniques and Types

In this blog, we’ll deal with one of the most popular methods of testing a system or system component thoroughly…

READ MORE
Case Study
06 Sep, 2024

Implementation of Business Central for a Trading Organization

Customer Overview A prominent trading organization sought to enhance its operational efficiency and streamline its business processes by implementing Dynamics…

READ MORE