エージェントの可用性の切替え

CTIアプリケーションでコール関連の操作を実行するには、エージェント可用性ステータスを切り替える機能を設定する必要があります。各サプライヤにAPIがあります。

エージェントの可用性を切り替えた後にエージェントを使用可能にして使用不可にするには、Fusionアプリケーションがエージェントを使用可能または使用不可として表示できるように、エージェントの状態が変更されたことをFusionアプリケーションに通知する必要があります。

エージェントの可用性を実装するステップ

エージェントの可用性ステータスを処理するためのノック・アウト変数の追加
RootViewModel クラスにメソッドtoggleAgentAvailabilityを追加
ツールバーの内容をボタンで置き換えます
UEF JavaScriptライブラリの注入
FusionHandlerクラスでUEFを初期化するメソッドを追加
FusionHandlerクラスにtoggleAgentAvailabilityメソッドを追加
FusionHandlerクラスにmakeAgentAvailableおよびmakeAgentUnavailableメソッドを追加
新しいファイルICtiVendorHandlerを作成
エージェントの可用性を処理するためにIntegrationEventsHandler クラスを更新
VendorHandlerクラスを更新して、ICtiVendorHandlerインタフェースを実装
IntegrationActionHandlerクラスの更新
RootViewModel クラスのIntegrationActionHandlerおよびIntegrationEventsHandlerを初期化
appControllerファイルのtoggleAgentAvailabilityメソッドを更新

1. エージェントの可用性ステータスを処理するためのノック・アウト変数の追加

エージェントの状態を追跡するために、ブール型の新しいノック・アウト監視機能を導入します。これを行うには、 src/ts/appController.tsファイルに次のコード行を追加します。アプリ分類も初期化する必要があります。 ORA_SERVICEは、ここでアプリケーション分類として設定されます。

次の表に、アプリケーションで認識されるすぐに使用できるアプリケーション分類コードを示します。アプリケーション分類のリストは、Functional Setup Managerを使用して変更できます。

アプリケーション分類コード

アプリケーション分類コード	説明
ORA_HRHD	参照ルールおよびスクリーン・ポップ・ルールに対する人事管理ヘルプ・デスク関連設定のデフォルト分類です。
ORA_SALES	ルックアップ・ルールおよびスクリーン・ポップ・ルールの販売関連設定のデフォルト分類です。
ORA_SERVICE	ルックアップ・ルールおよびスクリーン・ポップ・ルールのサービス関連設定のデフォルト分類です。

src/ts/appController.tsファイルに追加するコード行は次のとおりです:

//.....
import "oj-c/button";
// ....
 
class RootViewModel {
    // ....
    agentState: ko.Observable<boolean>;
    appClassification: string;
    // ...
 
    constructor() {
        // ....
 
        // CTI app properties
        this.agentState = ko.observable(false);
        this.appClassification = 'ORA_SERVICE';
        //...
    }
}

2. RootViewModelクラスにメソッドtoggleAgentAvailabilityを追加

appController.tsファイルで、関数toggleAgentAvailabilityを追加してagentStateを更新します。

public toggleAgentAvailability = async () => {
    this.agentState(!this.agentState());
}

3. ツールバーの内容をボタンで置き換えます

アイコン・ボタンを表示するには、src/index.htmlファイルの<oj-toolbar> innerHtmlを次のものに置き換えます:

<oj-c-button id="toggleAgentAvailability" label="Agent" chroming="solid" on-oj-action="[[toggleAgentAvailability]]"
    :class="[[{'oj-bg-success-30' : agentState(), 'oj-bg-danger-30' : !agentState()}]]">
    <span slot="endIcon"
        :class="[[{'oj-ux-ico-user-available' : agentState(), 'oj-ux-ico-user-not-available' : !agentState()}]]"></span>
</oj-c-button>

4. UEF JavaScriptライブラリの注入

UEF JavaScriptライブラリをbodyタグの最後にあるsrc/index.htmlファイルに注入します。

<script src="https://static.oracle.com/cdn/ui-events-framework/libs/ui-events-framework-client.js"></script>

UEFタイプ定義ファイルをダウンロードし、パスsrc/types/uiEventsFramework.d.tsにコピーします。 src/ts/cti/fusion/fusionHandler.tsパスのファイル fusionHandler.tsを更新し、次の内容をファイルに追加します。

/// <reference path ="../../../types/uiEventsFramework.d.ts"/>
 
export class FusionHandler {
 
}

5. FusionHandlerクラスでUEFを初期化するメソッドを追加

fusionHandlerクラスにメソッドinitializeUefを作成し、UEFを初期化するために次のコード行を追加します:

export class FusionHandler {
    private static frameworkProvider: IUiEventsFrameworkProvider;
    private static phoneContext: IPhoneContext;
    public static appClassification: string = '';
 
    public static async initializeUef(): Promise<void> {
        if (!FusionHandler.frameworkProvider) {
            FusionHandler.frameworkProvider = await CX_SVC_UI_EVENTS_FRAMEWORK.uiEventsFramework.initialize('cti-accelerator', 'v1');
          }
          if (!FusionHandler.phoneContext) {
            const mcaContext: IMultiChannelAdaptorContext = await FusionHandler.frameworkProvider.getMultiChannelAdaptorContext();
            FusionHandler.phoneContext = await mcaContext.getCommunicationChannelContext('PHONE') as IPhoneContext;
          }
    }
}

6. FusionHandlerクラスにtoggleAgentAvailabilityメソッドを追加

FusionHandlerクラスにメソッドtoggleAgentAvailabilityを追加し、agentStateEventを公開するロジックを記述します。このメソッドは、入力パラメータisAgentAvailableに基づいてエージェントの可用性を更新します。

private static async toggleAgentAvailability(isAgentAvailable: boolean) {
    const requestObject: IMcaAgentStateEventActionRequest = FusionHandler.frameworkProvider.requestHelper.createPublishRequest('agentStateEventOperation') as IMcaAgentStateEventActionRequest;
    requestObject.setEventId('1');
    requestObject.setIsAvailable(isAgentAvailable);
    requestObject.setIsLoggedIn(isAgentAvailable);
    requestObject.setState(isAgentAvailable ? 'AVAILABLE' : 'UNAVAILABLE');
    requestObject.setStateDisplayString('Idle');
    requestObject.setReason('');
    requestObject.setReasonDisplayString('Idle');
    requestObject.setInData({ 'phoneLineId': '1' });
    await FusionHandler.phoneContext.publish(requestObject) as IMcaAgentStateEventActionResponse;
}

7. FusionHandlerクラスにmakeAgentAvailableおよびmakeAgentUnavailableメソッドを追加

FusionHandlerクラスにmakeAgentAvailableおよびmakeAgentUnavailableを追加し、toggleAgentAvailabiltyメソッドをコールします。

public static async makeAgentAvailable(): Promise<void> {
    await FusionHandler.toggleAgentAvailability(true);
}
 
public static async makeAgentUnavailable(): Promise<void> {
    await FusionHandler.toggleAgentAvailability(false);
}

8. 新しいファイルICtiVendorHandlerを作成

下のファイルをパスsrc/ts/cti/vendor/ICtiVendorHandler.tsにコピーします。これは、CTIフローをサポートするためにサプライヤAPIをコールするために実装する必要があるメソッドを持つインタフェースです。 (NEED FILE)

9. エージェントの可用性を処理するためにIntegrationEventsHandlerクラスを更新

src/ts/cti/integrationEventsHandler.tsパスでクラス・ファイルintegrationEventsHandler.tsを更新し、次のコンテンツをファイルにコピーします:

次の例に示すように、MakeAgentAvailableメソッドを追加します:

import RootViewModel from "../appController";
import { FusionHandler } from "./fusion/fusionHandler";
 
export class IntegrationEventsHandler {
    public ctiAppViewModel: typeof RootViewModel;
    constructor(ctiAppViewModel: any) {
        this.ctiAppViewModel = ctiAppViewModel;
    }
}

次の例に示すように、makeAgentAvailableメソッドを追加します:

public async makeAgentAvailable(): Promise<void> {
    try {
        await FusionHandler.makeAgentAvailable();
    } catch (err) {
        console.log("Error while making agent available", err);
    }
}

次の例に示すように、makeAgentUnavailableメソッドを追加します:

public async makeAgentUnavailable(): Promise<void> {
    try {
        await FusionHandler.makeAgentUnavailable();
    } catch (err) {
        console.log("Error while making agent unavailable", err);
    }
}

10.VendorHandlerクラスを更新してICtiVendorHandlerインタフェースを実装

次の例のように、src/ts/cti/vendor/vendorHandler.tsパスにあるクラス・ファイルvendorHandler.tsを更新して、ICtiVendorHandler interfaceを実装します:

import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    private integrationEventsHandler: IntegrationEventsHandler;
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.integrationEventsHandler = integrationEventsHandler;
    }
    public async makeAgentAvailable() {
        // TODO: call the vendor specific api to make the agent available
    }
    public async makeAgentUnavailable() {
        // TODO: call the vendor specific api to make the agent unavailable
    }
    public async makeOutboundCall(phoneNumber: string, eventId: string) {
        throw new Error('Method not implemented.');
    }
    public async acceptCall() {
        throw new Error('Method not implemented.');
    }
    public async rejectCall() {
        throw new Error('Method not implemented.');
    }
    public async hangupCall() {
        throw new Error('Method not implemented.');
    }
}

11.IntegrationActionHandlerクラスの更新

次の例のように、src/ts/cti/integrationActionHandler.tsパスのクラス・ファイル integrationActionHandler.tsを更新します:

import { IntegrationEventsHandler } from "./integrationEventsHandler";
import { ICtiVendorHandler } from "./vendor/ICtiVendorHandler";
import { VendorHandler } from "./vendor/vendorHandler";
 
export class IntegrationActionHandler {
    private vendor: ICtiVendorHandler;
    private integrationEventsHandler: IntegrationEventsHandler;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.vendor = new VendorHandler(integrationEventsHandler);
        this.integrationEventsHandler = integrationEventsHandler;
    }
 
    public async makeAgentAvailable(): Promise<void> {
        await this.vendor.makeAgentAvailable();
        await this.integrationEventsHandler.makeAgentAvailable();
    }
     
    public async makeAgentUnavailable(): Promise<void> {
        await this.vendor.makeAgentUnavailable();
        await this.integrationEventsHandler.makeAgentUnavailable();
    }
}

12.RootViewModelクラスのIntegrationActionHandlerおよびIntegrationEventsHandlerを初期化

次のコードを使用して、appController.tsコンストラクタのintegrationActionHandlerおよびintegrationEventsHandlerクラスを初期化します:

//.....
import "oj-c/button";
import {IntegrationActionHandler} from "./cti/integrationActionHandler";
import {IntegrationEventsHandler} from "./cti/integrationEventsHandler";
import {FusionHandler} from "./cti/fusion/fusionHandler";
// ....
 
class RootViewModel {
    // ....
    agentState: ko.Observable<boolean>;
    appClassification: string;
    integrationActionHandler: IntegrationActionHandler;
    integrationEventsHandler: IntegrationEventsHandler;
    // ...
 
    constructor() {
        // ....
 
        // CTI app properties
        this.agentState = ko.observable(false);
        this.appClassification = 'ORA_SERVICE';
        FusionHandler.appClassification = this.appClassification;
        this.integrationEventsHandler = new IntegrationEventsHandler(this);
        this.integrationActionHandler = new IntegrationActionHandler(this.integrationEventsHandler);
        FusionHandler.initializeUef();
        //...
    }
}

13.appControllerファイルのtoggleAgentAvailabilityメソッドを更新

public toggleAgentAvailability = async () => {
    if (!this.agentState()) {
        await FusionHandler.initializeUef();
         this.integrationActionHandler.makeAgentAvailable();
    } else {
        this.integrationActionHandler.makeAgentUnavailable();
    }
    this.agentState(!this.agentState());
}

進捗の確認

Fusionアプリケーションにサインインし、メディア・ツールバーを開きます。メディア・ツールバー・アプリケーションからエージェント可用性ボタンをクリックします。 Fusionアプリケーションのボタンの色が緑に変わり、電話アイコンのステータスが「使用可能」に変わります。ボタンを再度クリックすると、ステータス・ボタンの色が赤に戻り、Fusionアプリケーションの電話アイコンのステータスが「使用不可」に変わります。