Expanding nested categories in Service Portal by default

[aaronbartosch]

On our Service Portal I have a requirement that Nested categories be expanded by default So that you do NOT have to click the little folder icon to expand the sub categories.

Has anyone been able to figure this out?

[Robert Chrystie]

Hi Aaron,

The logic to do this is already built into the SC Categories, so we can reuse that logic and have it run with the page loads instead of only when the parent is expanded.   You'll need to clone the SC Categories widget and update the server script to get this to work.   Start by adding {} to the if on line 31, as we will need to run multiple lines of code now and not just the single line that was there originally.   Inside this if, and below the original line, add the following:

var childCategories = buildSubcategoryArr(selectedCategoryItem.sys_id);
selectedCategoryItem.subcategories = retrieveCategoriesFromArr(childCategories);
selectedCategoryItem.showSubcategories = true;

You should end up with something like this:

if (selectedCategoryItem) {
         selectedCategoryItem.selected = true;

         var childCategories = buildSubcategoryArr(selectedCategoryItem.sys_id);
         selectedCategoryItem.subcategories = retrieveCategoriesFromArr(childCategories);
         selectedCategoryItem.showSubcategories = true;
}

This is doing the same thing as lines 54-56 in the original.

[dansieders]

Thank you for your post Robert,

This was exactly what I was looking for.

Cheers

Daniel

[samwallace881]

I tried this out Robert and it was not successful.

I am trying to make categories and their subcategories display all the time - but in the same nested structure without needing to click on anything.

Here is my server script:

(function() {
options.category_layout = options.category_layout || "Nested";
options.omit_badges = options.omit_badges == "true" || options.omit_badges == true;
options.hide_xs = options.hide_xs == "true" || options.hide_xs == true;

if (options.page) {
var pageGR = new GlideRecord("sp_page");
options.page = (pageGR.get(options.page)) ? pageGR.getValue("id") : null;
} else
options.page = $sp.getDisplayValue("sc_category_page") || 'sc_category';

data.sc_catalog = $sp.getValue('sc_catalog');

var categoryID = $sp.getParameter("sys_id");

// If the selected category is a subcategory, we need to open all it's parent categories
if (input && input.action === "retrieve_parent_hierarchy") {
data.categories = input.categories;
if(!input.cur_category)
return;
var categoryJS = new sn_sc.CatCategory(input.cur_category);
if (!categoryJS)
return;
var parentArr;
if (options.category_layout !== "Nested" || !categoryJS.getParent())
parentArr = data.categories;
else
parentArr = openParent(categoryJS.getParent());

var selectedCategoryItem = findElementBySysID(parentArr, input.cur_category);

-------------here is where I added your code-----------------------
if (selectedCategoryItem){
selectedCategoryItem.selected = true;
var childCategories = buildSubcategoryArr(selectedCategoryItem.sys_id);
selectedCategoryItem.subcategories = retrieveCategoriesFromArr(childCategories);
selectedCategoryItem.showSubcategories = true;
}
}
else {
data.categories = [];
data.selected_category = $sp.getParameter("sys_id");
}
})();

function openParent(cat_id) {
var catItem;
var categoryJS = new sn_sc.CatCategory(cat_id);
if (!cat_id || !categoryJS)
return;
if (!categoryJS.getParent())
catItem = findElementBySysID(data.categories, cat_id);
else {
var parentCategoryArr = openParent(categoryJS.getParent());
catItem = findElementBySysID(parentCategoryArr, cat_id);
}

if (!catItem)
return [];

 var subcategoryArr = buildSubcategoryArr(catItem.sys_id);
 catItem.subcategories = retrieveCategoriesFromArr(subcategoryArr);
 catItem.showSubcategories = true;
 return catItem.subcategories;
}

function findElementBySysID(arr, id) {
var foundElements = arr.filter(function(item) {
return item.sys_id === id;
});

return (foundElements.length > 0) ? foundElements[0] : null;
}

function retrieveCategoriesFromArr(arr) {
var categories = [];
for (var i = 0; i < arr.length; i++) {
var cat = retrieveCategoryFromArr(arr[i].sys_id);
if (cat)
categories.push(cat);
}
return categories;
}

function retrieveCategoryFromArr(cat_id) {
var categoryJS = new sn_sc.CatCategory(cat_id);
if (!categoryJS || !categoryJS.canView())
return null;
var item_count = 0;
if (options.check_can_view != true && options.check_can_view != "true")
item_count = categoryJS.getItemsCount();
else if (options.check_can_view == true || options.check_can_view == "true")
item_count = categoryJS.getViewableItemsCount();

if (item_count) {
var cat = {};
cat.title = categoryJS.getTitle();
cat.sys_id = cat_id;
cat.count = item_count;
cat.parent = categoryJS.getParent();
if (options.category_layout === "Nested")
cat.isParentCategory = categoryJS.getViewableSubCategories().length > 0;
return cat;
}

return null;
}

function buildSubcategoryArr(parentID) {
var categoryJS = new sn_sc.CatCategory(parentID);
return categoryJS.getViewableSubCategories();
}

[bretelson_patri]

I am also trying to do something similar to expanding the categories out in the widget.  Robert - I tried this solution as well and could not get it to work.  I applied your code example to my cloned SC Category widget.  What am I missing?  Thanks