Realtime View as LWC

Introduction

The b+s Realtime View displays real time information on team members and queue statistics from the team and skill groups that the currently logged in agent belongs to.

There are two views provided. One showing the list of all team members and their states as well as the time since the last state change and a button to call them. Please check the CCE Agent Team List notes for more information on how to configure Teams.

The second view provides a list of the skill-group-based call queues, showing how many calls are in the queue and what the maximum queue wait time is, as well as the number of active agents and calls. If configured, a button can also be displayed to allow a call to the queue to be made. Please, check the CCE Skill Group Explorer and Agent Explorer notes for more information on how to configure Skill Groups.

info

The Queue view is not available for CCX deployments.

If you still want to load the RealtimeView as Custom Toolbar Component or as a Classic Custom Console Component, check the guide

Installation

b+s RealtimeView needs to be implemented as a LWC as described in the Installation Guide using the code example below.

Configuration

To configure the component, refer to the Configuration section of the Custom Toolbar component.

Code Example

realtimeView/realtimeView.js

import CNX_RESOURCE_LINK from '@salesforce/resourceUrl/cnx__CnxSfdcResources';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import { subscribe, publish, APPLICATION_SCOPE, createMessageContext } from 'lightning/messageService';
import msgChannel from '@salesforce/messageChannel/[REPLACE WITH LIGHTNING MESSAGE CHANNEL]';
import { LightningElement } from 'lwc';
import retrieveRealtimeViewLabelsLWC from '@salesforce/apex/cnx.RealtimeViewController.retrieveRealtimeViewLabelsLWC';
import retrieveAgentStateViewLabelsLWC from '@salesforce/apex/cnx.RealtimeViewController.retrieveAgentStateViewLabelsLWC';
import retrieveQueueStatsViewLabelsLWC from '@salesforce/apex/cnx.RealtimeViewController.retrieveQueueStatsViewLabelsLWC';

export default class RealtimeView extends LightningElement {

    moduleName = 'RealtimeViewModule';

    realtimeViewLabels;
    agentStateViewLabels;
    queueStateViewLabels;

    connectedCallback () {
        Promise.all([
            loadScript(this, CNX_RESOURCE_LINK + '/addons/RealtimeView/lib/jquery.min.js'),
            loadScript(this, CNX_RESOURCE_LINK + '/addons/BsModules/js/BsModules.min.js'),
            loadStyle(this, CNX_RESOURCE_LINK + '/addons/RealtimeView/css/RealtimeViewLwc.min.css'),
            retrieveRealtimeViewLabelsLWC().then(result => { this.realtimeViewLabels = result; }),
            retrieveAgentStateViewLabelsLWC().then(result => { this.agentStateViewLabels = result; }),
            retrieveQueueStatsViewLabelsLWC().then(result => { this.queueStateViewLabels = result; })
        ])
        .then(() => {
            const messageContext = createMessageContext();
            const noConflictInstance = ConnectsIntegrationAPI.noConflict();
            noConflictInstance.setLMSEnvironment({
                mode: 'LWC',
                publishMethod: message => {
                    publish(messageContext, msgChannel, message);
                },
                subscribeMethod: handler => {
                    subscribe(messageContext, msgChannel, handler, { scope: APPLICATION_SCOPE });
                }
            });
            noConflictInstance.waitReady(() => {
                const moduleInstance = BsModules.load(this.moduleName, this.refs.realtimeView, noConflictInstance);
                moduleInstance.setLabels({
                    realtimeViewLabels: this.realtimeViewLabels,
                    agentStateViewLabels: this.agentStateViewLabels,
                    queueStateViewLabels: this.queueStateViewLabels
                });
                moduleInstance.initializeModule();
            });
        })
        .catch(error => {
            console.error(this.moduleName + ': an error occurred.', error);
        });
    }
}

realtimeView/realtimeView.html

<template>
    <div lwc:ref="realtimeView" lwc:dom="manual" class="bsRtv"></div>
</template>

realtimeView/realtimeView.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <description>RealtimeView</description>
    <isExposed>true</isExposed>
    <masterLabel>RealtimeView</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__FlowScreen</target>
        <target>lightning__Tab</target>
        <target>lightning__UtilityBar</target>
    </targets>
</LightningComponentBundle>

Troubleshooting

Realtime View missing queue data

Symptom

Realtime View missing queue data.

Possible Cause(s)

hideQueueView=true in the settings, or CCX deployment (queue view not available)

Solution

Adjust setting accordingly.