Recently, while diving deep into the newly introduced virtual PCF component, I faced an issue where the PCF control wasn’t loading the data on the 1st load of the page.
Let’s have a look at the issue first. As seen in the below screenshot, I have added our PCF control on the First Name field. Kindly refer to this blog to have a look at it as well. Here you can see that the contact does have a first name, but isn’t being rendered in our control.
This happens, because as per my observation the PCF controls end up loading first before the full form is loaded which causes an issue while loading the default values. So to overcome this, I will use a property that is passed through context known as isPropertyLoading.
As per my observation, isPropertyLoading will return true until the form is completely loaded and the context can get actual field values instead of null.
So I will add a conditional rendering based on the isPropertyLoading property. Where I will render our component only when isPropertyLoading is false. Below is how I will implement this –
/** * It is called when some value in the property bag has been changed. This includes field values, data sets, global values such as the container height and width, offline status, and control metadata values such as label, visible, and more. * @param context The entire property bag is available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions * @returns ReactElement root react element for the control */ public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { //@ts-ignore let isPropertyLoading:boolean = context.parameters.textField.isPropertyLoading; if(!isPropertyLoading){ const props: IStringChekerProps = { defaultValue: context.parameters.textField.raw!, onInputChanged: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => { this.currentFieldValue = newValue!; this.isValidString = this.validateStringField(this.currentFieldValue); this.notifyOutputChanged(); } } return React.createElement( StringCheker, props ); } else { return React.createElement("div"); } }
What I’ve done is we are returning the empty element by return React.createElement(“div”); when isPropertyLoading is true and return the actual component only when the isPropertyLoading is false. After this change, the control will load normally like the below –
Conclusion – This is how we can use isPropertyLoading to prevent displaying empty PCF values even though data exists.
