Step by Step Guide to create PCF Control

Objective - To Create Guid PCF Control

Pre-Requisites 

• Install Node Js - https://nodejs.org/en/
• Install Power Apps CLI - http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi.

1. Create PCF Control

• Create Project Folder

• Navigate to Project Folder

           Command – cd <FolderPath>

• Create Project Files in the Project Folder
  
  Once the Project Folder is created next step is to generate project files using the below command.

        Command: pac pcf init --namespace <your namespace> --name <your component name> --template <component type>

• Verify Project Files in the Project Folder

• Install Project NPM Dependencies

        Command – npm install

• Update Property Node in Manifest File

• Add CSS to the solution

•  Update Logic in Init and UpdateView Method of Index.ts file

• Build Control

          Command - npm run build

• Run Control Locally

          Command - npm start

    

            Check Output -

    

• Terminate Job - Press Control + C then followed by Y 

2. Package PCF Control Solution

    Once PCF control verified locally lets package into D365 CRM Solution. To package solution we would need ‘Developer Command Prompt for VS 2019’

• Create Solution Folder

• Create Solution Project
  
  Once Solution Folder is created, create Dataverse Project Files in solution folder.

          Command:  cd <D365SolutionFolder>

          Command: pac solution init --publisher-name <Your Publisher> --publisher-prefix<PublisherPrefix>

           Example - pac solution init --publisher-name Shreways --publisher-prefix shreways

• Verify Solution Folder

          Dataverse Project Solution File Created Successfully

• Update Dataverse Project File to get Managed/Unmanaged or both the solutions

• Link PCF Control with Solution
  Command: pac solution add-reference --path "<PCFFolderPath>"
  Example - pac solution add-reference --path "C:\SAURABH\Shreways\PCF\GuidControl"
  

• Archive Solution

          Command: msbuild /t:build /restore

           Once the comment runs successfully,verify the bin folder with CRM Solutions

3. Usage in D365

• Import Solution in D365 CRM 
  

• Create Field and Map the Guid Control
  
  Create Text Field on Entity and update field properties to bind "GuidControl" to the field.

          Save Changes and Publish.

• View the GuidControl on Entity Form
  
  Account Id Field is populated with Guid of the account record.

We can embedd this PCF control to any entity where we need Guid to be mapped to a field.

Reference-
Create your first component using Power Apps Component Framework in Microsoft Dataverse - Power Apps | Microsoft Docs

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Happy Learning, Lets SHARE !