Portal Multi-Step Form - PCF Control Not Updating Bound Properties

[CamDry]

Hi everyone!

I have a built a custom lookup field React PCF virtual control using Fluent UI that uses a typeahead endpoint to return search results from a third party API. On selection of a result, the PCF control captures 8 fields from the selected result and outputs each one of these to a field on the form where the PCF is embedded.

This PCF control works perfectly inside the model driven app, but I'm running in to issues when using it in a multistep form in the portal. The PCF control renders and functions exactly as I would expect, I am able to perform the search and select a result. In the debugger, I can see the getOutputs method triggered and I can see the values being assigned to each of the output values as I would expect.

This is where the control drops the ball as the component does not update any of the fields on the form as it does in the model driven app. I have bound the control to one of the 8 fields and on inspection of that element in Dev Tools, I can see that the value property of the hidden input has been updated.

I should add at this point that all the fields I'm expecting to be updated are on the same step of the portal form.

I have tried adding a custom onchange event to the bound field on the form using jQuery but even though the value of the element is updated, the onchange method is never called.

The only theory I have left is that MS doesn't support PCF controls on multi-step forms as all the tutorials I can find are about how to use them on basic forms. Can anyone confirm this or maybe point me in the right direction please?

Thanks!
Cam

[DianaBirkelbach]

Hi @CamDry , 

I'm not sure about multi-form, and I cannot say much about PCF in Power Pages.
But I think it was not long ago when I've heard something about "lookup" PCFs having issues on Power Pages.

@OOlashyn Maybe you know something about this?

[CamDry]

Hi @DianaBirkelbach 

Thanks for your response, I was watching a few of your videos yesterday to try and get this working!

I'd love to hear if there is an officially supported approach to this - but in the meantime I managed to get it working with window.parent.postMessage which feels hideous but it's doing the job so far! I'm posting my IOutputs object to the parent window and I've set up a listener for it in the portal form js.

I'd be happy to share code snippets tomorrow when I'm back at my PC. So you can all laugh at me 😉

Thanks again!

Cam

[DianaBirkelbach]

Hi @CamDry , 
Thank you. 

It sounds like a bug to me. 

Of course I would have a look to the code, even if I probably cannot help, since I don't have much experience in Portals. 
But I'm sure nobody would laugh, but just feel with you!

[CamDry · Accepted solution]

Hi @DianaBirkelbach 

Here is my workaround:
In the PCF Control:

public getOutputs(): IOutputs {

    let result: IOutputs = {};

    if (this.selectedCompany) {
        result.CompanyName = this.selectedCompany
        //And other field assignments
        }
    }
    else {
        result.CompanyName = undefined;
        //And clearing other fileds
    }

    window.parent.postMessage({ pcfObject: result }, '*');

    return result;
}

 And then in the portal form JS:

$(document).ready(function() {
    window.addEventListener('message', receiveDataFromDunsLookupComponent);
}

function receiveDataFromDunsLookupComponent(event) {
    const allowedOrigins = ['https://mypowerappsportalsurl.com'];

    if (!event || !event.origin || !allowedOrigins.includes(event.origin)) {
      console.warn('Received message from untrusted origin:', event && event.origin);
      return;
    }
  
    const data = event.data;
    if (data.pcfObject) {        
      $("#my_companynameattribute")[0].value = data.pcfObject.CompanyName ? data.pcfObject.CompanyName : "";
      //Other attribute assignments
    }
  }

[OOlashyn]

Hi @CamDry ,

So PCF controls for lookups are not supported for Power Pages yet (at least officially). The same for virtual React control - they are not supported as well (see official FAQ from MS about it). They might work, but I would use them in production very carefully - as any new release might break them until official support. Unfortunately, there is no ETA on when that happen.

[SAlluri]

I dont think it is any thing to do with React/Lookup based PCF control. I strongly feel like it happens with standard PCF controls as well. The primary field binding works fine however the other fields you bind is not working like how it works in M-D apps. And I blv (my theory) it is something to do with the design, MS must be setting the field values from PCF control directly as part of the "Save" in model apps however the way portal renders the controls in general is different and so it is not setting up the values. I see couple of other posts in the similar lines and I'm the latest victim of this.

I like the idea of @CamDry .. let me see if it works for me..