ImageLogic PCF

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…

Rami Mounla

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.