Answered

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

(0) Share

Report

Posted on by 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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (6)

Answers (1)

Sort by

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
CamDry on at

Like (1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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!

Was this reply helpful? Yes No
Verified answer

CamDry on at

Like (3)

Report
Copy link

Link copied!
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 } }

Was this reply helpful? Yes No
OOlashyn 3,498 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
SAlluri 66 on at

Like (0)

Report
Copy link

Link copied!

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..

Was this reply helpful? Yes No