{"id":41977,"date":"2025-08-08T14:48:08","date_gmt":"2025-08-08T09:18:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=41977"},"modified":"2025-08-08T14:48:08","modified_gmt":"2025-08-08T09:18:08","slug":"how-to-call-external-scripts-using-powerapps-component-framework-events-part-1","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2025\/08\/how-to-call-external-scripts-using-powerapps-component-framework-events-part-1\/","title":{"rendered":"How to Call External Scripts using PowerApps Component Framework Events: Part 1"},"content":{"rendered":"

\"How<\/p>\n

The Power Apps Component Framework (PCF) has long empowered developers to create custom controls for Power Apps, but its interaction capabilities were historically limited.<\/p>\n

In model-driven apps, form interactions were confined to some core events, which are OnLoad, OnChange, TabStateChange, and OnSave, tied to the form lifecycle or field updates.<\/p>\n

PCF controls could only trigger OnChange by updating a bound field, restricting direct communication with the parent form. Similarly, in canvas apps, PCF controls faced challenges in dynamically interacting with Power Fx expressions or external scripts in a model-driven app.<\/p>\n

With the introduction of Events in PCF, these barriers have been significantly reduced. Developers can now define and raise custom events within PCF controls, enabling seamless communication with form scripts in model-driven apps or Power Fx logic in canvas apps.<\/p>\n

This blog is part 1 of the PCF events series, where we\u2019ll explore how to leverage Events in PCF to call external scripts in Model-Driven Apps, walk through practical examples, and highlight best practices and use cases to implement these patterns effectively.<\/p>\n

Scenario: Calling our Custom Events in Form Script through PCF control (Model-driven App)<\/strong><\/h3>\n

Let\u2019s consider a scenario where an admin configures user-specific features via a User Feature Settings form within CRM. The form includes a PCF component that displays a dropdown of features fetched from a Features List API, including each feature\u2019s name and its supported regions, respectively.<\/p>\n

Now, here, instead of binding the onChange event within the CRM, which will require updating our bound field of the PCF control to indirectly trigger form scripts, we created our custom event named featureChange. This event triggers whenever the feature field value changes, allowing seamless interaction of the PCF component within the CRM form itself.<\/p>\n

Here is our visual image for our PCF component.<\/p>\n

\"PowerApps<\/p>\n

Now, when the admin selects a feature, the form checks if the feature is supported in the user’s region and enables the respective settings. If not, a form-level notification is displayed.<\/p>\n

Let\u2019s walk through how to implement events in our PCF control with a step-by-step guide to implement events.<\/p>\n

Step-by-Step Implementation<\/strong><\/h3>\n

Step 1: Define the Custom Event in the PCF Manifest<\/strong><\/p>\n

Define the custom event that the PCF control will expose. This is done in the same way as we define properties in the ControlManifest.Input.xml<\/em>.<\/em> Here’s what the new event declaration looks like:<\/p>\n

<event name<\/em>=”featureChange<\/em>” display-name-key<\/em>=”featureChange” description-key<\/em>=”The event to handle feature change.” \/><\/p>\n

Step 2: Implement the Event in the PCF Control (index.ts)<\/strong><\/p>\n

In index.ts<\/em>, define a method to fire the event and pass it to your React component via props. Include parameters (e.g., a selected license key) to provide context to the form script.<\/p>\n

private handleValidate <\/em>= () => {\r\nif (this._selectedFeature) {\r\n\r\nthis._context.events.featureChange<\/em>({\r\n\r\nfeatureKey: this._selectedFeature,\r\n\r\nsupportedRegions: this._supportedRegions.map(r => r.toLowerCase()),\r\n\r\n});\r\n\r\n}\r\n\r\n};\r\n\r\n\u00a0\r\n\r\nprivate handleFeatureChange<\/em>= (key: string, supportedRegions: string[]) => {\r\n\r\nthis._selectedFeature = key;\r\n\r\nthis._supportedRegions = supportedRegions;\r\n\r\n};\r\n\r\npublic updateView<\/em>(context: ComponentFramework.Context<IInputs>): React.ReactElement {\r\n\r\nconst props: IFeatureControlProps= {\r\n\r\nfeatureChange<\/em>: this.handleValidate,\r\n\r\nonFeatureChange<\/em>: this.handleFeatureChange,\r\n\r\n};\r\n\r\nreturn React.createElement(FeatureControl, props);\r\n\r\n}<\/pre>\n
Step 3: Update the React Component (FeatureControl.tsx)<\/strong><\/p>\n
In your React component, define the props interface and bind the event handler to the onChange<\/strong> of the Dropdown. So, when the user changes the option in the Dropdown, the onFeatureChange <\/strong>and featureChange <\/strong>methods will be triggered. The featureChange <\/strong>is the event that we had set in the Manifest file.<\/p>\n
export interface IFeatureControlProps<\/em>{\r\n\r\nfeatureChange<\/em>: () => void;\r\n\r\nonFeatureChange<\/em>: (selectedKey: string, regions: string[]) => void;\r\n\r\n}\r\n\r\nexport const FeatureControl <\/em>= (props<\/em>: IFeatureControlProps<\/em>) => {\r\n\r\nconst [selectedKey, setSelectedKey] = React.useState<string | undefined>(undefined);\r\n\r\nreturn (\r\n\r\n<div>\r\n\r\n<Dropdown options<\/em>={options<\/em>} selectedKey<\/em>={selectedKey<\/em>}\r\n\r\nonChange<\/em>={(event,option) => {\r\n\r\nconst key = option?.key as string;\r\n\r\nconst regions = (option as IFeatureOption)?.data?.supportedRegions || [];\r\n\r\nsetSelectedKey(key);\r\n\r\nprops.onFeatureChange(key,regions);\r\n\r\nif(key) { props.featureChange<\/em>(); }\r\n\r\n}}\r\n\r\nplaceholder<\/em>=\"Select a feature\"\r\n\r\nstyles<\/em>={{ root: { minWidth: 200 } }}\r\n\r\n\/>\r\n\r\n<\/div>\r\n\r\n);};<\/pre>\n
Step 4: Update the Existing Form Script (TypeScript Web Resource)<\/strong><\/p>\n
Update your existing web resource to handle the featureChange event. Register it on the form\u2019s on-load event<\/strong> to attach the event handler to the PCF control. So, when the event is triggered from the PCF control, it invokes the method defined in this script –<\/p>\n
namespace IKL{\r\n\r\nexport namespace FeatureControl {\r\n\r\nexport class CheckFeature {\r\n\r\nprivate readonly controlName = \"sha_features\";\r\n\r\npublic onLoad<\/em>(executionContext: any): void {\r\n\r\nlet formContext = executionContext.getFormContext();\r\n\r\nlet featureControl = formContext.getControl(this.controlName);\r\n\r\nif (featureControl ) {\r\n\r\nfeatureControl.addEventHandler(\"featureChange\", (params: any) => {\r\n\r\nthis.onFeatureChange(params, formContext);\r\n\r\n});\r\n\r\n}\r\n\r\n}\r\n\r\npublic onFeatureChange<\/em>(params: any, formContext: any): void {\r\n\r\n\/\/Here, our logic for enabling settings and showing form-level notification will come.\r\n\r\n}\r\n\r\n}\r\n\r\n}\r\n\r\n}\r\n\r\nlet featureValidate = new IKL.FeatureControl.CheckFeature();<\/pre>\n

\n<\/strong>Summary: What\u2019s Happening Here:<\/strong><\/p>\n