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.
Then save the changes in index.ts file.
Step 5: Run the command npm run build the Developer Command Prompt for VS to build the command
Step 6: Run npm start command on the Developer Command Prompt for VS to test the control
To terminate the job, press ctrl+c in the Developer command prompt for Visual Studio
Step 7: Create a new folder which will hold your solution
Run command mkdir FileControlSolution to create the folder, so that we can bundle our custom component inside that solution folder.
Step 8: Navigate to the newly created solution folder and run the following command
Step 9: To create our custom control reference. To do this run the following command
pac solution add-reference --path
This will create a file with cdsproj extension
Step 10: Now go into solution project directory folder and build the project using following command
msbuild /t:build /restore
This will add the solution zip file in your bin/debug folder
Step 11: To import the solution, sign into Power Apps and select Solutions from the left navigation.
On the command bar, select Import
Then, select Browse to choose your solution file.
Select Next and then import. It may take some time to import.
And your solution is successfully imported in Dynamics 365
Step 12: Now you have to create a new text field named GUID in the Contact form and set the custom control for that field.
Now publish the changes and you can see the GUID of the record is being displayed in the form.
