welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

Creating PCF Control in Dynamics 365

By Abhay Choudhary on 6/22/2021

What is PCF Control?

PCF (Power Apps Component Framework) enables the developers and app makers to create custom control elements, or rather we can say create HTML based components for model-driven and canvas apps. It can be reused multiple times across different entities and forms based on the requirement in CRM.

Example: To create a PCF which will show the GUID of the record in CRM form.

Prerequisites:

1.    First you need to install Node.js in your system.

https://nodejs.org/en/

2.    Install Microsoft PowerApps Command Line Interface CLI.

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/create-custom-controls-using-pcf

3.    Install Visual Studio.

https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=Community&rel=16

Once you have installed everything properly, you need to follow the below steps to build your PCF:

Step 1: Create a new folder in any drive and open Developer Command Prompt for Visual Studio and navigate it to that folder.

In my case I have created a new folder “PCF” in D Drive.

New Folder: PCF

Open Developer Command Prompt for Visual Studio from the search bar on the task bar:

Run the following command to create a new component project

pac pcf init --namespace <namespace of the component> --name <name of the component> --template <component type>


Here, namespace of the component: PCFControl

Name of the component: FileControl

Component type: field

Note: Microsoft Power Platform CLI supports two types of components: field and dataset for model driven apps. It means we can add PCF to a field or dataset in CRM.

If your component type is dataset, write the command in following way:

pac pcf init --namespace PCFControl --name NewPCF --template dataset

Your PCF project will have the files in the format shown below:

Step 2: Run npm install command on the Developer Command Prompt for VS to install project dependencies.


Step 3: Implementing Manifest   

Open ControlManifest.Input.xml file (in Visual Studio) that is created inside the FileControl (component folder) folder.


It is an XML metadata file that defines a PCF Control.

Make the following changes to the predefined manifest:


control node:
defines namespace, version, and display name of the code component.

<control namespace="PCFControl" constructor="FileControl" version="0.0.1" display-name-key="PCFControl.FileControl" description-key="File Control from PCFControl" control-type="standard">

·       control namespace = Namespce of the component

·       constructor = Constructor of the code component

·       version = Version of the component

·       display-name-key = Name of the code component

·       description-key = Description of the code component that is displayed on the UI

·       control-type = The code component type. Only standard type of code components are supported

property node: defines properties of code component like defining data type of the component

<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Propert_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />

·       property name = Name of the property

·       display-name-key = Display name of the property

·       of-type = Data type of the column on which PCF is to be added

·       usage = There are two properties bound and input. Bound properties are bound only to value of the column (bound). And input properties are either bound to a column or allow static value.

·       required = States whether a particular property is required or not

Following of-type property values are supported:

·       Currency

·       DateAndTime.DateAndTime

·       DateAndTime.DateOnly

·       Decimal

·       Enum

·       FP

·       Lookup.Simple

·       Multiple

·       MultiSetOptionSet

·       OptionSet

·       SingleLine.Email

·       SingleLine.Phone

·       SingleLine.Text

·       SingleLine.TextArea

·       SingleLine.Ticker

·       SingleLine.URL

·       TwoOptions

·       Whole.None

    And following of-type property values are not supported:

·       Whole.Duration

·       Whole.TimeZone

·       Whole.Language

·       Lookup.Customer

·       Lookup.Owner

·       Lookup.PartyList

·       Lookup.Regarding

·       Status

·       Status Reason

resources node: defines the visualization of the code component. Contains all the resources that build the code component.

<code path="index.ts" order="1"/>

·       code path = index.ts 

·       order = 1(the order in which the files will be executed in case there are more than one file)

Here, we have only one index.ts file

Save the changes to the ControlManifest.Input.xml file

Step 4: Implementing Component logic

Open index.ts file from the component folder in Visual Studio

Update the class with following code:

Declared the variables inside the class. This file has following four methods:

·       init: All the initializations are performed inside section.

·       updateView: If any data changes, platform calls out this method.

·       getOutputs: Whenever the value changes, it returns the new value.

·       destroy: When elements are no longer in use, this method is called to remove them.