Often customers ask for a banner to appear on a form if the record is in a specific state. For example, they want to display a red flag if the customer has a roadblock. So I thought that is a good premise for a new PCF control.
This post covers the steps required to build such a control. The source code can also be found in my GitHub repository. https://github.com/ramimounla/ImageLogic.git
How to do it
By now you should be familiar with the building PCF controls. If you are not please read my post Power Apps PCF Simplified. This is not much harder.
1- Create a blank field PCF control using pac pcf init
2- Add the following 4 properties: thresholdNumber, imageTrue, imageFalse, and threshold
<property name="thresholdNumber" display-name-key="NumberInput" description-key="Number input that will be used as a basis for the threshold." of-type="Whole.None" usage="bound" required="true" /> <property name="imageTrue" display-name-key="ImageTrue" description-key="Full path of image display if greater than the threshold." of-type="SingleLine.Text" usage="input" required="true" /> <property name="imageFalse" display-name-key="ImageFalse" description-key="Full path of image to display if less than or equal the threshold." of-type="SingleLine.Text" usage="input" required="true" /> <property name="threshold" display-name-key="Threshold" description-key="Threshold" of-type="Whole.None" usage="input" required="true" />
3- In your index.ts add the following local variables
private _image: HTMLImageElement;
private _imageTrue: string;
private _imageFalse: string;
private _threshold: number;
private _containter: HTMLDivElement;
4- In your init method add
this._containter = container;
this._image = document.createElement("img");
this._imageTrue = context.parameters.imageTrue.raw || "";
this._imageFalse = context.parameters.imageFalse.raw || "";
this._threshold = context.parameters.threshold.raw || 0;
if(context.parameters.thresholdNumber.raw || 0 > this._threshold){
this._image.src = this._imageTrue;
}
else{
this._image.src = this._imageFalse;
}
this._containter.appendChild(this._image);
5- In the update view check the threshold value and update the image accordingly
if(context.parameters.thresholdNumber.raw || 0 > this._threshold) {
this._image.src = this._imageTrue; }
else{
this._image.src = this._imageFalse; }
}
How does it work?
Very simple, we create an img element that we append to the main container. We change the image based on the threshold input value…