Creating and deploying a standard PCF control

Introduction

The post describes the steps involved in creating and deploying a very 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).)

Figure 1

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

Figure 2

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)

Figure 3

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.)

Figure 4
Figure 5
Figure 6
Figure 7
Figure 8

1.2) Build the control

Execute the command ‘npm run build’

Figure 9

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)
  • “msbuild” (‘msbuild’ for subsequent builds)
  • “msbuild /p:configuration=Release” (for the minified version. Refer to reference #10)
Figure 10

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)

Figure 11

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

Figure 12
Figure 13

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 and publish this new unmanaged solution version to the development server. Verify that it contains the latest version of the control (Figure 14)

Figure 14

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

Figure 15

2.) Contents of folders

Figure 16

2.1) FormTextReferenceControl

Figure 17
Figure 18
Figure 19
Figure 20
Figure 21
Figure 22
Figure 23

2.2) ContosoPCFControls

Figure 24
Figure 25
Figure 26
Figure 27
Figure 28

3.) Other files

Figure 29
Figure 30
Figure 31
Figure 32
Figure 33
Figure 34
Figure 35
Figure 36

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

6. https://react.fluentui.dev

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)