Title: Customizing and Deploying a PCF Control from PCF Gallery to Dynamics 365

 

Title: Customizing and Deploying a PCF Control from PCF Gallery to Dynamics 365

Introduction:

This tutorial guides you through the process of customizing and deploying a third-party PCF control obtained from the PCF Gallery (https://pcf.gallery/) into a Dynamics 365 environment.

Prerequisites:

• Access to a Dynamics 365 environment.
• Basic understanding of Dynamics 365 and PCF.

Steps:

1. 1. Selecting a PCF Control from PCF Gallery:

   • Visit the PCF Gallery (https://pcf.gallery/).
   • Browse and select a PCF control that suits your needs.
   • Download the source code (usually a .zip file or a GitHub repository link).

2. 2. Extracting and Opening the Project:

   • Extract the downloaded .zip file to a folder on your computer.
   • Open the extracted folder in an editor (e.g., Visual Studio Code).

3. 3. Understanding the PCF Control Structure:

   • Familiarize yourself with the basic structure of a PCF project:
     • ControlManifest.Input.xml: The manifest file defining the control properties.
     • index.ts: The TypeScript file containing the main logic.
     • Other assets like CSS, images, etc.

4. 4. Customizing the PCF Control:

• Make necessary customizations to the code as per your requirement.
• Update the namespace and control name in ControlManifest.Input.xml to avoid conflicts.
• Modify the index.ts file or other assets if needed.

5. 5. Ensuring Node.js is Installed

   • Verify Node.js installation by running node -v and npm -v.
   • If not installed, download from Node.js official website.

6. 6. Installing PCF Scripts

• 

• Install Node.js

  Step 1: Identify the Compatible Node.js Version

  Review your project's package.json to determine the Node.js version compatible with your dependencies.

  For instance, @types/node at ^10.12.18 suggests compatibility with Node.js version 10.

  
  
  

  Installing a Specific Node.js Version with NVM:

  If you haven't installed NVM, please refer to below guidance:

  https://www.hellosmart.ca/2024/02/how-to-download-and-install-node.html

  • After NVM has been installed, to install Node.js version 10, use the commands:

  nvm list
  
  nvm install 10
    nvm use 10

• In your PCF project directory, run npm install. This installs pcf-scripts and other Node.js dependencies. Remember to restart your Visual Studio Code application.

1. 7. Authenticating with Dynamics 365 Environment:

• Open a command prompt or terminal.
• Navigate to your PCF project directory.
• Run the following command for device code authentication:

  
  pac auth create --url <your-dynamics-365-url> --deviceCode

• e.g. pac auth create --url https://forrestdev.crm.dynamics.com --deviceCode
• Follow the instructions for authentication.

If you got error below:

"Get-Command : The term 'pac' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again."

Then, you can install Power Platfom Tool extention for Visual Studio Code.

Remember to restart your Visual Studio Code application

1. 8. Deploying the PCF Control:

• In the same command prompt, run:

  pac pcf push --publisher-prefix {prefix}

• This command builds and deploys the PCF control to your Dynamics 365 environment.

• If you got error like " 'pcf-scripts' is not recognized as an internal or external command, operable program or batch file.", try below two steps:

Run the following command: npm cache clean --force

Run the following command: npm install

•  If you got Build Error, please refer to : 

            https://www.hellosmart.ca/2024/02/addressing-pcf-build-failures.html

1. 9. Adding the PCF Control to a Dynamics 365 Form:

   • Log in to your Dynamics 365 environment.
   • Navigate to the entity where you want to add the PCF control.
   • Open the form editor.
   • Select a field or add a new field.
   • Add the deployed PCF control to the field in the Control tab.

2. 10. Testing the PCF Control:

   • Save and publish the form.
   • Test the functionality of the PCF control in the context of the form.
   • Ensure it meets the business requirements.

Conclusion:

By following these steps, you can successfully customize and deploy a PCF control from the PCF Gallery into your Dynamics 365 environment, enhancing your forms with tailored functionality.