IUIEventsFrameworkProvider

The IUiEventsFrameworkProvider is the object on top of which we can call the APIs of the ui-events-framework.

It also provides a requestHelper which can be used to generate the request payload for those APIs. This section explains the methods provided by the IUiEventsFrameworkProvider object. The functions are show the following topics:

getVersion

The getVersion method returns the version with which the framework is initialized.

The following code example shows the syntax for getVersion method:

getVersion(): string;

The following code example in Typescript shows were the getVersion method is called:

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

The following code example in Javascript shows where the getVersion method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
const version  = frameworkProvider.getVersion();

getApplicationName

The getApplicationName method returns the application name with which the framework is initialized.

The following code example shows the syntax for getApplicationName function:

getApplicationName(): string;

The following code example in Typescript shows were the getApplicationName function is called:

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

The following code example in Javascript shows were the getApplicationName function is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
const appName  = frameworkProvider.getApplicationName(); // appName = 'MyFirstExtensionID'

getGlobalContext

GlobalContext provides the ability to listen to application-level events and perform application-level operations. For example, listening to context open, context close, and so on.

Use the getGlobalContext function to get the reference to GlobalContext.

The following code example shows the syntax for getGlobalContext method:

getGlobalContext(): Promise<IGlobalContext>;

The following code example in Typescript shows were the getGlobalContext method is called:

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

The following code example in Javascript shows were the getGlobalContext method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID');const globalContext = await frameworkProvider.getGlobalContext();

getAvailableRecords

This method returns all the valid active objects present in the application.

The following code example shows the syntax:

getAvailableRecords(tabId?: string): Promise<IRecordContext[]>;

Note: The method will return the active browser's RecordContexts list if browserTabId isn't passed.

The following code example in Typescript shows were the method is called:

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

The following code example in Javascript shows were the method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
const availableRecords = await frameworkProvider.getAvailableRecords();

getCurrentTabId

Returns the current browser tab's tabId.

The following code example shows the syntax:

getCurrentTabId(): Promise<string>;

The following code example in Typescript shows were the method is called:

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

The following code example in Javascript shows were the method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
    const currentTabId = await frameworkProvider.getCurrentTabId();

getActiveTabId

Returns the application's active tab.

The following code example shows the syntax:

getActiveTab(): Promise<ITabContext>;

The following code example in Typescript shows were the method is called:

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

The following code example in Javascript shows were the method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
    const activeTab = await frameworkProvider.getActiveTab();

getAvailableTabs

Returns all the available tabs that the application has loaded. It can be MSI tab or a browser tab.

The following code example shows the syntax:

getAvailableTabs(): Promise<ITabContext[]>;

The following code example in Typescript shows were the method is called:

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

The following code example in Javascript shows were the method is called:

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

getTabContext

Returns the active tabContext in the application if no optional parameter is passed.

The following code example shows the syntax:

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

Note: The method will return an active TabContext if the browserTabId isn't passed.

browserTabId parameter

Parameter Name	Required	Description
browserTabId	No	TabId for the browser tab which the application has loaded.

The following code example in Typescript shows were the method is called:

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

The following code example in Javascript shows were the method is called:

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

dispose

This API can dispose or unregister all subscriptions added on the provider object. This method essentially removes all the subscriptions added on globalContext object and recordContext object created from the frameworkProvider object.

dispose:() => void;

The following code sample shows an example in typescript to dispose all subscriptions from frameworkProvider.

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

The following code shows an example in Javascript of how to dispose all subscriptions from frameworkProvider:

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

getActiveTabId

Returns the current active tab's context in the application instances.

The following code example shows the syntax:

getActiveTab(): Promise<ITabContext>;

The following code example in Javascript shows were the method is called:

const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1'); 
const activeTabContext:ITabContext = await uiEventsFrameworkInstance.getActiveTab();  

getCurrentBrowserTabContext

Returns the browser tab context in which the code is executed. The response of this API is always a browser tabContext.

Note: If you call this API from an MCA toolbar window, it will return its parent browser tab's context.

The following code example shows the syntax:

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

The following code example in Javascript shows were the method is called:

const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1'); 
const browserTabContext:ITabContext = await getCurrentBrowserTabContext();  

getModalWindowContext

Part of the UEF provider object used to perform actions on ModalWindow in the Fusion application. You can get the ModalWindowContext by calling getModalWindowContext API provided in UEF provider object.

The following code example shows the syntax:

getModalWindowContext(): Promise<IModalWindowContext>; 

The following code example in Javascript shows were the method is called:

const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1'); 
const modalWindowContext:IModalWindowContext = await getModalWindowContext();   

getSidePaneContext

Use to get the sidePaneContext object on top of the call to the UEF subscribe and publish APIs to listen to SidePane Open Close events and perform SidePane Expand Collapse, Update (icon update, and section update) actions.

The following code example shows the syntax:

getSidePaneContext(sidePaneId: string): Promise<ISidePaneContext>;

The following code example in Javascript shows were the method is called:

const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1'); 
const sidePaneContext:ISidePaneContext = await getSidePaneContext('sidePane-id');   

GetRecordContext

RecordContext allows listening to all events and operations related to an object. For example, listening to field value of a record change either before saving a record event, ot after saving a record event, and so on.

Use the getRecordContext function to get the reference to RecordContext.

The following code example shows the syntax for getRecordContext function:

getRecordContext(recordType?: string, recordId?: string): Promise<IRecordContext>;

The following table lists the parameters for this function:

Parameter	Required?	Description
recordType	No	The object type. For example, Service Request, Account, and so on.
recordId	No	Unique identifier for the object.

Note: If recordType and recordId values are not supplied,the active Records context is fetched.

The following code sample shows an example in typescript to get the getRecordContext.

/// <reference path="uiEventsFramework.d.ts"/>
const frameworkProvider: CX_SVC_UI_EVENTS_FRAMEWORK.IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
const recordContext: CX_SVC_UI_EVENTS_FRAMEWORK.IGlobalContext = await frameworkProvider.getRecordContext('SeviceRequest','SeviceRequestNumber');

The following code example in Javascript shows were the getRecordContext method is called:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID');const recordContext = await frameworkProvider.getRecordContext('SeviceRequest','SeviceRequestNumber');

getActiveRecord

This method returns the active objects type and unique identifier.

The following code sample shows the syntax for getActiveRecord method:

getActiveRecord(): IExtensionContext;

The following code sample shows an example in typescript to get the getActiveRecord method.

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

The following code example in Javascript shows were the getActiveRecord method is called:

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

getAvailableRecords

This method returns all the valid active objects present in the application.

The following code sample the syntax for getAvailableRecords method.

getAvailableRecords(): IExtensionContext[];

The following code sample shows an example in typescript to get the getAvailableRecords method.

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

The following code example in Javascript shows getAvailableRecords method:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');
const availableRecords = frameworkProvider.getAvailableRecords();

requestHelper Object

Use this object to generate request objects for events and operations. This request object needs to be furnished to APIs which are used to subscribe to events or perform operations.

Here's the syntax:

requestHelper: IRequestHelper;
    IRequestHelper {
         createSubscriptionRequest(eventName: string): IEventRequest;
         createPublishRequest(operationName: string): IOperationRequest;
    }

createSubscriptionRequest Function

Use this function to create a requestObject for an event subscription.

browserTabId parameter

Parameter Name	Required	Description
eventName	Yes	Subscribed event name.

The following shows a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/> 
    const frameworkProvider: IUiEventsFrameworkProvider =
    await  CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID''v1');    
    const globalContext: IGlobalContext = await  frameworkProvider.getGlobalContext();   
    const requestObject: IEventRequest = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusTabOpenEvent');
      
    globalContext.subscribe(requestObject,(response: IEventResponse) => {
        // custom code
    });

The following shows a code example in Javascript:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');    
    const globalContext = await  frameworkProvider.getGlobalContext();   
    const requestObject = frameworkProvider.requestHelper.createSubscriptionRequest('cxEventBusTabOpenEvent');
      
    globalContext.subscribe(requestObject,(response) => {
        // custom code
    });

createPublishRequest Function

Used to create a requestObject for an event subscription.

createPublishRequest parameter

Parameter Name	Required	Description
operationName	Yes	Operation name that should be subscribed to.

The following shows a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>  
    const frameworkProvider: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
    const globalContext: IGlobalContext = await frameworkProvider.getGlobalContext();
    
    const restCallRequest: IServiceConnectionRequest = (frameworkProvider.requestHelper.createPublishRequest('InvokeServiceConnection') as IServiceConnectionRequest);
    restCallRequest.setServiceConnectionId('interactions/update_interactions');
    restCallRequest.setParameters({ "interactions_Id": "12345" });
    restCallRequest.setBody({ "StatusCd": "ORA_SVC_CLOSED" });
    
    globalContext.publish(restCallRequest).then((message: IOperationResponse) => {
            // custom code
            const response = (message as IServiceConnectionResponse).getResponseData();
            console.log(response.getStatus());
            console.log(response.getBody());
    }).catch((error: IErrorData) => {
            // custom code
    });

The following shows a code example in Javascript:

const frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('MyFirstExtensionID', 'v1');
    const globalContext = await frameworkProvider.getGlobalContext();
    
    const restCallRequest = (frameworkProvider.requestHelper.createPublishRequest('InvokeServiceConnection'));
    restCallRequest.setServiceConnectionId('interactions/update_interactions');
    restCallRequest.setParameters({ "interactions_Id": "12345" });
    restCallRequest.setBody({ "StatusCd": "ORA_SVC_CLOSED" });
    
    globalContext.publish(restCallRequest).then((message) => {
        // custom code
        const response = message.getResponseData();
        console.log(response.getStatus());
        console.log(response.getBody());
    }).catch((error) => {
        // custom code
    });