Wednesday, December 10, 2014


We have seen how to manipulate the messages using Yammer REST services; how to implement components for SharePoint sites. In this section we will see how to display Yammer notifications to user. Yammer has provided REST service to get the notification for current user.

Following is the REST service to get notification: /api/v1/streams/notifications.json.

This service returns the yammer notification for current logged in user. You can also get the read/unread status of each notifications.  Yet they have not provided any api to mark the notification as read. But nevertheless we can get notifications using this service.

Following complete code shows notification on the screen:

    <div class="container" style="padding:50px;">
<div class="container-fluid">
<div id="notifications" class="list-group">
</div>
</div>
    </div> 
    <script type="text/javascript" data-app-id="[APP-ID]" src="https://assets.yammer.com/assets/platform_js_sdk.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var html = "<a href='[WEB_URL]' class='list-group-item'><h6 class='list-group-item-heading'><div style='float:left'><strong>[ACTOR] &nbsp;&nbsp; [MSGTYPE] in &nbsp;&nbsp;</strong></div><div id='[GROUP]'><strong>[GROUPNAME]</strong></div></h6><p class='list-group-item-text'style='word-wrap: break-word;'><small>[TEXT]</small></p></a>";

function GetNotiFications()
{
yam.getLoginStatus( function(response) {
        if (response.authResponse) {
yam.platform.request(
              { url: "streams/notifications.json"
              , method: "GET"
              , data: {  }
              , success: function (msg) { 
BindResult(msg);
}
              , error: function (msg) { alert("Error..." + msg); }
              })
        } else {
            yam.platform.login( function (response) {
              if (!response.authResponse) {
                yam.platform.request(
                  { url: "streams/notifications.json"
                  , method: "GET"
                  , data: { }
                  , success: function (msg) { BindResult(msg); }
                  , error: function (msg) { alert("Error..." + msg); }
                  }
                );
              }
            });
        }
    });

}

function BindResult(resp)
{
var finalHtml = "";
for(var i=0; i<resp.items.length; i++)
{
if(resp.items[i].category == "group-auto-add")
{
var actorre = new RegExp("\(user:\)[0-9]*");
var actorm = actorre.exec(resp.items[i].message);
var actorid = actorm[0].split(":")[1];
var actor = $.grep(resp.references, function(e){ return e.id == actorid; });
var groupre = new RegExp("\(group:\)[0-9]*");
var groupm = groupre.exec(resp.items[i].message);
var groupid = groupm[0].split(":")[1];
var group = $.grep(resp.references, function(e){ return e.id == groupid; });
var msg = resp.items[i].message.replace("[[" + actorm[0] + "]]",actor[0].full_name);
msg = msg.replace("[[" + groupm[0] + "]]",group[0].full_name);
finalHtml = finalHtml + "<a href='" + group[0].web_url + "' class='list-group-item'><h6 class='list-group-item-heading'>" + msg + "</h6></a>";

}
else if(resp.items[i].category == "mention-or-reply")
{
//alert(resp.items[i].message);
var msg = resp.items[i].message;
while(msg.indexOf("user:") != -1)
{
var actorre = new RegExp("\(user:\)[0-9]*");
var actorm = actorre.exec(msg);
var actorid = actorm[0].split(":")[1];
var actor = $.grep(resp.references, function(e){ return e.id == actorid; });

msg = msg.replace("[[" + actorm[0] + "]]",actor[0].full_name);
}

if(msg.indexOf("group:") != -1)
{
var groupre = new RegExp("\(group:\)[0-9]*");
var groupm = groupre.exec(msg);
var groupid = groupm[0].split(":")[1];
var group = $.grep(resp.references, function(e){ return e.id == groupid; });
msg = msg.replace("[[" + groupm[0] + "]]",group[0].full_name);
}

finalHtml = finalHtml + "<a href='#' class='list-group-item'><h6 class='list-group-item-heading'>" + msg + "</h6></a>";

}
else if(resp.items[i].category == "new-follower")
{
var infoObjects = $.grep(resp.objects.user, function(e){ return e.id == resp.items[i].objects[0].id; });
finalHtml = finalHtml + "<a href='" + infoObjects[0].web_url + "' class='list-group-item'><h6 class='list-group-item-heading'>You have new follower " + infoObjects[0].full_name + "</h6></a>"
}
else
{
var actor =resp.items[i].message.split(":");
actor = actor[1].split("]");

        var infoObjects = $.grep(resp.objects.message, function(e){ return e.id == resp.items[i].objects[0].id; });
        var user = $.grep(resp.references, function(e){ return e.id == actor[0]; });

 if(infoObjects != null)
 {
if(infoObjects[0].web_url != undefined)
{
finalHtml = finalHtml + html.replace("[WEB_URL]", infoObjects[0].web_url);
}
finalHtml = finalHtml.replace("[MSGTYPE]", resp.items[i].category);
if(infoObjects[0].group_id == null)
{
finalHtml = finalHtml.replace("[GROUP]", "All Company");
finalHtml = finalHtml.replace("[GROUPNAME]", "All Company");
}
else
{
finalHtml = finalHtml.replace("[GROUP]", infoObjects[0].group_id);
var group = $.grep(resp.references, function(e){ return e.id == infoObjects[0].group_id; });
finalHtml = finalHtml.replace("[GROUPNAME]", group[0].full_name);
}
if(resp.items[i].category == "announcement-create")
{
finalHtml = finalHtml.replace("[TEXT]", infoObjects[0].title);
}
else
{
finalHtml = finalHtml.replace("[TEXT]", infoObjects[0].content_excerpt);
}
finalHtml = finalHtml.replace("[ACTOR]", user[0].full_name);

finalHtml = finalHtml.replace("likes-message", "likes message");
finalHtml = finalHtml.replace("announcement-create", "creates announcement");
}
}
finalHtml = finalHtml.replace("[CSSCLASS]", "list-group-item list-group-item-info");
}
$("#notifications").html(finalHtml);
$("#pop").popover();
}
GetNotiFications();
</script>

This is complete code which shows notifications from Yammer of current user. You need to provide your app-id in this code. And with the help of content editor place this code on page and enjoy Yammer notification. :)

Happy SharePoint coding.

0 comments:

Post a Comment