Posted in PCF, React

Creating a virtual PCF Control

Dustin Miner
posted on January 10, 2024June 19, 2024
Comments Off on Creating 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

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)

2.) Add the pcf control to the cpl_employed column (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

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

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)

Testing the control

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

Lifecycle of the control

Figure 12 – Sequence in which the control is executed

Appendix

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

React App

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

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