Subscribe to field changes

Required extension points: any SitecoreAI Page builder extension point

Required SDK packages: client

Required API access: none

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.