Introduction
Just like we explored in Part 1, where Events in the PowerApps Component Framework (PCF) brought new possibilities to Model-Driven Apps, the same feature can be just as powerful in Canvas Apps. With Events, PCF controls can now trigger Power Fx expressions directly, enabling seamless interaction between the Custom UI components and App logic.
This is part 2 of the PCF events series, where we’ll explore how to use Events in PCF to trigger Power Fx expressions in Canvas Apps, with practical examples and real-world use cases to help you apply this pattern effectively.
Scenario: Triggering Power FX Expression through PCF control (Canvas App)
Canvas App offers great flexibility with standard controls (like buttons, dropdowns, sliders), but sometimes you hit UI limitations, such as –
- No way to create interactive, animated, or visually branded UI components.
- Lack of complex layout logic, like multi-step chips, dynamic tag selectors, or compact visual pickers.
- Can’t achieve gesture-based interactions (e.g., swipe, drag, hover preview) using default controls.
These are situations where design or user experience is central to your business logic, and native Canvas App controls just aren’t enough.
Use Case:
Let’s build a Product Selector Canvas App that includes a PCF Component to display a list of products like Refrigerator, Mobile, TV, and Audio, each with its icon and description. Here’s a screenshot attached below for how the Canvas app looks.
When the user clicks on a product, the PCF control will trigger a custom event that contains the Power Fx expression, which sets the product name in the Product Gallery that will show the corresponding product.
Let’s start with a step-by-step guide to build this.
Step-by-Step Implementation
Step 1: Define the custom event in the control’s manifest file.
Just like we did for the model-driven app scenario, define the custom event in the ControlManifest.Input.xml:
<event name=”productEvent” display-name-key=”Product Click Event” description-key=” Triggers when a product is selected” />
Step 2: Add and Trigger the Event in the PCF Control (index.ts)
Within index.ts, pass the event handler via props and invoke it at the appropriate point:
public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
const props: IProductSelectorProps = {
onProductClick: (productName: string) => {
this.selectedProduct = productName; // Update selected product
this.notifyOutputChanged();
context.events?.productEvent(productName);
}
}
return React.createElement(ProductSelector, props);
}
Step 3: Update the React Component (ProductSelector.tsx)
In ProductSelector.tsx, trigger the event when the user interacts with your custom UI like selecting the product:
export interface IProductSelectorProps {
onProductClick: (productName: string) => void;
}
export const ProductSelector: React.FC<IProductSelectorProps> = ({ onProductClick }) => {
//Your existing logic
return(
// Render list of products
<IconButton iconProps={{ iconName: "ChevronRight" }} ariaLabel="Select"
onClick={() => onProductClick(product.name)}
/>
);
}
Step 4: Configure the Canvas App (Power Fx)
In the Canvas App, add the ProductSelector PCF component and configure it to interact with the app using Power Fx.
Note: To add the PowerApps Component Framework in the Canvas App, make sure the feature is turned ON in the Power Platform Admin Center. You can find this by navigating to the admin center, selecting the environment, and clicking on Settings. Under the Product select Features option. Here, you will find a list of all the features, including the one we need to turn ON.
Insert the ProductSelector PCF control into your Canvas App.
Select the PCF Control and set the productEvent property of the component to update a global variable (SelectedProduct) with the product selected:
Set(SelectedProduct, ProductSelector.productEvent)
You can refer to the screenshot below.
Result: A Dynamic and Interactive Product Selector
Once configured, your Canvas App will respond instantly to interactions from the PCF control, providing a seamless and dynamic product selection experience. Each product click in the PCF control conditionally displays the corresponding products.
This integration showcases how PCF and Power Fx can work together to overcome Canvas App limitations and deliver a highly customized UI. You can refer to the screenshots below:
Conclusion
With the introduction of Events in the PowerApps Component Framework (PCF) for Canvas App, the gap between the Custom UI and App Logic has finally been filled. PCF controls are no longer just static, isolated elements — they can now communicate directly with Power Fx expressions, making the experience far more dynamic and interactive.