PCF Control Bound to Lookup Getting null value until form load finishes

[Beyro]

Hi community - here is my dilemma:

I have a PCF control bound to a contact lookup field on a MDA form.
I need to perform some action if the lookup field has no value (null) on form load.

In updateView, I am getting the field value with

context.parameters.MyLookupField.raw

Now, if I open a form where that lookup field has a value in the database, context.parameters.ContactLookup.formatted returns null for the first two times that updateView is called, then on the third time, it returns the actual value. Similarly, if I use context.parameters.MyLookupField.raw, I get an empty array two times, then a value on the third time.

To illustrate, I logged the field value at the top of init and updateView like this:

init () {
  console.log('init', context.parameters.ContactLookup.formatted)
  ...
}
updateView () {
  console.log('update', context.parameters.ContactLookup.formatted)
  ...
}

and this is what my console output looks like after the form loads:

init > null
update > null
update > null
update > 'John Doe'

So the behaviour I am seeing is that my action is sometimes being performed even though the field does have a value because the form has not fully loaded yet.

Does anybody know how to check if the form is fully loaded from within the PCF control in a supported way? (i.e. not using Xrm global object or the DOM).

The only two (not great) options I could come up with were:

1. Check via WebApi if the field has a value
2. Bind to some other field like FormLoaded and set that field value when the form loads to notify my PCF control

I don't like either of these options... I feel there should be a more elegant way to do this.

I would especially like to hear if @DianaBirkelbach has any ideas 🙂

Thanks!

[DianaBirkelbach]

Hi @Beyro , 

The updateView might be called several times, and the value could be null in the beginning, followed by updateView with the value, exactly as you described. But I'm not sure if the reason for this is because the form is not loaded. I think you'll observe the same behaviour also when the control is on another tab, so the control will be loaded long after the form is completely loaded. I think in that case your idea (2) might not work.

The idea (1  - webAPI) should work, but I also don't like it .

It's a taff situation. Basically you don't know when the updateView is called the last time - with the real value, so you don't know how long to wait.

Maybe we can approach it another way. It depends what you need to do when the PCF is loaded the first time and the lookup is null.

- Do you need to make some webAPI requests (create/update) for instance? In that case maybe is a better way to use a PlugIn in preCreate/preUpdate to fill in the missing data at that time, and have everything prepared when the form is loaded.

- Or maybe is not a request, but a dialog or something similar: in that case you could implement that logic inside the form script, in OnLoad?

- If it's only about rendering inside your component, I wouldn't make the difference, and let the component render on every updateView. Usually that's called fast enough. If you use React, you could render only when the props you need change, and React takes care to render only what is really changed.

If this doesn't help, maybe you can tell us a little more about what you need to do the first time the component is rendered. 

Hope this helps!

[Beyro · Accepted solution]

Thanks @DianaBirkelbach,

Interestingly, the behaviour I showed where the value only appears at the third call of updateView is not consistent.
Sometimes, the value is available at the first updateView or even at init! This is why I assumed it has to do with when the form is loaded.

As for what I am trying to do, the PCF control is used to search and display results from an outside data source. When the user selects one of the search results, it connects it to an existing Contact record or creates a new Contact record and populates the contact field with it.
What I want to do on load of the form is:

• If the contact field is already populated, just render the control with the value shown in it.
• If the contact field is not already populated (is null), automatically display a modal with the search fields (that is part of the PCF control).

One of my colleagues came up with a workaround that I'm okay with for now:

• Hide the field by default on the form, then show the field in the form's onLoad event.
  • When I do this, the actual value is available consistently in init and the first call to updateView.

I still feel like PCF should provide a way to differentiate between a field having a null value and a field being not fully loaded yet.

[Beyro · Accepted solution]

A quick update @DianaBirkelbach and anyone else who happens upon this post.

Another of my colleagues noticed that the `context.parameter.MyLookup` object has a property named `isPropertyLoading` that is exactly what I was looking for. It becomes true only once the field on the form is fully loaded and the PCF control has access to the field's value. Hooray! 🙂

The catch is that this `isPropertyLoading` property not in the MS documentation and it is not in the internal ComponentFramework.PropertyTypes.LookupProperty definition. So to use it, you need to be willing to take a risk that it could change (undocumented) and you need to put a // @ts-ignore comment above where you use it so your control will build without issues.

There is now an open issue to include this in the docs here: https://github.com/MicrosoftDocs/powerapps-docs/issues/2874