ITabContext

Enables you to listen to application-level events and perform application-level operations from a specific browser tab or MSI tab. For example, listening to context open, context close, and so on.

To get the reference to TabContext, you can use the getTabContext function. This function provides a reference to the active tab in which the application is loaded. You can pass the browserTabId as an optional parameter to get a particular browser tab's context.

Here's the syntax:

getTabContext(browserTabId?: string): Promise<ITabContext>;

Parameter

Parameter Name	Required?	Description
browserTabId	No	A particular browser tab's ID. Note: You can get each browser's tabId by calling the getCurrentTabId API on the frameworkProvider from each browser tab.

/// <reference path="uiEventsFramework.d.ts"/> 
    const  frameworkProvider : IUiEventsFrameworkProvider  = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
    const tabContext: ITabContext = await frameworkProvider.getTabContext();

Here's a JavaScript example:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
const tabContext = await frameworkProvider.getTabContext();

getType Function

Returns the type of a tabContext object. The type can be Browser Tab, MSI tab or MSI Sub Tab.

The following block shows the syntax for getType:

getType(): string;

The following code sample shows an example in typescript of getType.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const type: string = tabContext.getType();
  

The following code sample shows an example in Javascript of getType.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const type = tabContext.getType();
  

subscribe

Use this API to subscribe to an event from the Fusion application. Using this API, the external application can listen to the application level events from the the Fusion application. Once an event is subscribed using this API, an external application will be notified until the subscription is disposed.

The following code sample shows the syntax for subscribe:

subscribe: (payload: IEventSubscriptionPayload, callbackFunction: (response:IEventResponsePayload) => void)
=> ISubscriptionContext;

Here are the parameters:

Parameter	Required?	Description
payload	Yes	Request object for the event being subscribed to.
callbackFunction	Yes	A callback function where we get the event response as its arguments.

The following is a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const payload: IEventRequest = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
      const subscriptionContext: ISubscriptionContext  = tabContext.subscribe(payload, (response: IEventResponse) => {
           // custom code
       });
  

The following is a code sample in JavaScript:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const payload = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
  const subscriptionContext = tabContext.subscribe(payload, (response) => {
      // custom code
  });

subscribeOnce

Use this API to subscribe to the Fusion event just once. Using this API, external applications can listen to the application level events from the Fusion application. But this subscription will be disposed of automatically after the first notification.

The following code sample shows the syntax:

subscribeOnce: (payload: IEventSubscriptionPayload, callbackFunction: (response: IEventResponsePayload) => void) => ISubscriptionContext;

Here are the parameters:

Parameter	Required?	Description
payload	Yes	Request object for the event being subscribed to.
callbackFunction	Yes	A callback function where we get the event response as its arguments.

The following is a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const payload: IEventRequest = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
      const subscriptionContext = tabContext.subscribeOnce(payload, (response: IEventResponse) => {
           // custom code
       });

The following is a code sample in JavaScript:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const payload = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
  const subscriptionContext = tabContext.subscribeOnce(payload, (response) => {
      // custom code
  });

publish

This API can inform the Fusion application to operate. The API returns a promise to which you can add a then-catch block. The then block would return the operation's status and any data returned after the process is completed.

The following code sample shows the syntax for subscribeOnce:

publish: (requestObject: IOperationRequest) => Promise<IOperationResponse>;

The following is a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1'); 
      const tabs: ITabContext[] = await frameworkProvider.getAvailableTabs();
      const tabContext: ITabContext = tabs[0];
      const payload: IOperationRequest = frameworkProvider.requestHelper.createPublishRequest('cxEventBusFocusTabOperation');
      tabContext.publish(payload).then((message: IOperationResponse) => {
           const response: IFocusTabResponseData = message as IFocusTabResponseData;
           const currentTab: ITabContext = response.getResponseData().getCurrentTab();
           const previousTab: ITabContext = response.getResponseData().getPreviousTab()
      }).catch((error: IErrorData) => {
           // error    
      });

The following is a code sample in JavaScript:

const tabs = await frameworkProvider.getAvailableTabs();
  const tabContext = tabs[0];
  const payload = frameworkProvider.requestHelper.createPublishRequest('cxEventBusFocusTabOperation');
  tabContext.publish(payload).then((response) => {
      const currentTab = response.getResponseData().getCurrentTab();
      const previousTab = response.getResponseData().getPreviousTab()
  }).catch((error) => {
      // error    
  });

dispose

This API can dispose or unregister any subscriptions that's added for an event. By disposing the subscription, the API will not trigger any further notifications to the client side receiver.

dispose:() => void;

The following code sample shows an example in typescript for dispose API.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const payload: IEventRequest = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
      const subscriptionContext: ISubscriptionContext  = tabContext.subscribe(payload, (response: IEventResponse) => {
           // custom code
      });
      tabContext.dispose();

The following code sample shows an example in Javascript for dispose API.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const payload = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusContextCloseEvent');
  const subscriptionContext  = tabContext.subscribe(payload, (response) => {
      // custom code
  });
  tabContext.dispose();
  

getSupportedEvents

This method returns all the supported events on top of globalContext.

The following code sample shows the syntax for getSupportedEvents:

getSuportedEvents(): string[];

The following code sample shows example for getSupportedEvents in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const supportedEvents: string[] = tabContext.getSupportedEvents();
  

The following code sample shows example for getSupportedEvents in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const supportedEvents = tabContext.getSupportedEvents();

getSupportedActions

This method returns all the supported actions on top of globalContext.

The following code sample shows the syntax for getSupportedActions:

getSupportedActions(): string[];

The following code sample shows example in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const supportedActions: string[] = tabContext.getSupportedActions();
  

The following code sample shows example for getSupportedActions in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const supportedActions = tabContext.getSupportedActions();

getAvailableTabs

This method returns all the available tabs on top of a specific tab or its tabContext.

The following code sample shows the syntax:

getAvailableTabs(): Promise<ITabContext[]>;

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const availableTabs: ITabContext[] = await tabContext.getAvailableTabs();
  

The following is a code sample in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const availableTabs = await tabContext.getAvailableTabs();

getActiveRecord

This method returns all the active records on a specific tab.

The following code sample shows the syntax:

getActiveRecord(): Promise<IRecordContext>;

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const activeRecord: IRecordContext = await tabContext.getActiveRecord();
  

The following is a code sample in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const activeRecord = await tabContext.getActiveRecord();

getAvailableRecord

This method returns all the available records on a specific tab.

The following code sample shows the syntax:

getAvailableRecords(): Promise<IRecordContext[]>;

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
      const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
      const tabContext: ITabContext = await frameworkProvider.getTabContext();
      const availableRecords: IRecordContext[] = await tabContext.getAvailableRecords();
  

The following is a code sample in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
  const tabContext = await frameworkProvider.getTabContext();
  const dependentTabs = await tabContext.getDependentTabs();

getTabInfo

This method returns the tab ID, MSI tab ID and MSI tab ID associated with the TabContext.

The following code sample shows the syntax:

getTabInfo(): ITabInfo;

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
const tabContext: ITabContext = await frameworkProvider.getTabContext();
const tabInfo: ITabInfo = tabContext.getTabInfo();
  

The following is a code sample in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
const tabContext = await frameworkProvider.getTabContext();
const tabInfo = await tabContext.getTabInfo();

getEngagementInfo

This method returns the engagements associated with the TabContext.

The following code sample shows the syntax:

getEngagementInfo(): Promise<IEngagementInfo>;

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
const tabContext: ITabContext = await frameworkProvider.getTabContext();
const engagementInfo: IEngagementInfo = await tabContext.getEngagementInfo();
  

The following is a code sample in Javascript.

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
const tabContext = await frameworkProvider.getTabContext();
const engagementInfo = await tabContext.getEngagementInfo();