Communicate from form script with custom PCF control

(0) Share

Report

Posted on by Arjan ter Heegde

Hello,

I'm developing my first PCF control for Dynamics 365 CE but i'm curious how to communicate with it from an form script.

I'll have a OnChange script with the following:

function testArjan(executionContext) {
	window.postMessage({
		messageName: "TestArjan",
	}, window.location.href);

	console.log(window.location.href);

}

In my PCF typescript i have an event listener:

 constructor() { 

 window.addEventListener("message", this.handlePostMessage.bind(this), false);

 }

 private handlePostMessage(event: MessageEvent): void {
 if (event.data) {
 console.log(event.data); // hier krijgen we straks verzoeken binnen om nieuwe artikel regels toe te voegen vanuit de catalogus.
 }
 }

But i don't receive any messages. What am i doing wrong? Can someone give me an example how to communicate with my PCFControl from a OnChange form script.

Thanks :)!

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (6)

Answers (0)

Guido Preite 1,488 Super User 2024 Season 1 on at

Like (2)

Report

easiest way will be to change the value of the field where the PCF attached so the PCF can listen to the new value (for example you attach to a textbox and you write your message there) but depends on the PCF you are building.

I never used listeners inside PCF but I assume they don't work due to how both PCF and standard fields are added to the form

Was this reply helpful? Yes No
a33ik 3,306 Most Valuable Professional on at

Like (2)

Report

Hello,

I would recommend checking this post - https://dianabirkelbach.wordpress.com/2020/05/15/can-pcfs-communicate/ to be more specific the following paragraph:

What about communicating with the scripts registered on the form?

That’s another story. Of course, it can work the same way. The problem is finding the IFrame where the scripts are loaded. Right now, the pcfs are on the “top” window, and the “Scripts-frame” is an IFrame inside. Sending a message to every frame on the form, we will reach out also the Scripts frame, so the component can at least be notified about the event.

Array.from(window.frames).forEach(frame => frame.postMessage({...}, "*");

Was this reply helpful? Yes No
Arjan ter Heegde 32 on at

Like (0)

Report
Thanks. It's not an recommended way but i will concider.

"I think that right now the only supported way to interact with the form scripting is making use of PCF parameters and changing the data." Can someone give me an example how to do this? My PCF control is a subgrid.

I want to communicate from a form script with the PCF control.
function testArjan(executionContext) { Array.from(window.frames).forEach(frame => frame.postMessage({ messageName: "TestArjan", }, "*")); }
This code doesn't work, i won't receive any messages inside my PCF control.

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

Like (2)

Report
Hi @Spinix ,

1. For a limited scenario, you could define your PCF as a combination of dataset and input properties. So your dataset PCF can have more properties defined in your manifest, as long they are of type input. Your manifest would look like:

<control ...> <data-set name="dataset" .../> <property name="myField" ... usage="input"/> /<control>

The property myField can be linked to a field from your form, BUT you won't be notified when the value changes. You get only the value from the start. Not sure if it gets updated, when you refresh the subgrid using form-scripting.

2. If that's not enough, I guess you need to detect when there are changes on the form. Then you could consider to use the dataset.linking . That way you can link your dataset with the parent record data (the form). Using form scripting you could call the subgrid.refresh() which will call your subgrid PCF with the updated data. That way you could detect inside the pcf that the form attributes were changed.
For more details on dataset.linking I've wrote this blog: https://dianabirkelbach.wordpress.com/2022/06/12/pcf-dataset-relationships-linking-in-model-driven-apps/

3. If you prefer to use the postMessage way (more or less supported, but it could be effective): in the blog above (that @a33ik posted - thank you Andrew 😊 ) I'm considering postMessage from inside a PCF. You need it the other way around. The form-scripting is placed inside an IFrame, while the PCF is in one of the parent frames (probably window.top). So from the form scripting, (since PCFs are not IFrames) you could try to send postMessages to window.parent or window.top, or somewhere in between.

Hope this helps!

Was this reply helpful? Yes No
Arjan ter Heegde 32 on at

Like (0)

Report
Hi Diana,
Thanks for you're detailed answer, i really appreciate it.

I still need some help for step 3.

This is my pcf control with an event listener:
constructor() { window.addEventListener("message", this.handlePostMessage.bind(this), false); } private handlePostMessage(event: MessageEvent): void { if (event.data) { console.log(event.data); // wait for the message from form scripting } }

How do i send the postMessage from my form scripting so the pcf control can receive the message?

What do i need to change in this code that i will place in the form scripting:
Array.from(window.frames).forEach(frame => frame.postMessage({ messageName: "TestArjan222", }, window.location.href));

I've tried multiple way's but i don't receive the message, i can't find what i'm doing wrong but i want to learn :).

Was this reply helpful? Yes No
Arjan ter Heegde 32 on at

Like (0)

Report

Is there anyone with an working example? I don't know if i am doing something wrong but for me it looks like it isn't possible to talk to a PCF control from form scriping.

Was this reply helpful? Yes No