Get Author Name and Presence from SharePoint 2013 list using JQuery

Question

We are using jQuery to pull list information and then displaying it. Right now the live date, title (as a link) and summary are displaying. We know want to display the name of the author and the author's current presence. I got as far as displaying the author's name but am stumped as to how to get their presence indicator.

function runNewsCode() {
    var ctx = new SP.ClientContext('/Comm');
    var list = ctx.get_web().get_lists().getByTitle('Bulletin Board');
    var view = list.get_views().getByTitle('LatestNews');
    ctx.load(view,'ViewQuery');
    ctx.executeQueryAsync(
        function() {
        var viewQry = "<View><Query>" + view.get_viewQuery() + "</Query>><RowLimit>15</RowLimit></View>";
        getItems(viewQry);
        },
        function(sender,args){ 
     });
}
var items;
 function getItems(queryText) 
{
    var context = new SP.ClientContext("/Comm"); 
    var atargetList = context.get_web().get_lists().getByTitle('Bulletin Board');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(queryText);
    atargetListItem = atargetList.getItems(camlQuery);
    context.load(atargetListItem);
    context.executeQueryAsync(Function.createDelegate(this, this.NewsSucceeded), Function.createDelegate(this, this.NewsFailed));
}
function NewsSucceeded() {
var alistItemEnumerator = atargetListItem.getEnumerator();
    while (alistItemEnumerator.moveNext()) {

        var ooListItem = alistItemEnumerator.get_current();
        var mydiv = document.getElementById("newsItems"); 
        var newDiv = document.createElement('div');
        newDiv.setAttribute('class', 'newsItem');

        var spanTag = document.createElement('span');
        spanTag.setAttribute('class', 'summary');
        var modified = ooListItem.get_item('Live');
        spanTag.innerHTML = modified.format('MMMM dd, yyyy');
        newDiv.appendChild(spanTag);

        var h5Tag = document.createElement('h5');
        var aTag = document.createElement('a');
        aTag.setAttribute('href',"/Communications/Pages/Article.aspx?ArticleID=" + ooListItem.get_item('ID')); 
        aTag.innerHTML = ooListItem.get_item('Title');
        h5Tag.appendChild(aTag);
        newDiv.appendChild(h5Tag);

        var spanTag = document.createElement('span');
        spanTag.setAttribute('class', 'summary');
        spanTag.innerHTML = ooListItem.get_item('Summary');
        newDiv.appendChild(spanTag);

        var breakTag = document.createElement('br');
        newDiv.appendChild(breakTag);

        var spanTagAuthor = document.createElement('span');
        spanTagAuthor.setAttribute('class', 'summary');
        spanTagAuthor.innerHTML = ooListItem.get_item('Author').get_lookupValue();
        newDiv.appendChild(spanTagAuthor);

        mydiv.appendChild(newDiv);
    }
}
    ...

So I can grab the Author name using ooListItem.get_item('Author').get_lookupValue();

How could I grab the presence indicator as well? We're using this method because this is displaying on the home page of the top level site. The Bulletin Board list is located in the Comm subsite so using an XSL stylesheet won't work.

The actual news item (when you click on the title) takes you to the list item which is styled using xsl. The author and presence indicator is displaying there no problem. I just can't get it to display using jquery.

Any ideas?

Answer 1

Consider using the RenderUserFieldWorker utility function in clienttemplates.js. This is what is used behind the scenes to render an out-of-the-box user field, and it will do the heavy lifting of looking up the user presence for you.

The following example assumes you have access to a list view csr context object:

var fieldSchemaData = ctx.ListSchema.Field[indexOfAuthorField];
var userData = ctx.CurrentItem.Author[0];
var listSchema = ctx.ListSchema;

// Html of rendered user field
var renderedUser = RenderUserFieldWorker(ctx, fieldSchemaData, userData, listSchema);

// Updates the latest presence status
ProcessImn();

For a more complete example see this article by Cas van Iersal.