Creating a virtual PCF Control

Introduction

The post provides an overview of 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

Creating the Control

The following line is executed to create the initial version of the control

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 2 – ControlManifest.Input.xml

Referring to Figure 3, the following aspects of the code in reference 1 are worth noting

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

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

Figure 3 – index.ts
Figure 4 – SliderComponent.tsx
Figure 5 – SliderControl.css

Configuring the control

Figure 6

Appendix

Figure 7 – package.json
Figure 8 – 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

7.) Virtual React PCF Code Components