{"id":42003,"date":"2025-08-11T14:36:24","date_gmt":"2025-08-11T09:06:24","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=42003"},"modified":"2025-08-11T14:38:22","modified_gmt":"2025-08-11T09:08:22","slug":"run-power-fx-expressions-through-powerapps-component-framework-events-part-2","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2025\/08\/run-power-fx-expressions-through-powerapps-component-framework-events-part-2\/","title":{"rendered":"Run Power FX expressions through PowerApps Component Framework Events: Part 2"},"content":{"rendered":"<h3><img decoding=\"async\" class=\"alignnone size-full wp-image-42013\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2.png\" alt=\"Run Power FX expressions through PowerApps Component Framework Events Part 2\" width=\"2100\" height=\"1200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2.png 2100w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-1536x878.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-2048x1170.png 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/Run-Power-FX-expressions-through-PowerApps-Component-Framework-Events-Part-2-660x377.png 660w\" sizes=\"(max-width: 2100px) 100vw, 2100px\" \/><\/h3>\n<h3><strong>Introduction<\/strong><\/h3>\n<p>Just like we explored in <a href=\"https:\/\/www.inogic.com\/blog\/2025\/08\/how-to-call-external-scripts-using-powerapps-component-framework-events-part-1\/\" target=\"_blank\" rel=\"noopener\">Part 1<\/a>, 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.<\/p>\n<p>This is part 2 of the PCF events series, where we\u2019ll 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.<\/p>\n<p><strong>Scenario: Triggering Power FX Expression through PCF control (Canvas App)<\/strong><\/p>\n<p>Canvas App offers great flexibility with standard controls (like buttons, dropdowns, sliders), but sometimes you hit UI limitations, such as &#8211;<\/p>\n<ul>\n<li>No way to create interactive, animated, or visually branded UI components.<\/li>\n<li>Lack of complex layout logic, like multi-step chips, dynamic tag selectors, or compact visual pickers.<\/li>\n<li>Can&#8217;t achieve gesture-based interactions (e.g., swipe, drag, hover preview) using default controls.<\/li>\n<\/ul>\n<p>These are situations where design or user experience is central to your business logic, and native Canvas App controls just aren\u2019t enough.<\/p>\n<p><strong>Use Case:<\/strong><\/p>\n<p>Let&#8217;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\u2019s a screenshot attached below for how the Canvas app looks.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42004\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1.png\" alt=\"PowerApps Component Framework Events\" width=\"1247\" height=\"700\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1.png 1247w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1-300x168.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1-1024x575.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1-768x431.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/1PowerApps-Component-Framework-Events-1-660x370.png 660w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/p>\n<p>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.<\/p>\n<p>Let&#8217;s start with a step-by-step guide to build this.<\/p>\n<h3><strong>Step-by-Step Implementation<\/strong><\/h3>\n<p><strong>Step 1: Define the custom event in the control\u2019s manifest file.<\/strong><\/p>\n<p>Just like we did for the model-driven app scenario, define the custom event in the ControlManifest.Input.xml:<\/p>\n<p>&lt;event <em>name<\/em>=&#8221;<em>productEvent<\/em>&#8221; <em>display-name-key<\/em>=&#8221;Product Click Event&#8221; <em>description-key<\/em>=&#8221; Triggers when a product is selected&#8221; \/&gt;<\/p>\n<p><strong>Step 2: Add and Trigger the Event in the PCF Control (index.ts)<\/strong><\/p>\n<p>Within index.ts, pass the event handler via props and invoke it at the appropriate point:<\/p>\n<pre class=\"lang:css gutter:true start:1\">public <em>updateView<\/em>(context: ComponentFramework.Context&lt;IInputs&gt;): React.ReactElement {\r\n\r\nconst props: IProductSelectorProps = {\r\n\r\nonProductClick: (productName: string) =&gt; {\r\n\r\nthis.selectedProduct = productName; \/\/ Update selected product\r\n\r\nthis.notifyOutputChanged();\r\n\r\ncontext.events?.productEvent(productName);\r\n\r\n}\r\n}\r\nreturn React.createElement(ProductSelector, props);\r\n}<\/pre>\n<p><strong>Step 3: Update the React Component (ProductSelector.tsx)<\/strong><\/p>\n<p>In ProductSelector.tsx, trigger the event when the user interacts with your custom UI like selecting the product:<\/p>\n<pre class=\"lang:css gutter:true start:1\">export interface <em>IProductSelectorProps <\/em>{\r\n\r\nonProductClick: (productName: string) =&gt; void;\r\n\r\n}\r\n\r\nexport const <em>ProductSelector<\/em>: React.FC&lt;<em>IProductSelectorProps<\/em>&gt; = ({ onProductClick }) =&gt; {\r\n\r\n\/\/Your existing logic\r\n\r\nreturn(\r\n\r\n\/\/ Render list of products\r\n\r\n&lt;IconButton iconProps={{ iconName: \"ChevronRight\" }} ariaLabel=\"Select\"\r\n\r\nonClick={() =&gt; onProductClick(<a href=\"http:\/\/product.name\">product.name<\/a>)}\r\n\/&gt;\r\n);\r\n}<\/pre>\n<p><strong>Step 4: Configure the Canvas App (Power Fx)<\/strong><\/p>\n<p>In the Canvas App, add the ProductSelector PCF component and configure it to interact with the app using Power Fx.<\/p>\n<p><strong>Note:<\/strong> 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.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42005\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/2PowerApps-Component-Framework-Events-1.png\" alt=\"\" width=\"764\" height=\"259\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/2PowerApps-Component-Framework-Events-1.png 764w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/2PowerApps-Component-Framework-Events-1-300x102.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/2PowerApps-Component-Framework-Events-1-660x224.png 660w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/p>\n<p>Insert the ProductSelector PCF control into your Canvas App.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42006\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/3PowerApps-Component-Framework-Events-1.png\" alt=\"PowerApps-Component-Framework-Events\" width=\"366\" height=\"655\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/3PowerApps-Component-Framework-Events-1.png 366w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/3PowerApps-Component-Framework-Events-1-168x300.png 168w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><img decoding=\"async\" class=\"alignnone size-full wp-image-42007\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/4PowerApps-Component-Framework-Events.png\" alt=\"PowerApps-Component-Framework-Events\" width=\"800\" height=\"848\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/4PowerApps-Component-Framework-Events.png 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/4PowerApps-Component-Framework-Events-283x300.png 283w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/4PowerApps-Component-Framework-Events-768x814.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/4PowerApps-Component-Framework-Events-660x700.png 660w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Select the PCF Control and set the productEvent property of the component to update a global variable (SelectedProduct) with the product selected:<\/p>\n<p>Set(SelectedProduct, <em>ProductSelector<\/em>.productEvent)<\/p>\n<p>You can refer to the screenshot below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42008\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/5PowerApps-Component-Framework-Events.png\" alt=\"PowerApps Component Framework Events\" width=\"400\" height=\"755\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/5PowerApps-Component-Framework-Events.png 400w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/5PowerApps-Component-Framework-Events-159x300.png 159w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>Result: A Dynamic and Interactive Product Selector<\/strong><\/p>\n<p>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.<\/p>\n<p>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:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42009\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events.png\" alt=\"PowerApps Component Framework Events\" width=\"1242\" height=\"697\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events.png 1242w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events-300x168.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events-1024x575.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events-768x431.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/6PowerApps-Component-Framework-Events-660x370.png 660w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-42010\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events.png\" alt=\"PowerApps Component Framework Events\" width=\"1242\" height=\"696\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events.png 1242w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events-300x168.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events-1024x574.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events-768x430.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/08\/7PowerApps-Component-Framework-Events-660x370.png 660w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" \/><\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>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 \u2014 they can now communicate directly with Power Fx expressions, making the experience far more dynamic and interactive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2025\/08\/run-power-fx-expressions-through-powerapps-component-framework-events-part-2\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[44,2361],"tags":[3205],"class_list":["post-42003","post","type-post","status-publish","format-standard","hentry","category-power-apps","category-technical","tag-powerapps-component-framework-events"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/42003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=42003"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/42003\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=42003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=42003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=42003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}