External component events

Current version: 4.2

Important

From Sitecore Content Hub 4.2.0, the external component uses React.

In an external page component's code, you can subscribe to events occurring within the system.

This section lists the available events and describes how to subscribe to them.

Events

The following events are available:

Entity events:

Event	Description	Event Data
ENTITY_UPDATED	Fired when the entity (id) is updated.	Entity object
ENTITY_CREATED	Fired when an entity is created.	Entity object
ENTITY_SAVED	Fired when the entity (id) is saved.	Entity object
ENTITY_REFRESHED	Fired when the entity (id) is refreshed.	Entity object
ENTITY_DELETED	Fired when the entity (id) is deleted.	Entity object
ENTITY_CHANGED	Fired when the memberName is changed on the entity (id).	Member value
SEARCH_FINISHED	Fired when a search is completed.
SELECTION_CHANGED	Fired when a selection changes.

Realtime events:

Event Description Event Data
realtime (notificationType) Fired when a real-time notification is received notification parameters

Event	Description	Event Data
realtime (notificationType)	Fired when a real-time notification is received	notification parameters

The following data is passed to the events:

RequestResponseshell

ENTITY_CREATED: {
    definitionName: string;
    id?: number;
    modified?: Date;
    stopPropagation?: boolean;
};

ENTITY_DELETED: {
    definitionName: string;
    id?: number;
};

ENTITY_SAVED: {
    id: number;
    definitionName: string;
    modified?: Date;
};

ENTITY_REFRESHED: {
    id: number;
    modified: Date;
};

ENTITY_UPDATED: {
    id: number;
    definitionName?: string;
    modified: Date;
};

ENTITY_CHANGED: {
    id: number;
    type: "systemProperty | property | relation";
    memberName: string;
    value: unknown;
};

SEARCH_FINISHED: {
    searchIdentifier: string;
    fullText: string;
    filters: Array<FieldFilterResponseResource>;
    ids: Array<number>;
};

SELECTION_CHANGED: {
    selectionPoolIdentifier: string;
    subPoolId?: number;
    action: "add" | "remove" | "clear";
    ids?: Array<number>;
    definitionNames: Array<string>;
}

Entity created event

To subscribe to the ENTITY_CREATED event, use the following code:

RequestResponseshell

const onEntitySaved = (evt: Event): void => {
    const { definitionName, id } = (evt as CustomEvent<{ definitionName: string; id: number }>).detail;

    alert(`Entity with id ${id} and definition ${definitionName} was saved`);
};

window.addEventListener("ENTITY_SAVED", onEntitySaved);

Entity changed event

The data received from the ENTITY_CHANGED event changed depending on the data type that has changed.

If a system property changes, the following is received:

RequestResponseshell

{
  id: number;
  type: "systemProperty",
  memberName: string;
  value: unknown;
}

If a normal property changes, the following is received:

RequestResponseshell

{
  id: number;
  type: "property",
  memberName: string;
  value: unknown;
}

If a relation with the allow_navigation enabled changes, the following is received:

RequestResponseshell

{
  id: number;
  type: "relation",
  memberName: string;
  value: Array<number>;
  allowNavigation: true;
  role?: "Parent" | "Child" | undefined;
}

If a relation with the allow_navigation disabled changes, the following is received:

RequestResponseshell

{
  id: number;
  type: "relation",
  memberName: string;
  allowNavigation: false;
  role?: "Parent" | "Child" | undefined;
}

Search finished event

When monitoring the SEARCH_FINISHED event, make sure that you use the getEventSearchIdentifier method to compare the searchIdentifier with the one from the event.

Example:

RequestResponseshell

 const onSearchFinished = (evt: Event): void => {
      const {
        filters,
        searchIdentifier: eventSearchIdentifier, // We rename the property to eventSearchIdentifier.
        fullText,
      } = (
        evt as CustomEvent<{
          searchIdentifier: string;
          fullText: string;
          filters: Array<FieldFilterResponseResource>;
          ids: Array<number>;
        }>
      ).detail;

      // We check if the searchIdentifier on the event is the one we are interested in.
      if (
        eventSearchIdentifier === getEventSearchIdentifier(searchIdentifier)
      ) {
        setAppliedSearchFilters(filters);
        setFullTextFilterValue(fullText);
      }
    };

    window.addEventListener("SEARCH_FINISHED", onSearchFinished);

Note

If your version of Content Hub uses React, the ENTITY_LOADED and ENTITY-UNLOADED events are already loaded when the external component renders. We also recommend that the first initialization should take place in the root of the code instead of the render method, otherwise the initialization logic repeats unnecessarily.