Configure screen pop rules for Service Center

Now we'll configure screen pops to work in the Service Center console mode.

The application provides ready-to-use screen pop rules. You can choose to configure the screen pop rules based on your business requirements.

Overview of ready-to-use screen pop configuration rules for the Service Center application

The framework provides the following ready-to-use screen pop configuration rules for the Service Center application:

If the IVR data or the chat payload passes the SR details, such as the Service Request number for an incoming call or chat, the application screen pops to the SR details tab within the Service Center console.
The communication panel is displayed to the side of the SR enabling easy interaction.
If the IVR data or the chat payload passes the contact details of a known contact, like the contact name or email for an incoming call or chat, the application screen pops to the Contact Details tab within the Service Center console.
If the IVR data or the chat payload passes the contact details of an unknown contact for an incoming call or chat, the application screen pops to the Create Contact form within the Service Center console.

Configure screen pop rules for the Service Center application

To configure screen pop configuration for the Service Center console, an external event cxSvcNavigation is exposed which can be subscribed to by the customer, and the customer can add business logic and drive the screen pop rules.

The event is defined at the application level which will be fired on every navigation that occurs in Service Center in MSI mode. The event is fired with the following payload which can help the customer make the decision:

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

svcNavigateEvent is the original event
navigationType can be either SCREENPOP or DRILLDOWN. For navigation when a chat or call is started it will be a SCREENPOP. For every other kind of navigation it will be DRILLDOWN.
engagmentData: Chat or Call's IVR or Engagement data is based on which customers can add business logic.
Return Type refers to the action chain which has the following return type. This decides whether the default actions also need to be executed or skipped, or stopped. If set to True, the action not execute the default behavior.

Prerequisites and setting up a project for screen pop

Sign in to Service Center as an agent with VB studio access.
From the Settings and Actions menu, select Edit Page in Visual Builder.
Choose an existing project or create a new one.
To enable or disable screen pop with the agent console you change the Service application.
Once your project is open, from the App UIs menu, select Oracle CX Service UI Extension App > service.
In the main workspace, click the Variables tab.
From the Constants list, select enableScreenPops.
In the Properties pane, choose True to enable screen pops and False to disable the functionality and take the viewer to the Contact page.

Create your own screen pop rules

To add screen pop rules you must add event listeners to the cxSvcNavigation object in VB Studio.
Select the Event Listeners tab.
Click the + Event Listener button.
From the list, select cxSvcNavigation, and click Next.
Click the + Event Listener button.
All the events that can be listened to will be listed.
, All the events that can be listened to will be listed, find and Choose cxSvcNavigation and click Next.
Choose cxSvcNavigation, and click Next.
We'll now add an action chain to the event. We can either use the existing one or create a new one.
Note: If you're creating a new project, there won't be an existing action chain.

After creating the action chain, we'll add it to the cxSvcNavigation event.
Find the action chain in the list and click Go to Action Chain to open and edit it.
Note the list of actions you can add to the chain listed in the explorer.
Drag the If action to make sure the action chain runs only for the SCREENPOP navigation type.
Once the action is added to the action chain, we can then add conditions to match our business use case. For this scenario, we'll add a condition from the properties pane of event.navigationType === 'SCREENPOP'.
Inside the If action we can drag another If action to match our use case. For the first case we'll render the case object:if caseId is present in engagementData.
We're now ready to trigger the event which is going to screen pop the case object, for that we'll use FireEventAction by dropping it inside the inner If Action
.The next step is to define FireEvent which you do from the Properties pane. Here are the properties required for the event:
- - application = service (root application name).
  - containerPath = ec.
  - flow = case (Object or flow which is required to open).
  - tabInfo = copied from originalEvent, it includes the tab-title, or 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 that needs to be rendered case page required caseNumber.
You can add other blocks to support various business use cases, but for this example, we'll add one more If action which will render work order if work order is present in the engagement data workOrder page requires WoNumber.

Here's an example of the resulting 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;
});

Add Screen Pop in case of a contact multi match scenario

Contact search engines provide search results if there are multiple contact matches for a chat or a phone call, which is then passed down to engagementData.multiMatches.

You can change the cxSVCNavigation listener using engagementData.multiMatches to navigate to the desired object. Here are steps which will enable you to redirect to the svc-contact page with create contact as a view

Here's same code for the 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.multiMatches) {
          await Actions.fireEvent(context, {
            event: 'oracle_cx_serviceUI/application:svcNavigate',
            payload: {
              application: 'service',
              flow: 'sr',
              key: event.engagementData.inData.SVCMCA_INTERACTION_ID,
              page: 'svc-contact',
              pageParams: {
                ...event.extraAttributes.svcNavigateEvent.pageParams,
                selectedView: 'createContact'
              },
              tabInfo: event.extraAttributes.svcNavigateEvent.tabInfo
            },
          });
 
          return { stopPropagation: true };
        }
          
      }
    }
  }
 
  return cxSvcNavigationListener;
});

Required page parameters for an object

To screen pop a page or object we need to pass the required parameters to the page while calling the svcNavigate event. Each object has its input properties. Follow the steps to find out the parameters that need to be passed:

Open API UI > Service Center > Service.
Find the page where you want to get input variables. For example, SR Details Service > ec > sr > edit.
Once the page is loaded in VB Designer we can switch to the variables tab.
There can be n number of variables which can be filtered by their type.
Apply the filter as Input parameter.