Create and deploy a standard PCF control
Introduction
The post describes the steps involved in creating and deploying a simple PCF control (the control is circled in green in Figure 2).
Consider the requirement to place labels on a form. One way to do this is to place an OOTB read only textbox on the form and populate the text box with the label text (see Figure 1). (The label text being retrieved from an entity called cpl_formtextreference (see Figure 15).)
![](https://dustinminer.com/wp-content/uploads/2023/07/1-3.png)
Figure 2 displays the control that will be created in this post. The benefit of using this control is that the lock icon isn’t displayed and the text is slightly clearer
![](https://dustinminer.com/wp-content/uploads/2023/07/2-5-1024x322.png)
Steps
1.) Create the control
Create a folder called ‘FormTextRefererenceControl’
Within this folder, execute the command ‘pac pcf init -ns ContosoPcfControls -n FormTextReferenceControl -t field -npm’ (see Figure 3)
![](https://dustinminer.com/wp-content/uploads/2023/08/3-3-1024x658.png)
Execute the command ‘npm install react react-dom @fluentui/react’
(Optional) execute the command ‘npm install –save-dev –save-exact prettier’
1.1) Add the code
(See reference 1 for more information.)
![](https://dustinminer.com/wp-content/uploads/2023/07/4-2.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/5-2.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/6-1.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/7-2.png)
![](https://dustinminer.com/wp-content/uploads/2024/04/8.png)
1.2) Build the control
Execute the command ‘npm run build’
![](https://dustinminer.com/wp-content/uploads/2023/07/9.png)
2.) Create the solution
(See reference 7 for more information.)
Create a folder called ‘ContosoPCFControls’ (see Figure 16)
With this folder, execute the following commands:
- pac auth create –url https://myorg.crm6.dynamics.com
- pac solution init –publisher-name contoso –publisher-prefix cpl
- pac solution add-reference –path ..\FormTextReferenceControl
2.1) Build the solution
Execute the command
- “msbuild /t:build /restore” (when adding a new pcf; ‘/restore’ restores the NuGet packages)
- “msbuild” (‘msbuild’ for subsequent builds)
- “msbuild /p:configuration=Release” (for the minified version. Refer to reference #10)
![](https://dustinminer.com/wp-content/uploads/2023/07/10-1.png)
2.2) Deploy the solution to the D365 development server
Deploy the unmanaged solution ContosoPCFControls.zip (see Figure 25) to the Dynamics 365 development server
4.) Add the control to the form
Add the control to the Single-line text component (see Figure 11)
![](https://dustinminer.com/wp-content/uploads/2023/07/11-1.png)
5.) Setup debugging of the control
When the control’s TypeScript is updated, and the control is rebuilt by executing ‘npm run build’, the bundle.js will also be updated. Using fiddler means that the updated bundle.js doesn’t need to be deployed to the development server each time it changes
![](https://dustinminer.com/wp-content/uploads/2023/07/12.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/13.png)
6.) Import the updated solution to the development environment
(See reference 2 for more information.)
Once debugging (using fiddler) is complete, and the control is ready to be imported into the development server, do the following:
- Increment the version of the control (see Figure 5, line 3)
- Increment the version of the solution by updating the solution.xml
Import this new unmanaged solution version to the development server. Once imported, publish the solution. Verify that it contains the latest version of the control (Figure 14)
![](https://dustinminer.com/wp-content/uploads/2023/07/14-1.png)
7.) Deploy the solution to the higher environments
Export the solution as a managed solution and deploy to the higher environments (select upgrade).
Appendix
1.) FormTextReference Entity
![](https://dustinminer.com/wp-content/uploads/2023/07/15.png)
2.) Contents of folders
![](https://dustinminer.com/wp-content/uploads/2023/07/16.png)
2.1) FormTextReferenceControl
![](https://dustinminer.com/wp-content/uploads/2023/07/17.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/18.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/19.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/20.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/21-1024x353.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/22.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/23.png)
2.2) ContosoPCFControls
![](https://dustinminer.com/wp-content/uploads/2023/07/24.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/25.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/26.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/27.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/28.png)
3.) Other files
![](https://dustinminer.com/wp-content/uploads/2023/07/29.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/30.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/31.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/32.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/33.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/34.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/35.png)
![](https://dustinminer.com/wp-content/uploads/2023/07/36.png)
Further reading
Communication between PCF controls and the form
References
1. Andrew Butenko – Let’s create a PCF control
2. Diana Birkelbach – all about pcf versioning
3. Debug & Deploy PCF Component
4. How to deploy a PCF component
5. https://developer.microsoft.com/en-us/fluentui#/controls/web
7. Create your first component
8. Create and build a code component
9. Tutorial: Creating a model-driven app field component
10. PCF Solution Packaging: Unmanaged for Production (Release)