cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MHammad
New Member

Communication between two PCF controls

Hi everyone,

Hope all doing well. I just need to know if there is any way to pass data and trigger one PCF control from other PCF control. Let say, we have one PCF control containing dropdown List and other PCF showing details related to the selection in 1st PCF. When user select from dropdown in 1st PCF control ,it will run some business logic and show the results in 2nd PCF control.

I mean, if there is any way to achieve this? 

@ScottDurow (superman) 🙂

 

Thanks

3 REPLIES 3
drivard
Advocate II
Advocate II

Hi @MHammad , I don't know if this will answer your question completely, but your 2 PCF are bound to fields on the form they can communicate with each other natively.

In fact, they don't have to know each other at all the magic happens in how the properties are defined in the manifest of the PCF and to what field you bind your properties on the form.

EX.

PCF 1 = Color Picker, bound to a text field that will store the output of the color picker 

PCF 2 = Sparline control, bound to the same field. (defines the color of the sparkline)

When the output of the Color Picker changes, the color of the sparkline is updated in real-time

sparkline.gif

 

For sure the same can be applied to your use case.

 

 

 

ben-thompson
Solution Sage
Solution Sage

As @drivard points out if you bind two columns (note new terminology)  to your PCF component as the parent column is updated (in the other control) the page will pass the change to your main PCF component while triggering the updateView event and you can then run your business logic on the newly updated value.

 

As an aside, If you business logic is time consuming (even if it's just a few lines of code) I find it useful to keep an internal version of the parent value and only run the business logic after confirming that the parent value has really changed - there are a lot of other reasons why updateView can be called - a value change is one of the rarer events.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
DianaBirkelbach
Super User
Super User

Hi @MHammad , 

 

In case you can rely on common attributes, the approach from @drivard and @ben-thompson is the best.

In case you need to catch a click an raise some kind of event for the first PCF, and only on this event the second PCF should get noticed, I'm not sure if  you can filter the changing of attribute values the right way, because I'm afraid that the second control will be triggered also when the first updateView is called (you cannot know that the value is really changed, or is it because of control initialization).

Custom Events for PCFs in on the roadmap (no idea when), but until then maybe my blog about using postMessage to communicate between PCFs might help: https://dianabirkelbach.wordpress.com/2020/05/15/can-pcfs-communicate/

Kind regards,

Diana

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (89,766)