ISidePaneContext

This is the object which encapsulates all the UI Events Framework-provided SidePane events and actions. This object only acts on UIEF advanced side panes. The legacy side pane doesn't support the events and actions supported by this object.

To get the reference to SidePaneContext, you can use the getSidePaneContext function. This function provides a reference to the sidePaneContext of a particular sidePaneId.

Note: SidePaneId denotes the ID with which user enabled the advanced side panes (multiple side panes) in UEF.

Here's the syntax:

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

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 sidePaneContext: ISidePaneContext = await frameworkProvider.getSidePaneContext('sidepane-id');
  

The following is a code sample in Javascript.

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

Functions

subscribe

Use this function to listen to a SidePaneContext supported event.

The following sample shows the syntax:

subscribe: (requestObject: IEventRequest, callbackFunction: (response:IEventResponse) => void) => ISubscriptionContext; 

The following is a code sample in Typescript.

/// <reference path="uiEventsFramework.d.ts"/>
  const listenSidePaneOpenEvent = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  const payload: IEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusSidePaneOpenEvent');
  sidePaneContext.subscribe(payload, (res: IEventResponse) => { 
  const response = res as ISidePaneOpenEventResponse;
  const responseData: ISidePaneData = response.getResponseData(); responseData.getActiveSectionId();
  });
  }
  

The following is a code sample in Javascript.

const listenSidePaneOpenEvent = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
      const payload = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusSidePaneOpenEvent');
      sidePaneContext.subscribe(payload, (res) => {
          const response = res as ISidePaneOpenEventResponse;
          const responseData = response.getResponseData();
          console.log(responseData.getActiveSectionId());
      });
  } 

subscribeOnce

Use this function to listen once to a SidePaneContext supported event.

The following code sample shows the syntax:

subscribeOnce: (requestObject: IEventRequest, callbackFunction: (response:IEventResponse) => void) => ISubscriptionContext; 

The following is a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>
  const listenSidePaneOpenEvent = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  const payload: IEventRequest = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusSidePaneOpenEvent');
  sidePaneContext.subscribeOnce(payload, (res: IEventResponse) => { 
  const response = res as ISidePaneOpenEventResponse;
  const responseData: ISidePaneData = response.getResponseData(); responseData.getActiveSectionId();
  });
  }

The following is a code sample in JavaScript:

const listenSidePaneOpenEvent = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
      const payload = uiEventsFrameworkInstance.requestHelper.createSubscriptionRequest('cxEventBusSidePaneOpenEvent');
      sidePaneContext.subscribeOnce(payload, (res) => {
          const response = res as ISidePaneOpenEventResponse;
          const responseData = response.getResponseData();
          console.log(responseData.getActiveSectionId());
      });
  } 

publish

Use this function to publish a SidePane supported operation on the SidePaneContext object.

The following code sample shows the syntax:

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

The following is a code sample in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>    
  const updateSidePaneContext = async () => {
      const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
      const payload:IUpdateSidePaneRequest = uiEventsFrameworkInstance.requestHelper.createPublishRequest('UpdateSidePane') as IUpdateSidePaneRequest;
      payload.setSectionId('newSectionId'); payload.setIcon('newIcon'); payload.setVisibility(true);
      sidePaneContext.publish(payload).then((response: IOperationResponse) => {
          console.log(response);    
      }).catch(() => { })
  } 

The following is a code sample in JavaScript:

const updateSidePaneContext = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
      const payload = uiEventsFrameworkInstance.requestHelper.createPublishRequest('UpdateSidePane');
      payload.setSectionId('newSectionId'); payload.setIcon('newIcon'); payload.setVisibility(true);
      sidePaneContext.publish(payload).then((response: IOperationResponse) => {    
          console.log(response);    
      }).catch(() => { })
  }

dispose

Use this function to remove all events subscribed on SidePaneContext object.

dispose:() => void;

The following code sample shows an example in Typescript:

/// <reference path="uiEventsFramework.d.ts"/>
  const disposeSidePaneEvents = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  sidePaneContext.dispose();
  }  

The following code sample shows an example in JavaScript:

const disposeSidePaneEvents = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
      sidePaneContext.dispose();
  } 

getSupportedEvents

Use this function to get all the supported events on the SidePaneContext object.

The following code sample shows the syntax:

getSupportedEvents(): string[];

The following code sample shows example in Typescript.

/// <reference path="uiEventsFramework.d.ts"/> 
  const getSupportedEvents = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  const supportedEvents: string[] = sidePaneContext.getSupportedEvents();
  }  

The following code sample shows example in Javascript.

const getSupportedEvents = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
     const supportedEvents = sidePaneContext.getSupportedEvents();
  } 

getSupportedActions

Use this function to get all the supported actions on the SidePaneContext object.

The following code sample shows the syntax:

getSupportedActions(): string[];

The following code sample shows example in Typescript.

/// <reference path="uiEventsFramework.d.ts"/> 
  const getSupportedActions = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  const supportedActions: string[] = sidePaneContext.getSupportedActions();
  }    

The following code sample shows example for getSupportedActions in Javascript.

const getSupportedActions = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
     const supportedActions = sidePaneContext.getSupportedActions();
  } 

getSidePaneContextId

Use this function to get the sidePane contextId of the SidePaneContext object. .

The following code sample shows the syntax:

getSidePaneContextId(): string;

The following code sample shows example in Typescript.

/// <reference path="uiEventsFramework.d.ts"/> 
  const getContextId = async () => {
  const uiEventsFrameworkInstance: IUiEventsFrameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
  const sidePaneContext: ISidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
  const contextId: string = sidePaneContext.getSidePaneContextId();
  }      

The following code sample shows example for getSupportedActions in Javascript.

const getContextId = async () => {
      const uiEventsFrameworkInstance = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('appname', 'v1');
      const sidePaneContext = await uiEventsFrameworkInstance.getSidePaneContext('sidePaneId');
     const contextId = sidePaneContext.getSidePaneContextId();
  }