Make active sc_catalog as category widget in servicenow

snow34 · ‎04-15-2024

Hi Team,

Need urgent help ! it would be great if anyone could help me as i am learning service portal.

In this image you can see boxes called as IT Services, HR Services, Legal Services, Facility Services. These boxes are in widget called as Home Main Navigation.

these boxes are refrenced to sc_catalog table , so in sc_catalog table there is one custom field called as "Visible in service portal" if visible in service portal is true then it will get visible in service portal and click of this boxes for example ""IT Services" then it should scroll down to related categories.

so the issue is i am able to bring this box but onclick of these boxes nothing is happening

please see below script for reference

HTML :

<div class="m-t-xl m-b-xl yit-home-main-navigation XXcontainer"

ng-hide="!c.visible">

<a class="yit-category highlight"

href="?id=yit_cat_item&sys_id={{ data.report_incident_cat_item }}"

>

<span>

</span>

</a>

</div>

<div ng-repeat="(sys_id, category) in data.categories | filterByParent: '' | orderObjectBy: 'order'"

class="col-sm-2">

<a class="yit-category"

href="?id={{ page.id }}&sys_id={{ category.sys_id.value }}&scroll=1"

ng-class="{ 'yit-category--active': category.sys_id.value === data.selected_root_category, 'disabled': category.disabled }"

ng-click="setCategory($event, category.sys_id.value)">

<span>

</span>

</a>

</div>

<div ng-if="data.sys_id && data.categories[data.selected_root_category]"

id="yit-home-main-subcategories"

class="subcategories">

<div class="col-sm-3"

ng-if="!data.hide_sidebar">

{{ data.categories[data.selected_root_category].title.display_value }}

</div>

<a href="javascript&colon;;"

class="yit-subcategory_1"

ng-class="{ 'active': subcategory_1.open }"

ng-click="setCategory($event, subcategory_1.sys_id.value)">

<i class="fa pull-right"

ng-class="{ 'fa-minus': subcategory_1.open, 'fa-plus': !subcategory_1.open }">

</i>

</a>

<div class="yit-subcategories_2"

ng-class="{ 'open': subcategory_1.open, 'closed': !subcategory_1.open }">

<a ng-repeat="subcategory_2 in data.categories | filterByParent: subcategory_1.sys_id.value | orderObjectBy: 'order':'title' "

href="?id={{ page.id }}&sys_id={{ subcategory_2.sys_id.value }}&scroll=1"

class="yit-subcategory_2"

ng-class="{ 'active': data.sys_id == subcategory_2.sys_id.value }"

ng-click="setCategory($event, subcategory_2.sys_id.value)"

>

</a>

</div>

<a href="?id={{ page.id }}&sys_id={{ subcategory_1.sys_id.value }}&scroll=1"

class="yit-subcategory_1"

ng-class="{ 'active': data.sys_id == subcategory_1.sys_id.value }"

ng-click="setCategory($event, subcategory_1.sys_id.value)">

{{ subcategory_1.title.display_value ? subcategory_1.title.display_value : subcategory_1.name.display_value }}

</a>

</div>

<div ng-class="{

'col-sm-9': !data.hide_sidebar,

'col-sm-12': data.hide_sidebar

}">

<a href="javascript&colon;;"

class="yit-subcategories__btn_close"

ng-click="closeDrawer()">

</a>

<!--div class="yit-category-description"

ng-bind-html="data.categories[data.selected_root_category].description.display_value">

</div-->

<div class="yit-subcategory-title"

ng-if="data.categories[data.sys_id].title.display_value"

ng-bind-html="data.categories[data.sys_id].title.display_value">

</div>

<div class="yit-subcategory-description"

ng-if="data.categories[data.sys_id].description.display_value"

ng-bind-html="data.categories[data.sys_id].description.display_value">

</div>

</div>

<div ng-repeat-start="subcategory in data.subcategories"

class="yit-item-section"

id="{{ subcategory }}">

</div>

<div ng-if="data.show_tabs"

class="yit-items-tabs"

>

<form>

<label class="control-label" for="radios">${View applications}</label>

<br>

${By Service Area}

</label>

<br>

${By Business Service}

</label>

<br>

${Alphabetically}

</label>

</div>

${Used by country}

</label>

<br>

${Used by business segment}

</label>

<br>

${Business criticality}

</label>

</div>

${Cost allocation principle}

</label>

<br>

${Owned by}

</label>

<br>

${Managed by}

</label>

</div>

</fieldset>

</form>

</div>

<input type="search"

placeholder="${Search for a keyword}"

ng-model="c.data.search_input"

ng-model-options='{debounce: 250}'

ng-change="setTab('all')"

class="form-control">

<i class="fa fa-search"

aria-hidden="true"

ng-class="{'search-inactive': !c.data.search_input || c.data.search_input == ''}">

</i>

</div>

<div>

<li class="tab"

ng-class="{ 'active': c.tabIndex == 'all' }"

ng-click="setTab('all')"

>

</li>

<li class="tab"

ng-repeat="tab in data.tabs"

ng-class="{ 'active': c.tabIndex == $index }"

ng-click="setTab($index)">

<a href="javascript&colon;void(0)">{{ tab[0] }} - {{ tab[tab.length - 1] }}</a>

</li>

</ul>

</div>

<div class="yit-tab-list-wrapper"

ng-style="({'max-height': c.data.max_height})"

ng-cloak>

<div class="yit-tab-item"

ng-repeat="card in data.card_widgets[subcategory] | searchTitle: c.data.search_input | searchTitleByLetters: c.tabLetters"

ng-init="c.data.max_height = $last ? (Math.ceil(($index + 1) / 3) * 20 + 75) : data.card_widgets[subcategory].length">

<sp-widget widget="card.widget"></sp-widget>

</div>

<div ng-if="appSelected"

class="app-details"

ng-cloak>

<a class="close-app-btn"

href

ng-click="c.closeApp()"

ng-keypress="c.closeApp()"

tabindex="0"title="${Close application details}">

<div>

<span>${Back to application list}</span>

</div>

</a>

<sp-widget widget="appWidget"></sp-widget>

</div>

<div class="application-list-wrapper"

ng-if="data.show_tabs && selected_list != 0">

<sp-widget widget="c.data.application_list"></sp-widget>

</div>

<div class="yit-item delay-{{

c.fader[subcategory] ?

($index - c.data.subcategory_item_limit) % 20 :

(data.card_widgets[subcategory].length - $index - 1) % 20

}}"

ng-repeat="card in data.card_widgets[subcategory]"

ng-if="($index < c.data.subcategory_item_limit || c.expanded[subcategory]) && !data.show_tabs"

ng-class="{

'fadein': ($index >= c.data.subcategory_item_limit && c.fader[subcategory]),

'fadeout': ($index >= c.data.subcategory_item_limit && !c.fader[subcategory]),

}"

>

<sp-widget widget="card.widget"></sp-widget>

</div>

<div ng-if="data.card_widgets[subcategory].length > c.data.subcategory_item_limit && !data.show_tabs"

class="flex text-center m-b"

>

<span

class="btn btn-yit btn-yit-orange btn-yit"

ng-click="toggleSubcategory(subcategory)"

>

</span>

</div>

Server Script:

(function() {

//var portalHelpers = new YIT_Portal_helpers();

var firstSubcategorySysID; // helper to select first sub category by default, if root has no items

var UPCOMING_ITEMS_CATALOG = '53e89442db8663006a155501ce961909';

// Categories that will use the cmdb application list view set in the widget instance options

data.cmdb_categories = options.cmdb_categories ? options.cmdb_categories.split(',') : [];

// Report categories that will use the CMDB application list view with report type filtered

data.report_categories = options.report_categories ? options.report_categories.split(',') : [];

data.tabs = [];

data.items = [];

data.categories = {};

data.count_roots = 0; // number of root categories

data.card_widgets = {};

data.hide_sidebar = false;

data.subcategories = [];

// if a subcategory has more items, then they will be hidden by default,

// and a "Show more" button will be displayed

// 12.5.2020 change the limit to 12 from 8

data.subcategory_item_limit = 12;

data.sys_id = input.sys_id || $sp.getParameter('sys_id');

data.punchoutOptions = { catId: data.sys_id };

var elisaPunchoutItemId = gs.getProperty('x_tcpas_elisa_punc.elisa.punchout.setup.button.visibility.item');

function isElisaPunchoutCategory(categoryId) {

var grPunchoutConfig = new GlideRecord('sc_cat_item_category');

grPunchoutConfig.addQuery('sc_cat_item', elisaPunchoutItemId);

grPunchoutConfig.addQuery('sc_category', categoryId);

grPunchoutConfig.query();

return grPunchoutConfig.hasNext();

}

//data.listing_mode = getCmdbListType(data.sys_id);

// show tabs

// TODO: make it configurable

data.show_tabs = data.listing_mode != 'normal';

/**

* TRANSLATED MESSAGES BY KEY

*/

data.messages = {};

data.messages.title = gs.getMessage(options.title || 'Title');

data.messages.subtitle = gs.getMessage(options.subtitle || 'Subtitle');

data.messages.btn_view = gs.getMessage('yit.portal.btn.view');

data.messages.report_incident_label = gs.getMessage(options.report_incident_label);

if (options.report_incident_cat_item) {

var reportIncidentCatItemGR = new GlideRecord('sc_cat_item');

reportIncidentCatItemGR.get(options.report_incident_cat_item);

var catItemHelper = new sn_sc.CatItem(reportIncidentCatItemGR.getUniqueValue());

if (catItemHelper.canView()) {

data.report_incident_picture = reportIncidentCatItemGR.getValue('picture') + '.iix';

data.report_incident_cat_item = options.report_incident_cat_item;

}

if (input && input.action == 'init_item') {

data._generatedItemGUID = gs.generateGUID();

return;

}

// Get all applicable categories

var scCategoryGR = new GlideRecord('sc_category');

// Excluding Finance and Facilities generic categories, becuase those are for backend usage

scCategoryGR.addEncodedQuery('active=true^sc_catalog.u_visible_in_portal=true');

scCategoryGR.orderBy('order');

// if we have selected catalogs in widget options, then add them to the query

if (options.catalogs)

scCategoryGR.addQuery('sc_catalog', 'IN', options.catalogs);

scCategoryGR.query();

while (scCategoryGR.next()) {

var categoryJS = new sn_sc.CatCategory(scCategoryGR.getUniqueValue() + '');

var isCurrentCategoryElisaPunchoutCategory = isElisaPunchoutCategory(scCategoryGR.sys_id);

if (categoryJS.canView()) {

var obj = {};

$sp.getRecordElements(obj, scCategoryGR, 'sys_id, title, description, homepage_image, order, parent');

if (scCategoryGR.getValue('sc_catalog') == UPCOMING_ITEMS_CATALOG) {

obj.disabled = true;

}

obj.isElisaPunchoutCategory = isCurrentCategoryElisaPunchoutCategory;

data.categories[obj.sys_id.value] = obj;

if (obj.parent.value == '') {

data.count_roots++;

}

if (scCategoryGR.getValue('parent') == data.sys_id) {

firstSubcategorySysID = firstSubcategorySysID || obj.sys_id.value;

}

// LISTING MODE: NORMAL SC CATALOG CATEGORIES AND ITEMS

// Get items from selected main or subcategory

if (data.sys_id == 'normal') {

// IF the main category is empty, then let's switch data.sys_id to the first subcategory by default

var helperGR = GlideRecord('sc_cat_item_category');

helperGR.addEncodedQuery('sc_cat_item.active=true^sc_category=' + data.sys_id);

helperGR.query();

if (!helperGR.next() && firstSubcategorySysID) {

data.sys_id = firstSubcategorySysID;

}

// if(data.sys_id) {

// data.showElisaPunchout = isElisaPunchoutCategory(data.sys_id);

// }

var scCatItemCategoryGR = new GlideRecord('sc_cat_item_category');

scCatItemCategoryGR.addEncodedQuery('sc_cat_item.active=true^sc_category=' + data.sys_id);

scCatItemCategoryGR.orderBy('sc_cat_item.order');

scCatItemCategoryGR.orderBy('sc_cat_item.name');

scCatItemCategoryGR.query();

while (scCatItemCategoryGR.next()) {

var obj = {};

// check user criteria

var catalogItemJS = new sn_sc.CatItem(scCatItemCategoryGR.getValue('sc_cat_item'));

if (!catalogItemJS.canView() || !catalogItemJS.isVisibleServicePortal()) {

continue;

}

$sp.getRecordElements(obj, scCatItemCategoryGR.sc_cat_item.getRefRecord(), 'order,name,u_sub_category,sys_class_name');

// create a separate array for this subcategory

data.card_widgets[obj.u_sub_category.value] = data.card_widgets[obj.u_sub_category.value] || [];

data.card_widgets[obj.u_sub_category.value].push({

title: scCatItemCategoryGR.getDisplayValue('sc_cat_item'),

widget: $sp.getWidget('yit-catalog-item-card', {

sys_id: scCatItemCategoryGR.getValue('sc_cat_item'),

category: data.sys_id,

sys_class_name: obj.sys_class_name.value

})

});

if (data.subcategories.indexOf(obj.u_sub_category.value) === -1) {

data.subcategories.push(obj.u_sub_category.value);

}

var count = 0;

if (data.sys_id && getCmdbListType(data.sys_id) == 'cmdb' || data.sys_id && getCmdbListType(data.sys_id) == 'report') {

data.categories[data.sys_id].app_list_widget_input = data.listing_mode;

data.hide_sidebar = true;

// Get CMDB applications as Items

var cmdbCiApplGR = new GlideRecord('cmdb_ci_service_discovered');

if (data.listing_mode == 'cmdb')

cmdbCiApplGR.addEncodedQuery('u_application_classification!=Report');

else if (data.listing_mode == 'report')

cmdbCiApplGR.addEncodedQuery('u_application_classification==Report');

cmdbCiApplGR.addActiveQuery();

cmdbCiApplGR.addQuery('u_show_in_portal', true);

cmdbCiApplGR.addQuery('install_status', '1'); // Added to show only Status = Active apps TASK0140187

// cmdbCiApplGR.addQuery('u_service_area', data.sys_id); // removed, in order to list all CMDB apps at once

cmdbCiApplGR.orderBy('name');

cmdbCiApplGR.query();

while (cmdbCiApplGR.next()) {

var obj = {};

$sp.getRecordElements(obj, cmdbCiApplGR, 'u_business_service');

//var subcatKey = obj.u_business_service.display_value; // create a separate array for this special subcategory (empty)

var subcatKey = ''; // list everything under just the root

data.card_widgets[subcatKey] = data.card_widgets[subcatKey] || [];

data.card_widgets[subcatKey].push({

title: cmdbCiApplGR.getDisplayValue('name'),

widget: $sp.getWidget('yit-catalog-item-card', {

view: 'minimal',

sys_id: cmdbCiApplGR.getValue('sys_id'),

sys_class_name: 'cmdb_ci_service_discovered'

})

});

// skip creating subcategories for now

/*if (data.subcategories.indexOf(obj.u_business_service.display_value) === -1) {

data.subcategories.push(obj.u_business_service.display_value);

}*/

}

// this is necessary in order to make listing of cmdb_ci_appl records

if (data.subcategories.length == 0) {

data.subcategories = [''];

}

// find the root category of the currently selected (sub) category

if (data.sys_id && data.categories[data.sys_id]) {

data.selected_root_category = data.sys_id;

while (data.categories[data.selected_root_category] &&

data.categories[data.selected_root_category].parent.value != ""

) {

data.selected_root_category = data.categories[data.selected_root_category].parent.value;

}

data.direct_parent = data.categories[data.sys_id].parent.value;

if (data.direct_parent && data.categories[data.direct_parent]) {

data.categories[data.direct_parent].open = true;

}

if (data.categories[data.sys_id]) {

data.categories[data.sys_id].open = true;

}

} else {

data.sys_id = null;

}

data.subcategories = data.subcategories.sort();

// // Function for checking if a category sys_id is either a CMDB application list or a CMDB report list

// function getCmdbListType(catId) {

// if (data.cmdb_categories.indexOf(catId) != -1 || portalHelpers.isServiceArea(catId))

// return 'cmdb';

// else if (data.report_categories.indexOf(catId) != -1)

// return 'report';

// else

// return 'normal';

// }

/**

* BUILD TABS

*/

var alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ'.split('');

var buffer = [];

alphabet.forEach(function(letter, index) {

buffer.push(letter);

if (buffer.length == 10 || index == alphabet.length - 1) {

data.tabs.push(buffer);

buffer = [];

}

});

})();

Client Controller:

function($scope, $rootScope, $element, $location, $window, $document, spScUtil, spUtil, $timeout) {

var c = this;

// Math used for calculating the max height for application list (HTML line 199)

$scope.Math = window.Math;

// Listen if an application link is clicked in a child widget in the alphabetical listing mode

$rootScope.$on('yitApplicationDetails', function(e, appSysId) {

$scope.app_list_loading = true;

$scope.appSelected = true;

// Get the application list with the correct input parameters

spUtil.get("yit-app-expansion", {sys_id: appSysId}).then(function(response) {

$scope.appWidget = response;

}).then(function() {

c.scrollToApplication();

$scope.app_list_loading = false;

});

// Scroll up to application view when an application is opened in alphabetical mode

c.scrollToApplication = function() {

setTimeout(function() {

var scrollArea = $('section.page');

var appTop = $element.find('.app-details').offset().top;

var parentPosition = scrollArea.scrollTop();

scrollArea.animate({

scrollTop: appTop + parentPosition - 90

}, 500);

}

// Close application detail view in alphabetic list mode

c.closeApp = function() {

$scope.appSelected = false;

$scope.appWidget = undefined;

}

// to work with tabs

c.visible = false;

// to store subcategories expanded state

c.fader = {};

c.expanded = {};

// to handle widget's own alphabet-based tabs

c.tabIndex = 'all';

c.tabLetters = [];

$scope.toggleSubcategory = function(subcategory) {

c.fader[subcategory] = !!!c.fader[subcategory];

//Removed timeout below, added here in Rome

c.expanded[subcategory] = !!!c.expanded[subcategory];

//Removed timeout in Rome because of slowness

//setTimeout(function() {

// c.expanded[subcategory] = !!!c.expanded[subcategory];

// }, 0);

}

$scope.setCategory = function($event, sys_id) {

$event.preventDefault();

$scope.loading = true;

if (c.data.selected_root_category === sys_id) {

$scope.closeDrawer();

} else if (c.data.categories[sys_id].open) {

c.data.card_widgets = {};

c.data.subcategories = [];

c.data.categories[sys_id].open = false;

} else {

c.data.sys_id = sys_id;

c.data.card_widgets = {};

c.data.subcategories = [];

c.data.categories[sys_id].open = true;

c.server.update().then(function() {

// Customer request: if there is only 1 category, and 1 item in that category, it should open automatically -_-

if (Object.keys(c.data.card_widgets).length === 1 &&

c.data.card_widgets[Object.keys(c.data.card_widgets)[0]].length === 1)

{

// if it's an Elisa Punchout category, don't automatically open the item

// since the punchout button should be clickable also for that category

if(!c.data.showElisaPunchout) {

$timeout(function(){

top.location.href = c.data.card_widgets[Object.keys(c.data.card_widgets)[0]][0].widget.data.link;

});

}

} else {

$scope.scrollToTop();

}

// Get the application list widget if the active category is a CMDB category

if (c.data.listing_mode != 'normal') {

// Open application list by Service Area by default

$scope.selected_list = "2"; // Default on load

getAppListWidget($scope.selected_list);

}

}).then(function() {

$scope.loading = false;

});

}

};

$scope.scrollToTop = function() {

setTimeout(function() {

var scrollArea = $('section.page');

var subcategoriesTop = $element.find('.yit-home-main-scrolltarget').offset().top;

var parentPosition = scrollArea.scrollTop();

scrollArea.animate({

scrollTop: subcategoriesTop + parentPosition - 90

}, 500);

}, 10);

};

$scope.closeDrawer = function() {

c.data.categories[c.data.selected_root_category].open = false;

c.data.sys_id = null;

c.data.selected_root_category = null;

};

$scope.hasChild = function(sys_id) {

// because of ie -_-

var values = Object.keys(c.data.categories).map(function(e) {

return c.data.categories[e]

});

return values.some(function(item) {

return item.parent.value == sys_id;

})

};

// Radio buttons for CMDB application list

$scope.handleTypeChange = function(value) {

c.closeApp();

$scope.selected_list = value;

checkRadio(value);

getAppListWidget(value);

};

var checkRadio = function(value){

angular.element('#radios-' + value).attr('aria-checked', true);

for(var i = 0; i <=8;i++){

if(i != value)

angular.element('#radios-' + i).attr('aria-checked', false);

}

// Get the application list widget with the right input

var getAppListWidget = function(tabValue, searchParam) {

$scope.app_list_loading = true;

// Don't get the list widget when Alphabetical list is chosen

if ($scope.selected_list == '0')

return;

// Widget mode depends on the chosen radio button

// Widget list type depends on whether we are quering CMDB applications without reports or reports only

var mode = '';

console.log($scope.selected_list)

switch($scope.selected_list){

case 1:

mode = "service";

break;

case 2:

mode = "area";

break;

case 3:

mode = "country";

break;

case 4:

mode = "segment";

break;

case 5:

mode = "criticality";

break;

case 6:

mode = "cap";

break;

case 7:

mode = "owned";

break;

case 8:

mode = "managed";

break;

default:

mode = "area";

}

var widgetInput = {

"mode": mode,

"list_type": c.data.listing_mode

}

if($rootScope.preselected)

widgetInput.preselected = $rootScope.preselected;

// If search parameter is given on function call update the widget input

if (searchParam)

widgetInput.search_input = searchParam;

// Get the application list with the correct input parameters

console.log(widgetInput)

spUtil.get("yit-application-list", widgetInput).then(function(response) {

c.data.application_list = response;

}).then(function() {

$scope.app_list_loading = false;

});

}

// this is the widget's own alphabet-based tabs

$scope.setTab = function(tabIndex) {

// If user gives a search parameter update application list widget

if (c.data.search_input != '') {

getAppListWidget($scope.selected_list, c.data.search_input)

} else {

getAppListWidget($scope.selected_list)

}

if (c.tabIndex !== tabIndex) {

c.tabIndex = tabIndex;

c.tabLetters = c.data.tabs[tabIndex] || [];

}

};

// Parent widget navigational tabs

// Report to tabs widget only, if we have actually available categories

if ((Object.keys(c.data.categories).length > 0 && c.data.count_roots > 0) || c.data.report_incident_cat_item) {

$rootScope.$broadcast('yit:tabs:add', {

scope_id: $scope.$id,

glyph: c.options.glyph,

title: c.data.messages.title,

active: c.data.sys_id && c.data.categories[c.data.selected_root_category],

subtitle: c.data.messages.subtitle

});

$scope.$on('yit:tabs:show', function(event, data) {

c.visible = data.scope_id == $scope.$id;

});

}

Link:

function(scope, elem) {

setTimeout(function() {

var $location = $injector.get('$location');

if ($location.search().scroll) {

// STSK0011065: After using breadcrumb to navigate to home page category, focus screen to the top of catalog area

// 😞

//document.getElementById('yit-home-main-subcategories').scrollIntoView();

if ($location.search().section) {

document.getElementById($location.search().section).scrollIntoView({

behavior: 'smooth'

});

} else {

document.getElementById('yit-home-main-subcategories').scrollIntoView({

behavior: 'smooth'

});

}

}, 500);

}

Sid_Takali · ‎04-15-2024

Hi @snow34 for boxes in blue color, which widget you are using?