Extend Screen Pop

When a chat or call panel is accepted it appears over an agent's screen giving the agent more information and opportunities to help their customer while in chat or call. You can extend this screen pop dialog to fit your business needs.

Here are the default rules and behaviors:

Rules

Rule priority	Rules	Screen pop	Behavior
1	Chat, call with SR information	SR Details page	Based on the service center settings - show SR details or SR foldout view
2	Unknown contact with SR details	SR Details page	Based on the service center settings - show SR details or SR foldout view
3	Unknown contact without SR details	SVC-Contact Createpage	Option to search for another contact Create contact form Fields should be auto populated
4	Known contact without SR	SVC-Contact page	Just contact details with Chat / call panel

The event is defined at Application level and is fired when a navigation within Service occurs in MSI mode.

The event is fired with following payload which can help with customer decision making:

{
  "extraAttributes": {
        "svcNavigateEvent": {
            "application": "",
            "flow": "",
            "tabInfo": ""
        },
    },
  "navigationType": "SCREENPOP|DRILLDOWN",
  "engagmentData": {
    "inData": "object",
    "SVCMCA_INTERACTION_ID": "string",
    "engagementType": "PHONE|CHAT",
    "engagementId": "string",
    "multiMatches": boolean
  }
}

svcNavigateEvent: The original event
navigationType: Can be SCREENPOP or DRILLDOWN, for navigation when a chat or call is started. It will be SCREENPOP, and for every other kind of navigation it will be DRILLDOWN.
engagmentData: A chat or call's IVR or Engagement data based on business logic you add.

The action chain contains the following return type which decides whether default actions also need to be executed or skipped. To enable this behavior, set the stopPropagation property to True.

{
  "stopPropagation": true,
}

Note: If stopPropagation is set to False, the action will execute the customer Listener first and then execute the default behavior.

Required page parameters for an object

To screen pop a page or object we need to pass required parameters to the page while calling the svcNavigate event, and each object as its own input properties must follow the steps to find the parameters which must be passed.

Open API UI > Oracle CX Service UI Extension App > Service.
In VB Studio find the page you want to get input variables. For example: SR Details Service > ec > sr > edit.
When the page is loaded in VB Studio Designer, click the Variables tab.
There can be number of variables which you can filter by type
Apply the filter as Input parameter.

How to add your own screen pop

Here are three screen pop use cases:

Navigating to a Case page where caseNumber is provided in the pre launch form.
Navigating to a Work Order page where the WorkOrder number is provided in the pre launch form
Navigating to a svc-contact in case of multiMatches (If a contact search returns multiMatches.)

To add Screen Pop custom rules we need to add event listeners to cxSvcNavigation.

In VB Studio, select APP UIs, then, choose Oracle CX Service UI Extension App > service.
Click the Event Listeners tab.
Click + Event Listener.
All events that can be listened to are shown.
Select cxSvcNavigation and click Next.
Add an action chain, or use an existing one.
After you create the action chain, it will be added to the cxSvcNavigation event
Drag an if Action which means the action chain runs only for the SCREENPOP navigation type.
Now you can add conditions to match your business use case. For this example, we'll add the event.navigationType = 'SCREENPOP'.
Inside the if action we can now drag another if action to render the case object if the caseId present in the engagementData.
We're now ready to trigger the event which is going to screen pop the case object.
Drop the FireEventAction inside the inner if action.
Define the FireEvent from Properties Panel. Here are the required properties:
- application: service (root application name).
- containerPath: ec
- flow: case (Object or flow which is required to open)
- tabInfo: Copies from originalEvent. It includes tab-title, tab-icon event.extraAttributes.svcNavigateEvent.tabInfo
- key: interactionId can be retrieved from engagementData event.engagementData.inData.SVCMCA_INTERACTION_ID.
- Page Params: An object which is required by the page which needs to be rendered case page required caseNumber.

Add a return block to avoid executing the default behavior. For this example we'll add one more if Action which will render workorder if workorder is present in the engagement data and required the work order page to require the work order number.

Here's the example action chain:

define([
  'vb/action/actionChain',
  'vb/action/actions',
  'vb/action/actionUtils',
], (
  ActionChain,
  Actions,
  ActionUtils
) => {
  'use strict';
 
  class cxSvcNavigationListener extends ActionChain {
 
    /**
     * @param {Object} context
     * @param {Object} params
     * @param {{application:string,navigationType:string,flow:string,page:string,pageParams:object,engagementData:object,extraAttributes:object,sourcePageInfo:object}} params.event
     * @return {{stopPropagation:boolean}}
     */
    async run(context, { event }) {
      const { $application, $base, $extension, $constants, $variables, $modules } = context;
 
      if (event.navigationType === 'SCREENPOP') {
 
        if (event.engagementData.inData.caseId) {
            await Actions.fireEvent(context, {
              event: 'oracle_cx_serviceUI/application:svcNavigate',
              payload: {
                application: 'service',
                flow: 'case',
                key: event.engagementData.inData.SVCMCA_INTERACTION_ID,
                page: 'edit',
                pageParams: {
                  caseNumber: event.engagementData.inData.caseId
                },
                tabInfo: event.extraAttributes.svcNavigateEvent.tabInfo
              },
            });
 
        return {stopPropagation: true};
        } else if (event.engagementData.inData.workOrderNumber) {
            await Actions.fireEvent(context, {
              event: 'oracle_cx_serviceUI/application:svcNavigate',
              payload: {
                application: 'service',
                flow: 'fieldsvc',
                key: event.engagementData.inData.SVCMCA_INTERACTION_ID,
                page: 'detail',
                pageParams: {
                  WoNumber: event.engagementData.inData.workOrderNumber
                },
                tabInfo: event.extraAttributes.svcNavigateEvent.tabInfo
              },
            });
            return {stopPropagation: true};
        }
      }
    }
  }
 
  return cxSvcNavigationListener;
});