Monday, July 7, 2014

Sitrion Trending Tag Web Part

So today's topic is going to be Sitrion and their trending tags web part.  If you don't know what Sitrion is, it's a platform that sits on top of SharePoint and adds many social features to SharePoint and more.

On a SharePoint project I was on about a year ago, I was given the task of creating a Windows like tile for the home page of the site we built.  The tile would have the top three topics, or trending tags, listed on it. In this post I'll talk about the out of the box trending tags web part, the requirements for our tile and show some of the code that got us the final product.

Sitrion Trending Tag Web Part

After Sitrion is installed, there is an OOB web part you can use to display the top most trending tags.  Below is what it looks like.

At first glance, this is a pretty basic component.  It has a title and a dynamic list of  trending tags.  The issue we had was that our client wanted the top 3 tags, not the top 6. Our client also wanted a different color background and other style changes.  When I looked at the properties for the web part, I saw two properties named XMLUrl and the XSLTUrl. After filling them in with proper values, I found out that these properties are simply ignored by the web part and were accidentally placed in the property sheet.  So, that left us with no choice but to "roll our own."  The other issue with the OOB web part is that in order to change the styling, you would have to overwrite the OOB XSLTfile.  The problem here is that if an upgrade is installed, you would be back to square one.

The Solution
After fiddling around a bit, I found that the OOB web part makes a REST API call to the Sitrion backend.  So I would simply have to make the call, process the data and generate the HTML that is displayed and then style the tile using CSS.  Below is each of those steps.

Make the REST API call

 var rootURL = location.protocol + '//' + location.host;

        var serviceLink = rootURL + "/_vti_bin/ng/activityfeed.svc/TrendingTags/?max=3";

        var HTML = 'All Activity and Trending #tags';

        $.ajax({

            type: 'GET',

            url: serviceLink,

            headers: { "Accept": "application/json;odata=verbose" },

            success: function (tagdata) {

               //Process results here

            }, // Success Function 

            error: function (response) {

            }

        });   // Ajax Call

The URL for the REST call, calls the Sitrion Activityfeed service passing in a parameter max=3.  Simply, it tells the service to return the top 3 results which is what our client wanted.

Processing The Data

Upon a successful call to the service, XML is returned.  To process it properly, you have to find the element in the XML and then loop through the results, build an HTML string and output it to an existing DIV using jQuery.  Here is the code for that.

 var tags = $(tagdata).find('tag');

                if (tags.length > 0) {

                    var tagtURL = [Your URL Here;]

                    for (i = 0; i < tags.length; i++) {

                        HTML += '#' + tags[i].textContent '

                         }

                     ...

                    $("#divLoadingTrendingTags").hide(); 

                    $("#TrendingTags").html(HTML);                }



                else {



                    $("#divLoadingTrendingTags").html("No trending tags found.");



                }

The CSS

There are 3 styles used for the tile.  They are listed below.

#TrendingTags {

  background-color: #0086A9;

  height: 180px;

  margin: 10px;

  width: 380px;

}



.trendingTag-Title {

  color: white;

  font-size: 16px;

  font-weight: normal;

  padding-top: 5px;

  padding-left: 10px;

}



.trendingTag-Text {

  padding-top: 10px;

  padding-left: 15px;

  position: relative;

  font-weight: normal;

  color: white;

  font-size: 24px;

  width: 100%;

}

The final HTML looks like:

and the Tile looks like: