1. Developer guides

Subscribe to page layout changes

Version: 0.4

Required extension points: any SitecoreAI Page builder extension point

Required SDK packages: client

Required API access: none

Before you begin

  • Complete the SDK quick start.

    In the quick start, you make your first query by running client.query("application.context").

If your app uses any of the SitecoreAI Page builder extension points, you can subscribe to page layout changes. A layout change occurs when, for example, the SitecoreAI user adds, moves, or removes a component, or configures the layout properties of a component.

To subscribe to layout changes:

  1. In the SDK initialization code where you run the useMarketplaceClient hook, at the top level of the Effect Hook, create a variable:

    let unsubscribeLayout: (() => void) | undefined;

  2. In the Effect Hook, below the "application.context" query, create a subscription:

    unsubscribeLayout = client.subscribe("pages.content.layoutUpdated", {
  onData: (data) => {
    /* Example data:
    { 
      itemId: string,
      language: string,
      itemVersion: number,
      layout: {
        type: "FINAL" | "SHARED",
      }
    }
    */
    console.log("Layout updated:", data);
  },
  onError: (err) => {
    console.error("Layout subscription error:", err);
  }
});

  3. In the Effect Hook's callback function, add a return statement as the last statement to clean up subscriptions, then save your changes:

    return () => {
  unsubscribeLayout?.();
}
    Important

    Always clean up subscriptions to prevent memory leaks.

  4. In the SitecoreAI Page builder, open your web browser's console, refresh the page, then open your Marketplace app.

  5. In the console, filter your logs for Layout updated.

  6. Make a layout change. For example, on the Components tab, select a component and drag it to a location on the page canvas. A new log appears in the console, containing the details of the layout change.

If you have suggestions for improving this article, let us know!