SharePoint Newsfeed - I’m Following

If you’re working in SharePoint 2013 or later (for me SharePoint Online), you would have seen the “I’m Following” section in Newsfeed. Not sure if this is a SharePoint web part, because I searched and searched and did not find a web part that would give me the same information on other site collections other than the MySite.

Here is a screen shot of what I’m talking about,

imfollowing

It shows the count of people, documents, sites and tags you’re following. Each of those numbers are links to pages where you see the details of the contents you’re following.

So, why do I need this as a web part to add in other site collections?

We were developing or redesigning our company's intranet for SharePoint Online and I thought this would be good information to have in the home page of the intranet, so users can get to their relevant information quickly from intranet.

Since I couldn’t get a web part that would give me this information, I thought of developing one myself. Well, I did not develop a web part, instead I created an HTML file that was added to content editor web part.

So, this blog is about how I achieved it.

A little bit of research revealed that there is an API that would give the contents that users are following on SharePoint Online. Here are the APIs URLs,

To get only Documents user is following,

https://siteurl/_api/social.following/my/followed(types=2)

To get only Sites user is following,

https://siteurl/_api/social.following/my/followed(types=4)

To get only tags user is following,

https://siteurl/_api/social.following/my/followed(types=8)

To get only people user is following,

https://siteurl/_api/social.following/my/followed(types=1)

For the sake of it, I explored passing 1 -15 for “types” parameter in the URL and passing 15, gave me all the 4 contents user is following. So, this is the URL I finally used in my code,

https://siteurl/_api/social.following/my/followed(types=15)

So, calling this API gave list of all documents, sites, tags and people that the user is following. Below is the javascript to call the URL and then find the count of each of the content.

<script language="javascript">  
    function follwoingViewModel() {  
        var self = this;  
        var url = "https:///_api/social.following/my/followed(types=15)";  
        self.sites = ko.observableArray();;  
        self.docs = ko.observableArray();  
        self.people = ko.observableArray();  
        self.tags = ko.observableArray();  
        self.sitesCount = ko.observable();  
        self.docsCount = ko.observable();  
        self.tagsCount = ko.observable();  
        self.peopleCount = ko.observable();  
        $.ajax({  
            url: url,  
            method: "GET",  
            headers: {  
                "Accept": "application/json; odata=verbose"  
            },  
            success: function(data) {  
                self.people.removeAll();  
                self.docs.removeAll();  
                self.tags.removeAll();  
                self.sites.removeAll();  
                for (i = 0; i < data.d.Followed.results.length; i++) {  
                    if (data.d.Followed.results[i].ActorType == 0) self.people.push(data.d.Followed.results[i]);  
                    else if (data.d.Followed.results[i].ActorType == 1) self.docs.push(data.d.Followed.results[i]);  
                    else if (data.d.Followed.results[i].ActorType == 3) self.tags.push(data.d.Followed.results[i]);  
                    else if (data.d.Followed.results[i].ActorType == 2) self.sites.push(data.d.Followed.results[i]);  
                }  
                self.sitesCount(self.sites.Nb - 2);  
                self.docsCount(self.docs.Nb - 2);  
                self.tagsCount(self.tags.Nb - 2);  
                self.peopleCount(self.people.Nb - 2);  
            },  
            error: function(data) {  
                alert(data.error);  
            }  
        });  
    }  
    $(document).ready(function() {  
        ko.applyBindings(new follwoingViewModel());  
    }); 

So, if you see the above code, the “Actor Type” indicates the content type i.e. if the content is people, site, tag or document. I loop through the resulting array and check for Actor Type and get the count of each of the contents. Once I have the counts, knock out binds them to the below HTML. To get same look and feel as Newsfeed, I went to the view source of news feed and copied the same styles to my HTML. Below is the HTML.

<div>
<div class="panel panel-default">
<div class="panel-heading" style="color: #ac1a2f;"><span class="ms-Icon ms-Icon--star"></span> I'm Following</div>
<div class="panel-body ms-noList ms-profile-followedCountDiv">
<ul class="ms-core-listMenu-root" style="display: inline-block;">
<li id="FollowedCounts_People_ListItem" class="ms-profile-followedCountListItem">
<div id="FollowedCounts_People_Count" style="border-bottom: 1px solid #c6c6c6 !important;padding-left: 5px !important;" class="ms-profile-followedCountValue ms-largeNumber"> <a id="FollowedCounts_People_Link" class="ms-subtleLink ms-profile-followedCountLink" href="#" onclick="javascript:window.open('https://<siteurl>/MyPeople.aspx');" title="See the people you're following" data-bind="text: peopleCount"></a></div>
<div><span class="ms-Icon ms-Icon--person"></span><span id="FollowedCounts_People_Label" class="ms-metadata ms-profile-followedCountLabel" style="display: inline !important;"> people</span></div>
</li>
<li id="FollowedCounts_Documents_ListItem" class="ms-profile-followedCountListItem">
<div id="FollowedCounts_Documents_Count" style="border-bottom: 1px solid #c6c6c6 !important;padding-left: 5px !important;" class="ms-profile-followedCountValue ms-largeNumber"> <a id="FollowedCounts_Documents_Link" class="ms-subtleLink ms-profile-followedCountLink" href="#" onclick="javascript:window.open('https://<siteurl>/_layouts/15/MySite.aspx?MySiteRedirect=FollowedDocuments');" title="See the documents you're following" data-bind="text: docsCount"></a></div> <span class="ms-Icon ms-Icon--document"></span> <span id="FollowedCounts_Documents_Label" class="ms-metadata ms-profile-followedCountLabel" style="display: inline !important;">documents</span></li>
<li id="FollowedCounts_Sites_ListItem" class="ms-profile-followedCountListItem">
<div id="FollowedCounts_Sites_Count" style="border-bottom: 1px solid #c6c6c6 !important;padding-left: 5px !important;" class="ms-profile-followedCountValue ms-largeNumber"> <a id="FollowedCounts_Sites_Link" class="ms-subtleLink ms-profile-followedCountLink" href="#" onclick="javascript:window.open('https://<siteurl>/_layouts/15/sharepoint.aspx');" title="See the sites you're following" data-bind="text: sitesCount"></a></div> <span class="ms-Icon ms-Icon--globe"></span> <span id="FollowedCounts_Sites_Label" class="ms-metadata ms-profile-followedCountLabel" style="display: inline !important;">sites</span></li>
<li id="FollowedCounts_Tags_ListItem" class="ms-profile-followedCountListItem">
<div id="FollowedCounts_Tags_Count" style="border-bottom: 1px solid #c6c6c6 !important;padding-left: 5px !important;" class="ms-profile-followedCountValue ms-largeNumber"> <a id="FollowedCounts_Tags_Link" class="ms-subtleLink ms-profile-followedCountLink" href="#" onclick="javascript:window.open('https://<siteurl>/_layouts/15/followedtags.aspx');" title="See the tags you're following" data-bind="text: tagsCount"></a></div> <span class="ms-Icon ms-Icon--tag"></span> <span id="FollowedCounts_Tags_Label" class="ms-metadata ms-profile-followedCountLabel" style="display: inline !important;">tags</span></li>
</ul>
</div>
</div>
</div>

Once the HTML file is created, I added the file to the site collection where I want to use this and then added the content editor web part to the Intranet Home page and linked it to this HTML file. So, the final output looks like this,

imfollowingfinal

And it's done. Hope this is helpful for someone.