< Back to Package Overview

Tutorials

Capabilities Tutorial

Data Binding Example

Here is a simple data binding example demonstrating the use of Capabilities to drive UI changes. The HTML buttons will be visible if the specific capabilities are set to 'true'.

N.B. For the purpose of highlighting capabilities functionality only, configuring the SDK and Authentication have been omitted from the code.

JS file:

//App.js    

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

var agent = clientSession.createAgent();

// Using Vue.js we can bind agent data to a HTML template
var vue = new Vue({
    el: '#appContainer',
    data: {
        agent: agent
    }
});

HTML template:

    Start Work
    End Work
    Go Ready
    Go Not Ready
    De-Activate

Event Listening Example

Here is a simple jquery example using event listeners to demonstrate the use of Capabiliies to drive UI changes. The HTML buttons will be visible if the specific capabilities are set to 'true'.

N.B. For the purpose of highlighting capabilities functionality only, configuring the SDK and Authentication have been omitted from the code.

JS code snippet:

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

var agent = clientSession.createAgent();

agent.addOnActivatedCallback(function (agent) {
    console.log('Agent Client Session has been successfully activated');
    updateStateUI();
});

agent.addOnDeactivatedCallback(function (agent) {
    console.log('Agent Client Session has been successfully deactivated');
    updateStateUI();
});

agent.addOnStateReadyCallback(function (state) {
    console.log('Agent State has been successfully set to Ready');
    updateStateUI();
});

agent.addOnStateNotReadyCallback(function (state) {
    console.log('Agent State has been successfully set to Not Ready');
    updateStateUI();
});

agent.addOnStateLoggedOutCallback(function (state) {
    console.log('Agent has been successfully logged out');
    updateStateUI();
});

function updateStateUI() {

    agent.data.isActivated ? $('#activate').addClass('hide') : $('#activate').removeClass('hide');
    agent.capabilities.canLogin ? $('#login').removeClass('hide') : $('#login').addClass('hide');
    agent.capabilities.canSetReady ? $('#goready').removeClass('hide') : $('#goready').addClass('hide');
    agent.capabilities.canSetNotReady ? $('#gonotready').removeClass('hide') : $('#gonotready').addClass('hide');
    agent.capabilities.canLogout ? $('#logout').removeClass('hide') : $('#logout').addClass('hide');
    agent.capabilities.canDeactivate ? $('#deactivate').removeClass('hide') : $('#deactivate').addClass('hide');
}

HTML snippet:

    Activate
    Deactivate
    Login
    Go Not Ready
    Go Not Ready
    Log Out
    Activate