Add a new abc filter for searching instead of the typeahead search.
ABC Filter
Code
This involves creating two widgets and adjusting a page to use the new widgets.
ABC Filter Widget
HTML
<div class="abc-filter"> <div class="abc-filter-i" ng-repeat="initial in ::data.initials"> <a class="label label-as-badge label-primary" href="?id=sc_category&initial={{::initial}}">{{::initial}}</a> </div> <div class="abc-filter-i"> <a class="label label-as-badge label-primary" href="?id=sc_category&initial=all">All</a> </div> </div>
CSS
.abc-filter { padding-top:5px; } .abc-filter-i { float:left; padding-right:5px; }
Server Script
(function() { data.sc_catalog = $sp.getValue('sc_catalog'); var initials = []; var itemRec = new GlideRecord('sc_cat_item'); itemRec.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_guide,sc_cat_item_wizard,sc_cat_item_content'); itemRec.addQuery('sc_catalogs', data.sc_catalog); itemRec.addQuery('active',true); itemRec.addQuery('category.active',true); itemRec.orderBy('name'); itemRec.query(); while (itemRec.next()) { if (!$sp.canReadRecord("sc_cat_item", itemRec.sys_id.getDisplayValue())) continue; // user does not have permission to see this item var initial = itemRec.name.toString()[0]; initials.push(initial); } var arrayUtil = new ArrayUtil(); initials = arrayUtil.unique(initials); //remove duplicates data.initials = initials; })();
Client Script
function() { /* widget controller */ var c = this; }
SC Category Page v2 Widget
- Go and find the SC Category Page widget.
- Clone the widget and give a new name: SC Category Page v2
- Adjust the Server Script
Server Script
(function() { data.category_id = $sp.getParameter("sys_id"); data.showPrices = $sp.showCatalogPrices(); data.initial = $sp.getParameter('initial') || 'all'; 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'); if (data.initial != 'all') { sc.addQuery('sc_cat_item.name', 'STARTSWITH', data.initial); } sc.orderBy('sc_cat_item.order'); sc.orderBy('sc_cat_item.name'); sc.query(); 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); } })()
Edit the SC Category Page
- Remove the Typeahead Search widget and add ABC Filter Widget
- Remove SC Category Page and replace with SC Category Page v2 widget
VERSION 2
I also have a version 2 with different images, available per request. You can format buttons in limitless possibilities in the Service Portal.
ABC Filter (Version 2)