Forums/Community/Community tips & tricks

Create groups of topics inside a forum. (Web portal)

Mikhail Zakharov
posted this on August 09, 2012 02:16

We are using some forums as a knowledge base. It's forces to group some topics to similar sections. There are "category" function in Zendesk for combining forums. But now you cannot group topics inside a forum.

I developed a script for widget. This widget will add an ability to grouping inside a forum (see a screenshot http://habrastorage.org/storage2/61d/6a5/993/61d6a59937a5186b4b7e13...).
How does it work.

1. You change name of topic from "Topic name" to "Group name :: Topic name". Where "::" is a splitter.
2. Create Global Javascript widget with script (at the bottom of page or at Pastebin http://pastebin.com/f2CTCnrP)
3. When you navigate to forum you'll see a groups.

Algoritm of the code:
1. Get all topics from page
2. Iterate each of topic and looking for splitter
3. Split topic name to group name and topic caption.
4. Try to found existing group name. If yes move the topic to group. Else create new group node


This script is strongly depends on Zendesk's markup. And I hope that it will not changed in future =)


// Get current url
var s_url=window.location.pathname;
var s_urlparts = s_url.split('/');
var s_section = s_urlparts[1];

// Run if we in the "forums" section
if (s_section=='forums')
{
// Group node HTML
var group_node_start = '<div class="item "><h1 class="fade_truncation_outer"><div class="fade_truncation_inner"></div><span class="group_node" style="font-size:14pt">'
var group_node_finish= '</span></h1></div><br/>';

// Get all topics from page
var topic_link = $j("div.item div h1 span a");
var split_divider = "::"; // splitter

$j.each(topic_link, function ()
{
// for each topic in collection
var title = $j(this).attr('title'); // get topic title
var title_splitted = title.split(split_divider); // split topic title
if (title_splitted.length>1)
{
// if splitted
// Get group name
var group_name=title_splitted[0].trim();
// Get topic name
var topic_name=title_splitted[1].trim();
// Set topic name without group name
$j(this).attr('title',topic_name);
$j(this).text(topic_name);

// Get parent of item
var found_item = $j(this).parent().parent().parent().parent();

// Try to get existing groups
var group_node = $j('span.group_node:contains("'+group_name+'")');
if (group_node.length)
{
// Great. We found group. Move item to this group.
group_node.append("<div class='item '>"+found_item.html()+"</div>");
found_item.remove();
}
else
{
// Not found. Ok. Create new and move item to it.
var root_node=$j("div#search-result");
root_node.append(group_node_start+group_name+group_node_finish);
$j('span.group_node:contains("'+group_name+'")').append("<div class='item '>"+found_item.html()+"</div>");
found_item.remove();
}

}

});

// remove doubles at bottomline
$j.each($j("span.group_node"), function ()
{
$j(this).children("div.item:last").addClass("nobottom");
});
}

 

Comments

User photo
Brook

Is any one using this??

July 11, 2013 15:33
User photo
Brook

I just started using this - love it!

July 11, 2013 16:29
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Brook,

I'm using it =) And I happy that you found it useful too!

July 12, 2013 01:36
User photo
Jennifer Rowe
Zendesk

Hi Brook,

Glad you like it! Mikhail has a bunch of awesome tips in this forum, so be sure to check out all of them!

 

July 12, 2013 09:02
User photo
Jennifer Rowe
Zendesk

I just added "mikhail" as a search phrase to all his tips so they should be easy to find when you search in the tips and tricks forum. :)

July 12, 2013 09:14
User photo
Andy Hoover
leankitkanban

Just started trying to use this. It works for one topic/article, but not two others in the same Forum. I can't figure out what I'm doing wrong or differently between them.

Not sure if the order of events matters, so I deleted the javascript widget and recreated it after altering the topic titles, and no change. These two remain ungrouped, with the double colon visible just like a regular title.

Any ideas on what to check for?

August 13, 2013 11:47
User photo
Andy Hoover
leankitkanban

Update: It looks like it will work for only one Topic per Forum. It will not show two Topics in the same grouping within the Forum.

August 13, 2013 11:50
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Andy,

Could you please attach a screenshot or link to your portal? There are no limitations to inner groups. Please look how it works on our page https://docsvision.zendesk.com/forums/20648076-%D0%A2%D0%B5%D1%85%D...

August 14, 2013 22:42
User photo
Andy Hoover
leankitkanban

Thanks for the response, Mikhail!

I've found that it works on some of my pages, but not this one in particular: http://support.leankit.com/forums/20894257-Boards

In that particular Forum, if I alter Topic/Article titles to include [innergroup]::[title], that Topic/Article is duplicated on the list--it appears under the inner group name, and in its old place. Sometimes, it doesn't even do that--the title just shows the [innergroup]::[title] as its title.

I suspect its a javascript thing on that particular page, but I don't know what would be any different from our other Forums. Any thoughts you might have would be much appreciated.

August 15, 2013 10:26
User photo
Mikhail Zakharov
Портал технической поддержки

Andy,

Thank you for link to page. There is an error at line

$j('span.group_node:contains("'+group_name+'")').append("<div class='item '>"+found_item.html()+"</div>");

It causes an exception and the next code does not executed (include removing duplicates). It's strange but this line is correct and works fine for other pages. Maybe there is a some difference in jquery module.

So try to change this line to this

try{

$j('span.group_node:contains("'+group_name+'")').append("<div class='item '>"+found_item.html()+"</div>");

};

August 15, 2013 11:29
User photo
Andy Hoover
leankitkanban

After making that change, the script didn't appear to work at all :(

August 15, 2013 12:24