Creating a simple PCF control


The post describes the steps involved in creating 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


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
  • 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’ (and then simply type ‘msbuild’ for subsequent builds)

Figure 10

2.2) Deploy the solution to the D365 server

Deploy the unmanaged solution (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.) Deploy the solution to higher environments

(See reference 2 for more information.)

Once debugging is complete, and the control is ready to be deployed to the higher environments, do the following:

  • Update the version of the control (see Figure 5, line 3)
  • Create a new version of the solution (refer to section 2.1 Build the solution)

Deploy this new solution version to the development server. Verify that it contains the latest version of the control (Figure 14)

Then export this solution as a managed solution and deploy to the higher environments

Figure 14


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


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



7. Create your first component

8. Create and build a code component

9. Tutorial: Creating a model-driven app field component