1. Developer guides

Subscribe to field 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 field changes. A field change occurs when, for example, the SitecoreAI user modifies, clears, or resets the value of a content item field or a page field.

To subscribe to field 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 unsubscribeFields: (() => void) | undefined;

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

    unsubscribeFields = client.subscribe("pages.content.fieldsUpdated", {
  onData: (data) => {
    /* Example data:
    { 
      itemId: string,
      language: string,
      itemVersion: number,
      fields: [
        {
          fieldId: string,
          value: string,
          originalValue?: string,
        },
        {
          fieldId: string,
          value: string,
          originalValue?: string,
        }
      ]
    }
    */
    console.log("Fields updated:", data);
  },
  onError: (err) => {
    console.error("Fields 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 () => {
  unsubscribeFields?.();
}
    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 Fields updated.

  6. Make a field change. For example, select a content item on the page canvas and edit one of its fields in the panel on the right-hand side of the canvas. A new log appears in the console, containing the details of the field change.

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