^
^
JavaScript Customer Interaction Services Package
Table of Contents

< Back to Package Overview

Tutorials

Databinding Tutorial

Using a modern reactive web framework, it is possible to bind to data being stored in the SDK. By binding to the agent.State and work.InteractionCollection objects you can create a responsive application, that will update it's UI based on the underlying properties. If you also bind to the interaction / agent capabilities, you can drive changes in the UI based on what operation you can carry out at that time.

JS file:

//App.js    
var config = {
    uacConfiguration: new AvayaCustomerServices.Config.UACConfiguration({
        enabled: true,
        clientInfo: {
            id: 'sampleApp'
        },
        serverInfo: {
            apiUrl: 'https://BREEZE-FQDN/services/UnifiedAgentController/UACAPI'
        },
        notificationInfo: {
            broadcastUrl: 'https://BREEZE-FQDN/services/Broadcast-UnifiedAgentController/broadcast',
            fallbackTransport: 'websocket'
        },  
        authenticationInfo: { 
            enabled: true, 
            tokens: ['Authorization'] 
        }
    })
};

var client = new AvayaCustomerServices(config);
var clientSession = client.createClientSession();

// Set token to SDK token store (token retrieval not shown)
clientSession.setToken(token);

var agent = clientSession.createAgent();
var work = clientSession.createWork();

var interactions = work.getInteractions();
var workRequests = work.getWorkRequests();

//usnig Vue.js Reactive Framework we can bind
// the above data to a HTML template
var vue = new Vue({
    el: '#appContainer',
    data: {
        agent: agent,
        interactions: interactions,
        workRequests: workRequests,
        work: work
    }
});

HTML template:

<!-- index.html -->

<!-- display agent name & state -->
<h4>{{agent.data.firstName}} {{agent.data.lastName}}</h4>
<h4>{{agent.state}}</h4>

<!-- iterate over interactions collection, and display buttons based on capabilities -->
<a href="#" class="list-group-item" v-for="interaction in interactions._collection">
    <h4 class="list-group-item-heading">
        <button class="btn btn-xs btn-success" @click="interaction.accept()" v-if="interaction.data.capabilities.canAccept">Accept</button>
        <button class="btn btn-xs btn-danger" @click="interaction.end()" v-if="interaction.data.capabilities.canEnd">End</button>
        <button class="btn btn-xs btn-warning" @click="interaction.hold()" v-if="interaction.data.capabilities.canHold">Hold</button>
        <button class="btn btn-xs btn-success" @click="interaction.unhold()" v-if="interaction.data.capabilities.canUnhold">Unhold</button>
    </h4>
</a>
Feedback

Your feedback has been successfully submitted.

There was a problem submitting your feedback. Please contact your product support representative.

Page Feedback