Display subcategories as clickable items

mathiasjohansso · ‎08-28-2017

Hi all!

I have a requirement from a customer to show subcategories as items in the "SC Category Page"-widget.

OOB, when a category does not have any orderable items, the page will only state that there are no items in the category, even if there are subcategories.

Is it possible to modify the widget and enable you to browse the categories?

kotiswaroop · ‎08-28-2017

Hi Mathias,

You can clone the widget and modify the script as you like.

In the OOB page with id as 'sc_category' observe the url when you are clicking on a category. SC Category Page widget will take the sysid of the category from url and will glide record sc_cat_item_category table to display the items related to it. Now what you need to do is instead of querying sc_cat_item_category table query sc_category table based on sysid from the url and use the all the oob code to collect subcategory info and displaying. At the same time modify the directive code as well in SC Categories widget. This is the widget which changes the url of the page [shows category navigation]. So you need to take care of the directive present in this.

Regards

Swaroop

View solution in original post

mirkoe · ‎09-01-2017

Thanks a lot. I also made a script that picks up all items that are in subcategories and shows them in in this main parent category if that ´s empty. Here is the code for that if someone needs it.

(function() {

data.category_id = $sp.getParameter("sys_id");

data.showPrices = $sp.showCatalogPrices();

if (options && options.sys_id)

data.category_id = options.sys_id;

data.sc_catalog_page = $sp.getDisplayValue("sc_catalog_page") || "sc_home";

// Does user have permission to see this category?

if (!$sp.canReadRecord("sc_category", data.category_id)) {

data.error = "You do not have permission to see this category";

return;

}

var cat = new GlideRecord('sc_category');

cat.get(data.category_id);

data.category = cat.getDisplayValue('title');

var items = data.items = [];

var sc = new GlideRecord('sc_cat_item_category');

if (data.category_id)

sc.addQuery('sc_category', data.category_id);

sc.addQuery('sc_cat_item.active',true);

sc.addQuery('sc_cat_item.sys_class_name', 'NOT IN', 'sc_cat_item_wizard');

sc.orderBy('sc_cat_item.order');

sc.orderBy('sc_cat_item.name');

sc.query();

console.log(sc.getRowCount());

if(sc.getRowCount() > 0) {

while (sc.next()) {

// Does user have permission to see this item?

if (!$sp.canReadRecord("sc_cat_item", sc.sc_cat_item.sys_id.getDisplayValue()))

continue;

var item = {};

var gr = new GlideRecord('sc_cat_item');

gr.get(sc.sc_cat_item);

gr = GlideScriptRecordUtil.get(gr).getRealRecord();

$sp.getRecordDisplayValues(item, gr, 'name,short_description,picture,price,sys_id');

item.sys_class_name = sc.sc_cat_item.sys_class_name + "";

item.page = 'sc_cat_item';

if (item.sys_class_name == 'sc_cat_item_guide')

item.page = 'sc_cat_item_guide';

else if (item.sys_class_name == 'sc_cat_item_content') {

$sp.getRecordValues(item, gr, 'url,content_type,kb_article');

if (item.content_type == 'kb') {

item.page = 'kb_article';

item.sys_id = item.kb_article;

} else if (item.content_type == 'literal') {

item.page = 'sc_cat_item';

} else if (item.content_type == 'external')

item.target = '_blank';

}

items.push(item);

}

}else {

var scc = new GlideRecord('sc_cat_item_category');

if (data.category_id)

scc.addQuery('sc_category.parent', data.category_id);

scc.addQuery('sc_cat_item.active',true);

scc.addQuery('sc_cat_item.sys_class_name', 'NOT IN', 'sc_cat_item_wizard');

scc.orderBy('sc_cat_item.order');

scc.orderBy('sc_cat_item.name');

scc.query();

while (scc.next()) {

// Does user have permission to see this item?

if (!$sp.canReadRecord("sc_cat_item", scc.sc_cat_item.sys_id.getDisplayValue()))

continue;

var item2 = {};

var grr = new GlideRecord('sc_cat_item');

grr.get(scc.sc_cat_item);

grr = GlideScriptRecordUtil.get(grr).getRealRecord();

$sp.getRecordDisplayValues(item2, grr, 'name,short_description,picture,price,sys_id');

item2.sys_class_name = scc.sc_cat_item.sys_class_name + "";

item2.page = 'sc_cat_item';

if (item2.sys_class_name == 'sc_cat_item_guide')

item2.page = 'sc_cat_item_guide';

else if (item2.sys_class_name == 'sc_cat_item_content') {

$sp.getRecordValues(item2, grr, 'url,content_type,kb_article');

if (item2.content_type == 'kb') {

item2.page = 'kb_article';

item2.sys_id = item2.kb_article;

} else if (item2.content_type == 'literal') {

item2.page = 'sc_cat_item';

} else if (item2.content_type == 'external')

item2.target = '_blank';

}

items.push(item2);

}

})()

mathiasjohansso · ‎09-01-2017

This is a really good addition!

mirkoe · ‎09-01-2017

I really think this should be the OOB solution. That you could choose how to display the category if it ´s empty (to either show subcategories or subcategory items or a empty category in options ). But now we have it here.

rrachuri · ‎12-05-2018

Thanks for sharing the code. It looks like the OOB widget Category Page has been updated in the Jakarta version. I don't see sc.query()

Could you please confirm

Edwin Fuller · ‎10-27-2021

Hey Mathia

Do you know if this works for the latest version of ServiceNow, the Rome release?