How to Refresh a PCF Control on View Level Using the OOB Refresh Button in Dynamics 365

💡 Introduction

When working with Power Apps Component Framework (PCF) controls in Dynamics 365 CRM, you may need to refresh the control’s data when users click the out-of-the-box Refresh button in a form or view.

However, the default refresh behavior does not automatically update custom PCF datasets. To achieve a seamless refresh experience, you can use a JavaScript bridge to trigger a refresh event from the form and listen to it inside the PCF control.

In this guide, we’ll build a simple, reusable setup that works for any Dataset or Field PCF Control.

⚙️ Step 1: Set Up a Form OnLoad Function (JavaScript)

We’ll start by adding an OnLoad event to your form in Dynamics 365.

This function listens for the form’s refresh and then broadcasts a message to all active PCF controls.

// form-refresh.js

function onFormLoad(executionContext) {
    const formContext = executionContext.getFormContext();

    // Hook into the form's OnLoad event
    formContext.data.addOnLoad(function () {
        // Send message to all PCF controls
        window.postMessage(
            {
                type: "REFRESH_PCF_CONTROL",
                controlName: "CloudVervePCFGrid", // use your PCF name
            },
            "*"
        );
    });
}

🧩 Add this script to your form:

1. Upload the JS web resource (e.g., form-refresh.js).

2. Add the onFormLoad function to the form’s OnLoad event.

3. Pass the execution context as the first parameter.

📨 Step 2: Send Message from the Form (Trigger Refresh Event)

When a user clicks the Refresh button, the form reloads its data and fires the OnLoad event again.

Our JavaScript automatically sends a postMessage with the type "REFRESH_PCF_CONTROL" and the specific control name.

This message will be received by any PCF control that listens for it.

🧠 Step 3: Add Event Listener in the PCF Control

Inside your PCF control’s React (or TypeScript) component, add a listener for the message event.

// index.ts (or your main control class)
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
    this._context = context;
    this._container = container;

    // Add window event listener
    window.addEventListener("message", this.handleMessage.bind(this));
}

private handleMessage(event: MessageEvent) {
    const data = event.data;
    if (data && data.type === "REFRESH_PCF_CONTROL" && data.controlName === "CloudVervePCFGrid") {
        console.log("🔁 Refresh event received for PCF control");
        this.refreshData(); // Custom method to retrieve new records
    }
}

private async refreshData() {
    // Example: refresh dataset
    await this._context.webAPI.retrieveMultipleRecords("account", "?$select=name,accountnumber");
    this._notifyOutputChanged();
}

This ensures that only the intended PCF control refreshes when the matching message is received.

🔂 Step 4: Compare Message and Trigger Data Refresh

By matching the message’s controlName in the listener, you can selectively refresh the desired control.

This is especially helpful if your form has multiple PCF components, avoiding unwanted reloads.

You can replace retrieveMultipleRecords() with any API or method that rebinds your data — e.g., calling Dataverse, refreshing datasets, or re-rendering React states.

🧩 Putting It All Together

✅ Form Level (JavaScript): Sends the "REFRESH_PCF_CONTROL" message whenever the form reloads.

✅ PCF Level: Listens for the event, checks control name, and runs the refreshData() function.

This approach ensures:

• Real-time data updates

• No custom ribbon buttons required

• Works seamlessly with native Dynamics 365 UI

• Keeps PCF behavior modular and independent

🚀 Example Use Case

Imagine you’ve built a Kanban PCF control for Opportunities.

When a sales user clicks the Refresh button on the Opportunity form, your Kanban instantly reloads to reflect the latest stage updates — no page reload, no extra clicks.

🧩 Conclusion

With just a few lines of JavaScript and event handling inside your PCF control, you can sync your PCF data with the standard form refresh flow.

This makes your custom components feel fully integrated with the Dynamics 365 native UX, improving both performance and user experience.

👨‍💻 By CloudVerve Technologies

Experts in PCF Control Development, Power Platform Customization, and Dynamics 365 CRM Solutions.

We help enterprises build intuitive, scalable UI components for real-world CRM use cases.

📞 Contact us: www.cloudverve.in