Create and Build PCF Control
Introduction:
PCF control allows developer to create and build the reusable code component which we can use in Model Driven app, Power Apps Portal and Canvas App.
Today’s we will see the initial setup which is required to create the PCF control and pre-requisite as well. Pre-requisite: To start with PCF control, we need to install below list of software.
Visual Studio Code
Node.js
Power App CLI
Visual Studio 2019 Developer Command
Once we setup above list of software then we are good to go. Creation PCF control: Now we will see the commands required to setup the PCF controls.
Create one empty folder in local directory as shown below:
Now, run below command in developer command 2019.
pac pcf init –namespace <Namespace name> –name <Component Name> –template <component type> In PCF we have below two types of PCF Controls and command changes as below:
Field: pac pcf init –namespace CRM –name SampleButtonControl –template field
Dataset: pac pcf init –namespace CRM –name SampleDatsetControl –template dataset
Now, here one question arises when to use field and when we should use dataset. Field: When we want to change and look and feel of any OOB field of CRM entity then go for FIELD type control. Dataset: To change the look and feel of Entity View then we will go Dataset level control. Once above command executed in VS 2019 developer command prompt then we are good for development.
E.g.: We will see the creation of field level type control. 1. Command in Developer command prompt:
2. Once we run above command then below files and folders. We will be created under working directory.
3. Now we can open above folder in VS 2019 or Visual Studio Code which ever we like. I will open this in Visual Studio Code as shown below:
InIndex.ts file we need add the code for designing and business logic for our custom PCF Control.
In ControlManifestFile.Input.Xml file we can change below things:
Display Name, Description, Image of PCF control.
During development whenever we make any changes then to get latest update on CRM side, we need to update the version as shown below:
3. If we want user input in PCF control then we can define input parameters. For more info please click below link: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/
Create and Import solution in CRM
To use PCF control in CRM we need to create managed or unmanaged solution and for this we need to follow below steps:
Create One Solution Folder as shown below:
2. Open new solution folder in Developer Command Prompt and add below command as shown below:
Command: pac solution init –publisher-name <publishername> –publisher-prefix <prefix>
After this command in solution folder Src and Proj file will be created which helps us to build the manage and unmanaged solution. 3. Next would be to add reference of PCF control in solution folder for this we need to run below command:
pac solution add-reference –path “add project path”
for e.g. in my case, I have created the project in this directory “C:\Pradeep Work\Practice\PCF Gallary\ButtonControl”
hence the above command would be like: pac solution add-reference –path “C:\Pradeep Work\Practice\PCF Gallary\ButtonControl”
4. After this we need to run this command to create managed or Unmanaged Solution.
msbuild /t:build /restore