Lync presence in SharePoint app part

See more:

SharePoint2013

Hi all,

I am creating an app part (SharePoint online) where I want to list users while showing their Lync presence. I am retrieving users from a list using CSOM.

I found this resource on how to integrate Lync presence: http://www.sharepointcolumn.com/lync-presence-indicators-code-snippets-in-sharepoint-2013/[^] (I am using DefaultRender).

It works perfectly when used as static HTML but I can't get it to work for the list items. I have tried appending html to the div and using Knockout.js.

I am using unique ID's for each control as stated in the comments.

Is there anything else I need to do to "register" the controls? Or is there another simple way of accomplishing Lync presence.

I would really appreciate some help.

Thanks,
William



When I use the exact same html by manually entering sip and id instead of data-bind it works perfectly. But with knockout, it just does not seem to work. sip and id seems correct as far as I can tell.

Here is the code:

 var ParticipantItem = function (name, sip, id, id2) {
    var self = this;
    self.Name = name;
    self.Sip = sip;
    self.Id = id;
    self.Id2 = id2;
}
 
function ParticipantListViewModel() {
    var self = this;
    self.Participants = ko.observableArray();
  
    self.AddParticipant = function (name, sip, id, id2) {
        self.Participants.push(new ParticipantItem(name, sip, id, id2));
        nbrOfParticipants = self.Participants().length;
    }
}
 
function LoadData() {
    completeParticipantList = new ParticipantListViewModel();
    GetList();
    ko.applyBindings(completeParticipantList);
}
 
function GetList() {
 
    var self = this;
    var clientContext = SP.ClientContext.get_current();
 
    var participantList = clientContext.get_web().get_lists().getByTitle('Participant Values');
    participantItems = participantList.getItems(new SP.CamlQuery.createAllItemsQuery());
    clientContext.load(participantItems);
 
    clientContext.executeQueryAsync(onParticipantsLoadSucceeded, onParticipantsLoadFailed);
}
 
onParticipantsLoadSucceeded = function (sender, args) {
    
    var currentItem = participantItems.getEnumerator();
    while (currentItem.moveNext()) {
        var lyncIdString1 = 'imn_' + currentItem.get_current().get_item("ID").toString() + ',type=sip';
        var lyncIdString2 = 'imn_' + currentItem.get_current().get_item("ID").toString() + '1,type=sip';
        completeParticipantList.AddParticipant(currentItem.get_current().get_item("Title"), currentItem.get_current().get_item("SIP"), lyncIdString1, lyncIdString2);
        nbrOfParticipants = nbrOfParticipants + 1;
 
    }
}

HTML:

Collapse | Copy Code
<div id="participants">
<span data-bind="foreach: Participants">
<span class="ms-imnSpan">
<a href="#" >
 
<span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">  
<img name="imnmark" title="" showofflinepawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" data-bind="attr: {'sip':Sip, id:Id }" /> 
</span>
</a>
</span>
 
<span class="ms-imnSpan">
<a href="#" >
<img name="imnmark" title="" showofflinepawn="1" class=" ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" data-bind="attr: { 'sip': Sip, id: Id2 }" />
</a>
<span data-bind="text:Name"></span>
</span>
</span>
</div>