Exchange Data Between the Page and an Embedded App (Developer Preview)

Pass data from the Salesforce page to your embedded app, and respond in the page to events your app raises. The <lwc-shell> host and the @salesforce/experimental-mfe-bridge running inside your app exchange messages across the iframe boundary.

This topic describes the Developer Preview API. The host method shell.updateData() and the @salesforce/experimental-mfe-bridge package are Developer Preview only. In the generally available release, data exchange moves to a reactive UI-state model rather than an imperative method call, so don’t build long-term code around updateData(). To move an app to the generally available version, see Migrate from the Developer Preview API.

Note

How It Works

The page sends data to your app by calling a method on the shell. Your app receives that data through the bridge. When your app raises an event, the bridge forwards it across the iframe boundary, and the shell re-fires it in the page so your wrapper component can respond.

Send Data to the Embedded App

Call updateData on the shell with the data your app needs.

1shell.updateData({ recordId: "001xx000003DGb2AAG", locale: "en_US" });

If you call updateData before the app’s bridge has finished connecting, the shell holds the data and delivers it once the connection is ready. You don’t have to wait for a ready signal before sending the first payload.

Data crosses the iframe boundary through the browser’s messaging channel. Pass values that survive that boundary. Plain objects, strings, numbers, arrays, and booleans are safe. Values that can’t be cloned, such as functions, cause an error.

Note

Receive Data in the Embedded App

Inside your app, read data from the bridge as it arrives.

1import { bridge } from "@salesforce/experimental-mfe-bridge";
2
3bridge.addEventListener("data", () => {
4  const data = bridge.getData();
5  // use data.recordId, data.locale, and so on
6});

Respond to Events from the Embedded App

When your app dispatches an event through the bridge, the shell re-fires it in the page. Subscribe with addEventListener on the shell element.

1shell.addEventListener("save-complete", (event) => {
2  // handle event.detail
3});

Exchange Data Between the Page and an Embedded App (Developer Preview)

How It Works

Send Data to the Embedded App

Receive Data in the Embedded App

Respond to Events from the Embedded App

See Also