Create a virtual PCF Control

Introduction

The post provides an overview of how to create a very simple virtual PCF control (Figure 1). It can be configured to display as a ‘No Unknown Yes’ slider or a ‘Percentage’ slider

Figure 1

Configuring the Control

The following example illustrating how to configure the control as a ‘No Unknown Yes’ slider

1.) Place a whole number column called cpl_employed on the form (Figure 2)

Figure 2

2.) Add the pcf control to the cpl_employed column (Figure 3)

Figure 3

Creating the Control

The first step in creating the control is to execute the following line

pac pcf init -ns ContosoPcfControls -n SliderControl -t field -npm -fw react

Next, the control is updated with code based on references 1 & 2 (listed at the bottom of this post)

The resulting code for the completed control is as follows

Figure 4 – ControlManifest.Input.Xml

Referring to Figure 5, the following aspects of the code are worth noting:

Line 26 – uses a destructuring assignment. (Reference 3.)

Line 28 – checks if the specified condition is truthy. (Reference 4.)

Figure 5 – index.ts

Referring to Figure 6,

Line 20 – React.memo (Definition from https://react.dev/reference/react/memo – Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed.)

Line 25 – React.useCallback (Definition from https://react.dev/reference/react/useCallback – Call useCallback at the top level of your component to cache a function definition between re-renders)

Figure 6 – SliderComponent.tsx
Figure 7 – SliderControl.css
Figure 8 – package.json
Figure 9 – tsconfig.json

Testing the control

Referring to Figure 10 & 11, the slider is moved from ‘Unknown’ to ‘Yes’

Figure 10
Figure 11

Lifecycle of the control

Figure 12 – Sequence in which the control is executed
Figure 13

Appendix

This section describes how to test (very limited testing in this case) the slider component within a React app (Figure 14)

React App

Figure 14

1.) Create the React app

In the ‘Developer PowerShell’ of Visual Studio, type

  • npx create-react-app my-react-app –template typescript
  • cd my-react-app
  • npm run build
  • npm start
Figure 15
Figure 16

2.) Add the slider control to the newly created react app by adding or updating the following files (refer to Figures 17, 18, 19, 20 & 21)

  • SliderComponent.tsx
  • App.tsx
  • App.css
  • package.json
  • tsconfig.json

Then in the ‘Developer PowerShell’ of Visual Studio, execute the commands

  • npm install
  • npm start

Note: if the following error is generated, make sure the case of each folder structure matches

[eslint] Plugin “react” was conflicted between “package.json >> eslint-config-react-app >> C:\Users\dminer\source\repos\products-framework\code\Pcf.Controls\my-react-app\node_modules\eslint-config-react-app\base.js and “BaseConfig >> C:\Users\dminer\source\repos\products-framework\Code\Pcf.controls\my-react-app\node_modules\eslint-config-react-app\base.js

Figure 17 – SliderComponent.tsx with newly added line 54
Figure 18 – App.css with newly added lines 40 to 49
Figure 19 – App.tsx updated with new contents
Figure 20 – package.json with the fluent references added on lines 19 & 20
Figure 21 – tsconfig.json

References

1.) https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/ChoicesPickerReactControl/ChoicesPickerReact

2.) https://developer.microsoft.com/en-us/fluentui#/controls/web/slider

3.) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

4.) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else

5.) https://react.dev/reference/react/createElement

6.) Powerful Devs Conference 1:54:48

7.) https://create-react-app.dev/docs/getting-started

8.) Virtual React PCF Code Components

9.) Building awesome PCF’s using React Hooks – David Rivard

10.) Hooked to PCF – React Hooks in PCF Development – Power Apps Development Bootcamp

11.) https://learn.microsoft.com/en-us/training/modules/get-started-power-apps-component-framework/?%3FWT.mc_id=M365-MVP-5002876