Need help on Service Portal widget

[Pradeepa B]

The requirement is to create a new widget that should only be visible when users click on specific subcategories.

Could you please assist with the HTML, Server Script, and Client Script for this functionality?

Thank you

[Kieran Anson]

As your logic is only in the server script, when a new category is changed you need to listen for that change in your widget.

You can do this in your client script by listening for "$sp.service_catalog.category.selected" which "SC Categories" broadcasts.

$rootScope.on("$sp.service_catalog.category.selected", function(event, data){
	if(data.sys_id == 'your sysid')
	c.view = true;
})

And then in your widget ng-if change data.view to c.view

[Pradeepa B]

Hi @Kieran Anson ,

could you please provide the updated script.

HTML: 

<div>
<div class="alert alert-danger" ng-if="data.invalid_table" >
${Table not defined} '{{data.table_label}}'
</div>
<sp-widget ng-if="data.dataTableWidget && data.view" widget="data.dataTableWidget"></sp-widget>
</div>

Server script:

(function(){

    /*  "use strict"; - linter issues */

    // populate the 'data' object

    var sp_page = $sp.getValue('sp_page');

    var pageGR = new GlideRecord('sc_category');

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

    data.view=false;

    if(data.thi=="f5ab212f1b3f1e9092682174604bcb79") // subcategory sys id

        {

            data.view=true;

        }

    pageGR.get(sp_page);

    data.page_id = pageGR.getValue("id");

    $sp.getValues(data);

    if (data.field_list) {

        data.fields_array = data.field_list.split(',');

    } else {

        data.field_list = $sp.getListColumns(data.table);

    }

    if (input) {

        data.p = input.p;

        data.o = input.o;

        data.d = input.d;

        data.q = input.q;

    }

    data.p = data.p || 1;

    data.o = data.o || $sp.getValue('order_by');

    data.d = data.d || $sp.getValue('order_direction');

    data.page_index = (data.p - 1);

    data.window_size = $sp.getValue('maximum_entries') || 10;

    data.window_start  = (data.page_index * data.window_size);

    data.window_end = (((data.page_index + 1) * data.window_size));

    data.filter = $sp.getValue("filter");

    var gr = new GlideRecordSecure(data.table);

    if (!gr.isValid()) {

        data.invalid_table = true;

        data.table_label = data.table;

        return;

    }

    data.table_label = gr.getLabel();

    options.table = data.table;

    options.fields = data.field_list;

    options.o=data.o;

    options.d= data.d;

    options.filter=data.filter;

    options.window_size=data.window_size;

    options.view = 'sp';

    options.useInstanceTitle = true; // to make sure Data Table widget uses headerTitle always

    options.headerTitle =options.title;

    options.show_breadcrumbs=true;

    data.dataTableWidget = $sp.getWidget('widget-data-table', options);

})();

Client script: 

function ($scope, spUtil, $location, spAriaFocusManager) {

    $scope.$on('data_table.click', function(e, parms){

        var p = $scope.data.page_id || 'sc_category';

        //var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: 'sp'};

        var s = {id: p, sys_id:'f5ab212f1b3f1e9092682174604bcb79',view: 'sp'};   // Subcategory sys id

        var newURL = $location.search(s);

        spAriaFocusManager.navigateToLink(newURL.url());

    });

}

[Pradeepa B]

Hi @Kieran Anson ,

Could you please help me on this script?

[Kieran Anson]

Hello,

I provided a code snippet. Can you try to add that to your client script and debug? It will help you learn 🙂 

[Vishal Jaswal]

Hello @Pradeepa B 

When you mention subcategories, I am assuming you are trying to refer sub-menu options (I could be wrong here). For example, below is a screenshot of CSM Portal where there are multiple sub-menu to Support Menu item:

When you click on any sub-menu item let's say Assets, then you can notice the URL changes to ".service-now.com/csm?id=csm_assets&table=alm_asset&view=csp_admin"

The Assets data displayed as shown below

So, you need to learn Service Portal > Menus. An example filter applied for CSM Portal header menu:

 and under Related List - Menu Items you can locate "Support" 

Upon Clicking Support, you can notice the page associated with it (top right) and all sub-menus shown in the related list. 



You can click Assets and find the page id in the HREF/URL field (csm_assets)

Service Portal > Pages

The Page Content will give you the list of Widgets associated with the page

You need to create a Widget either by cloning an existing OOB one or from scratch and then in the Page design you need to add container (if not exists already), select the size number mentioned under container (any number under Container in the left), drag it to the right, search your widget (Top left - Filter Widget) to drag and drop from left to the right (in the container).

You can take reference from one of my recent post to create a widget here.

Hope that helps!