Communication between External in VB through UEF

You can use custom events to enable iFrame to iFrame communication in VB. To enable this communication channel, you must define any custom event.

To do this the external application must listen to the event and add a subscription for the custom event. This event can then be published from another external application. The event subscription and event publish actions should happen over the same context with same event name (customEventName) to ease this communication.

Note: The custom event subscription on Global Context will only be listened to if the same custom event (same customEventName) publish happens on globalContext. The event notification won't be received if the publish request of the same event is happening on top of a different context like browser tabContext or recordContext.

Example of External Applications Communication through CustomEvent for customEventName (myEvent1)

Here's a TypeScript example for adding a custom event subscription in External Application 1 and publishing the same event from External Application 2 on top of same TabContext.

//Call the below method from External Application - 1
const subscribeCustomEvent = async () => {
    const payload: ICustomEventSubscriptionRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusCustomEvent') as ICustomEventSubscriptionRequest;
    payload.setCustomEventName('myEvent1');
    const tabContext: ITabContext = await uiEventsFrameworkInstance.getTabContext('browserTabId');
    tabContext.subscribe(payload, (message: IEventResponse) => {
        const response: ICustomEventSubscriptionResponse = message as ICustomEventSubscriptionResponse;
        console.log(response.getResponseData());
        console.log(response.getResponseData().getData()); // { message: 'any data' }
        console.log(response.getResponseData().getCustomEventName()) // 'myEvent1'
    });
};

// Call the below method from External Application - 2
const publishCustomEvent = async () => {
    const payload: ICustomEventRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('CustomEvent') as ICustomEventRequest;
    payload.setCustomEventName('myEvent1');
    payload.setEventPayload({ message: 'any data' });
    const tabContext: ITabContext = await uiEventsFrameworkInstance.getTabContext('browserTabId');
    tabContext.publish(payload).then((message: IOperationResponse) => {
    }).catch((err) => {
        console.log(err);
    });
};

Here's a JavaScript example for adding a custom event subscription in External Application 1 and publishing the same event from External Application 2 on top of same TabContext.

//Call the below method from External Application - 1
const subscribeCustomEvent = async () => {
    const payload = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusCustomEvent');
    payload.setCustomEventName('myEvent1');
    const tabContext = await uiEventsFrameworkInstance.getTabContext('browserTabId');
    tabContext.subscribe(payload, (message) => {
        const response = message;
        console.log(response.getResponseData());
        console.log(response.getResponseData().getData()); // { message: 'any data' }
        console.log(response.getResponseData().getCustomEventName()) // 'myEvent1'
    });
};

// Call the below method from External Application - 2
const publishCustomEvent = async () => {
    const payload = uiEventsFrameworkInstance.requestHelper.createPublishRequest('CustomEvent');
    payload.setCustomEventName('myEvent1');
    payload.setEventPayload({ message: 'any data' });
    const tabContext = await uiEventsFrameworkInstance.getTabContext('browserTabId');
    tabContext.publish(payload).then((message) => {
    }).catch((err) => {
        console.log(err);
    });
};