Popular Articles

Matthew_Cu

I am currently creating a custom homepage and part of the homepage is to use the Top Knowledge Articles.

The issue with this, is the articles which show are statically set in the Popularity field when we create/edit each KA. our management would prefer to have this list show the articles which have been visited the most. I have done some quick investigating and noticed that on the Cireson Knowledge article 1273, the Popular Articles section dynamically shows the Articles with the most views. Brilliant!!!

The code I have which returns the Top KA's is below, but I'm not sure how to change this into something which will return the Popular Articles.

function fn_ShowTopKnowledgeArticles() {

//Get the OOB articles HTML that we've already hidden.

var oobArticleElement = $("div[data-bind='visible: topKA']");

if (oobArticleElement.Length == 0) {

console.log("GCServiceCatalog - Unable to find OOB top KA element.");

return;

}

var glenTopArticleElement = $("#glen-top-articles");

glenTopArticleElement.children().remove();

//Get the title of the KA header.

glenTopArticleElement.append(oobArticleElement.find("h4")[0]);

//Next, grab the a tags. Each a tag contains an image nested inside. 

var articleLinks = $("div[data-template='top-ka']").find("a.cursor-pointer");

if (articleLinks.length == 0) {

console.log("GCServiceCatalog - Unable to find KA hrefs and image elements.");

return;

}

//Remove the div, which is the caption (description). We don't care about that. But we do care about the title.

var articleLinksClone = articleLinks.clone();

articleLinksClone.find("div").remove();

//Add the LAST 5. 

var strHtmlToAppend = "<ul>"

for(var i=articleLinksClone.length-1; i > -1 && i > articleLinksClone.length-6; i--) { //length -6 so that we only add a maximum of 5.

strHtmlToAppend += "<li>";

strHtmlToAppend += articleLinksClone[i].outerHTML;

//We also need the title. Get it from the original.

var parentTitleHtml = $(articleLinks[i]).parent().next().find("a")[0].outerHTML;

if (parentTitleHtml == null || parentTitleHtml.length == 0) {

parentTitleHtml = "Nameless Article";

}

strHtmlToAppend += parentTitleHtml;

strHtmlToAppend += "</li>";

}

strHtmlToAppend += "</ul>"

glenTopArticleElement.append(strHtmlToAppend);

}

Can anyone re-word this code to show the Popular Articles? I haven't been able to find a data-template named "pop-KA" or anything similar which may give me what I'm looking for.

Thanks for the help

john_doyle

Hi Matthew,

It looks like you are trying to manipulate the code on the original Home page. That page has been superseded twice in the portal. The Popular Articles page you are looking for is on the most recent Home page. You will find the various Home pages under Admin Settings > Navigation Settings on the drop-down menu in the top right-hand corner of the portal.

As stated previously, the most viewed articles are not part of the original Home page, but you can get them by making a call to the API:

$.getJSON('/api/V3/Article/GetTopArticlesByViewCount?count=5',function(data){do stuff with the data returned from the server;});

You can also get the top knowledge articles by calling this API and avoiding all of the manipulation you are doing in your original script:<br><pre class="CodeBlock"><code>$.getJSON('/api/V3/Article/GetTopArticlesByPopularity?count=5',function(data){do other stuff with the data returned from the server;});
I would recommend using these two calls to get the articles you need.

john_doyle

Hi Matthew,

It looks like you are trying to manipulate the code on the original Home page. That page has been superseded twice in the portal. The Popular Articles page you are looking for is on the most recent Home page. You will find the various Home pages under Admin Settings > Navigation Settings on the drop-down menu in the top right-hand corner of the portal.

As stated previously, the most viewed articles are not part of the original Home page, but you can get them by making a call to the API:

$.getJSON('/api/V3/Article/GetTopArticlesByViewCount?count=5',function(data){do stuff with the data returned from the server;});

You can also get the top knowledge articles by calling this API and avoiding all of the manipulation you are doing in your original script:<br><pre class="CodeBlock"><code>$.getJSON('/api/V3/Article/GetTopArticlesByPopularity?count=5',function(data){do other stuff with the data returned from the server;});
I would recommend using these two calls to get the articles you need.