How to handle events and reset component in PCF

Power Apps Component Framework (PCF) doesn’t support (yet?) some of the features you may expect – I certainly did:

  • On.. event handler, like OnSelect for button or OnTimeEnd for a timer
  • Reset a component to the initial state via Reset(…) function

While this seems to me rather a gap and missing capability that will be in the framework one day, there are workarounds on how to achieve the desired behaviour now.

On… events

While you cannot do a property like OnTimerEnd, for example, there is a standard property OnChange where you can write the code that handles events. You need 2 things:

  • A “bound” (output) property that serves as an indicator of the type of the event or data required for the event. The OnChange handler that an app creator will write would use this property to determine the event and data.
  • Code that would notify PCF that the data has changed to trigger the OnChange event.

Example: a payment component processing payment has 4 distinct states “new”, “processing”, “completed” and “error”. As you cannot write directly OnCompleted or OnError handler, you can achieve the same by creating a property TransactionStatus and allowing to write handling code on the standard OnChange event.

Thanks to v-yutliu-msft, DianaBilkerbach and ben-thompson from the Power Apps Community forum who suggested this approach.

Reset component

PCF components cannot be reset to the initial state as native Power App components using the Reset(Component) function, and neither can you write a Component.Reset() method. The workaround is to use a property as a “flip switch” to reset the component.

The idea is to define a boolean property called, say, Reset which is “false” by default but when is set to “true” initiates the internal component reset. The change from “true” to “false” has no observable effect except it makes the component ready for the next reset.

I hope this might help with your awesome PCF components development! Feel free to get in touch here, Power Apps tech community (known as TechnoKitty) or connect on LinkedIn.

Leave a Reply

%d