API Version: Development

Static Contact Listing

Downloads

Explained

An example of using the contacts list is as follows. This first example only displays a list of contacts, and is not dynamic, so instead of using the usual IPCortex.PBX.startFeed() call, this first example uses the equivalent non-live data call of IPCortex.PBX.fetchData(). The main login block becomes:

IPCortex.PBX.Auth.login().then(
    function() {
        console.log(TAG, 'Login successful');
        /* Fetch the data from the PABX without live updates. */
        IPCortex.PBX.fetchData().then( // NOTE: this is different from skeleton
            function() {
                console.log(TAG, 'Data fetched');
                runApp();
            },
            function() {
                console.log(TAG, 'Data fetch failed');
            }
        );
    },
    function(e) {
        console.log(TAG, 'Login failed', e);
    }
);

Once the API is initialised we can display the results, by simply injecting them into a list tag as list items.

var listElem = document.getElementById('list');
IPCortex.PBX.contacts.forEach(function (contact) {
    var contElem = document.createElement('li');
    contElem.innerHTML = '<a href="#">' +
                contact.uname + '(' + contact.cID + '), ' + contact.name +
                '</a>';
    listElem.appendChild(contElem);
});

Dynamic Contact Listing

Downloads

Git repository or HTML and Javascript

Explained

Note that this example uses the Google Material Icons to display the contact's call state.

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'>

From the static example above, it is very simple to progress to updating the screen when the BLF state (whether the contact is on the phone) of a contact changes. First we need to revert to using `IPCortex.PBX.startFeed()` (as in the skeleton) when the page loads. We then need to implement a listener on each contact that we receive in order to take action when the contact state changes.

/* prepare a list of icon names for the states: idle, busy, ringing, busy+ringing */
var states = ["call_end", "phone", "ring_volume", "phone"];

/* Inject the list of contacts into the page */
var listElem = document.getElementById('list');
IPCortex.PBX.contacts.forEach(function (contact) {
    var contElem = document.createElement('li');
    contElem.innerHTML = '<a href="#">' +
                '<i class="material-icons">' + states[0] + '</i>&nbsp;' +
                contact.uname + '(' + contact.cID + '), ' + contact.name +
                '</a>';
    listElem.appendChild(contElem);
    var icon = contElem.getElementsByTagName('i')[0];
    contact.addListener('update', function (cntct) {
        /* Each time this contact is updated, this method will be called.
         * the contElem variable is scoped locally, so will remain in scope
         * meaning that this callback will have access to the right icon to
         * update.
         */
        icon.innerHTML = states[cntct.blf];
    });
});

The main feature to note here is the use of the update listener.