none
SharePoint 2010 Blog with Subcategories RRS feed

  • Question

  • Hi guys,

    in blogs are just categories in one level, which makes navigation between different blog entries easy. It looks like this:

    Cat A
    Cat B
    Cat C

    I want to have different levels of catergories. For example categories and subcategories like this:

    Cat A
    Subcat A1
    Subcat A2
    Subcat A3
    Cat B
    Subcat B1
    Cat C

    Are there any solutions or ideas how to treat this?

    Thank you in advance,

    Björn

    • Edited by bbod Thursday, January 5, 2012 3:19 PM
    Thursday, January 5, 2012 12:34 PM

Answers

  • Hey guys.

    Implemented it on my own...

    1. added parentCategory column (Lookup) to Categories list:

    2. Implemented Javascript which renders Categories list:

    <html>
    <head>
    	<link href=".../jquery-ui.css" rel="stylesheet" type="text/css"/>
    	<script src=".../jquery-ui.min.js" type="text/javascript"></script>
    	<script src=".../jquery.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    	
    	$(document).ready(function() {
    		
    		$.getJSON(".../_vti_bin/ListData.svc/Categories?$orderby=ParentCategoryId",function(data) {
    			
    			var categories = new Array();
    			var catCounter = 0;
    			
    			$.each (data.d.results, function(i,result) {
    				
    				var title = result.Title;
    				var catId = result.Id;
    				var parentCatId = result.ParentCategoryId;
    
    				// collecting main categories...				
    				if (parentCatId == null || parentCatId == 0) {
    					
    					categories[catCounter] = new Object();
    					categories[catCounter]["Id"] = catId;
    					categories[catCounter]["Title"] = title;
    					categories[catCounter]["SubCategories"] = new Array();
    
    					catCounter++;
    
    				} else { 
    					
    					for (var i = 0; i < categories.length; i++) {	
    
    					// appending sub categories...
    						if (categories[i]["Id"] == parentCatId) {
    							
    							var subCatLength = categories[i]["SubCategories"].length;
    
    							categories[i]["SubCategories"][subCatLength] = new Object();
    							categories[i]["SubCategories"][subCatLength]["Id"] = catId;
    							categories[i]["SubCategories"][subCatLength]["Title"] = title;
    							categories[i]["SubCategories"][subCatLength]["ParentCatId"] = parentCatId;
    							
    						}
    					}
    				}
    			});
    			
    			// rendering to html list...
    			var htmlString = "<ul class='root static'>";
    			htmlString += "<li class='static'>";
    			htmlString += "<a class='static menu-item' href='.../Lists/Categories/AllCategories.aspx'>";
    			htmlString += "<span class='additional-background'><span class='menu-item-text'>Categories</span></span></a>";
    			
    			for (var i = 0; i < categories.length; i++) {	
    				
    				var catIdRender = categories[i]["Id"];
    				var titleRender = categories[i]["Title"];
    				var catsRender = categories[i]["SubCategories"];
    				
    				htmlString += "<ul class='static' style='width:145px; margin:0px 0px 0px 0px;'>";
    				htmlString += "<li class='static' style='font-weight: bold; width: 200px;'><a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + titleRender + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + titleRender + "</span></span></a></li>";
    				
    				if (catsRender.length > 0) {
    					for (var j = 0; j < catsRender.length; j++) {	
    						htmlString += "<li class='static' style='padding-left: 10px;'>";
    						htmlString += "<a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + catsRender[j]["Title"] + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + catsRender[j]["Title"] + "</span></span></a>";
    						htmlString += "</li>";
    					}
    				}
    
    				htmlString += "</ul>";
    			}
    			htmlString += "</li></ul>";
    			$("#myCategories").append(htmlString);
    		});
    	});
    	</script>
    </head>
    <body>
    	<div class='s4-ql menu vertical' id='myCategories' />
    </body>
    </html>
    

    3. That's it... Now it looks like this - What do you think?

     

    • Marked as answer by bbod Tuesday, January 10, 2012 3:40 PM
    Tuesday, January 10, 2012 3:40 PM

All replies

  • Hi bbod,

    Here are 2 workarounds for your refer.

    1.       Create a sub-categories column in Categories list, and using group by settings to make the structure similar like the image you provide.

    http://www.sharepointblog.co.uk/2011/10/nested-grouping-in-sharepoint-views.html

    2.       Create sub blog site to store blogs of different categories.

    Best regards,
    Emir

    Emir Liu

    TechNet Community Support

    Friday, January 6, 2012 8:11 AM
  • Hi bbod,

    Here are 2 workarounds for your refer.

    1.       Create a sub-categories column in Categories list, and using group by settings to make the structure similar like the image you provide.

    http://www.sharepointblog.co.uk/2011/10/nested-grouping-in-sharepoint-views.html

    2.       Create sub blog site to store blogs of different categories.

    Best regards,
    Emir

    Emir Liu

    TechNet Community Support

    Hi Emir,

    thank you for your answer.

    I want to use the categories for navigation. My problem is, that the navigation does not show subcatergories.

    I imagine a solution like this (on the right side "Kategorien"): http://www.ifib.de/blog/

    Best regards,

    Björn

    Friday, January 6, 2012 8:31 AM
  • Hi bbod,

    We can add the link to navigation bar or try to using a coding solution to create a custom left navigation bar.
    http://www.chaitumadala.com/2011/08/how-to-customize-current-navigation.html
    http://blogs.msdn.com/b/matjazperpar/archive/2008/12/17/how-to-create-custom-navigation-menu-in-sharepoint-with-xml-data-source.aspx

    Best regards,
    Emir


    Emir Liu

    TechNet Community Support

    Tuesday, January 10, 2012 12:52 PM
  • Hey guys.

    Implemented it on my own...

    1. added parentCategory column (Lookup) to Categories list:

    2. Implemented Javascript which renders Categories list:

    <html>
    <head>
    	<link href=".../jquery-ui.css" rel="stylesheet" type="text/css"/>
    	<script src=".../jquery-ui.min.js" type="text/javascript"></script>
    	<script src=".../jquery.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    	
    	$(document).ready(function() {
    		
    		$.getJSON(".../_vti_bin/ListData.svc/Categories?$orderby=ParentCategoryId",function(data) {
    			
    			var categories = new Array();
    			var catCounter = 0;
    			
    			$.each (data.d.results, function(i,result) {
    				
    				var title = result.Title;
    				var catId = result.Id;
    				var parentCatId = result.ParentCategoryId;
    
    				// collecting main categories...				
    				if (parentCatId == null || parentCatId == 0) {
    					
    					categories[catCounter] = new Object();
    					categories[catCounter]["Id"] = catId;
    					categories[catCounter]["Title"] = title;
    					categories[catCounter]["SubCategories"] = new Array();
    
    					catCounter++;
    
    				} else { 
    					
    					for (var i = 0; i < categories.length; i++) {	
    
    					// appending sub categories...
    						if (categories[i]["Id"] == parentCatId) {
    							
    							var subCatLength = categories[i]["SubCategories"].length;
    
    							categories[i]["SubCategories"][subCatLength] = new Object();
    							categories[i]["SubCategories"][subCatLength]["Id"] = catId;
    							categories[i]["SubCategories"][subCatLength]["Title"] = title;
    							categories[i]["SubCategories"][subCatLength]["ParentCatId"] = parentCatId;
    							
    						}
    					}
    				}
    			});
    			
    			// rendering to html list...
    			var htmlString = "<ul class='root static'>";
    			htmlString += "<li class='static'>";
    			htmlString += "<a class='static menu-item' href='.../Lists/Categories/AllCategories.aspx'>";
    			htmlString += "<span class='additional-background'><span class='menu-item-text'>Categories</span></span></a>";
    			
    			for (var i = 0; i < categories.length; i++) {	
    				
    				var catIdRender = categories[i]["Id"];
    				var titleRender = categories[i]["Title"];
    				var catsRender = categories[i]["SubCategories"];
    				
    				htmlString += "<ul class='static' style='width:145px; margin:0px 0px 0px 0px;'>";
    				htmlString += "<li class='static' style='font-weight: bold; width: 200px;'><a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + titleRender + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + titleRender + "</span></span></a></li>";
    				
    				if (catsRender.length > 0) {
    					for (var j = 0; j < catsRender.length; j++) {	
    						htmlString += "<li class='static' style='padding-left: 10px;'>";
    						htmlString += "<a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + catsRender[j]["Title"] + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + catsRender[j]["Title"] + "</span></span></a>";
    						htmlString += "</li>";
    					}
    				}
    
    				htmlString += "</ul>";
    			}
    			htmlString += "</li></ul>";
    			$("#myCategories").append(htmlString);
    		});
    	});
    	</script>
    </head>
    <body>
    	<div class='s4-ql menu vertical' id='myCategories' />
    </body>
    </html>
    

    3. That's it... Now it looks like this - What do you think?

     

    • Marked as answer by bbod Tuesday, January 10, 2012 3:40 PM
    Tuesday, January 10, 2012 3:40 PM
  • Hi bbod,

    This looks to be exactlly what I am looking to do.  Where exactly do the all the Javascript go?  I have tried putting it a bunch a different place but nothing worked for me.

    Thanks

    Tuesday, February 7, 2012 4:08 PM
  • I understand it's been a couple of years since the last question, but maybe this post could point to the right direction where to put the Javascript:

    http://stackoverflow.com/questions/21183592/customize-the-quick-launch-items-for-certain-pages-in-sharepoint


    Slava Gorbunov
    http://wyldesolutions.com
    http://wyldesharepoint.blogspot.com

    Tuesday, December 9, 2014 4:57 AM
  • Hi bbod,

    I found your solution for subcategories, and I want to implement it. But I don't know where put the javascript in Sharepoint 2010. 

    I know that this post is very old, but SP2010 is still in use in our company. 

    Thanks for your answer if you are always here... 

    Best regards,

    NMA

    Tuesday, November 10, 2015 1:23 PM