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.
1. First you need to install Node.js in your system.
2. Install Microsoft PowerApps Command Line Interface CLI.
3. Install Visual Studio.
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:
And following of-type property values are not supported:
· 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.