Useful debugging scripts for service portal

Useful debugging scripts for service portal

Overview

This article contains several useful scripts for troubleshooting in service portal. All of these are intended to be used from the javascript console in your browser’s dev tools

Anywhere you see $0, this is the element currently selected in the elements panel of the browser. By selecting a div with the attribute widget=”widget”, $0 will represent the root of the widget directive, giving you full visibility into the $scope of that widget.

Get all widgets
$('div [widget="widget"]') - returns an array of all the widgets on a page

 

Show all widgets
$("div [widget='widget']").css("border", "1px solid red").css("padding-top", "20px").css("position", "relative").each(function(i){

var scope = $(this).scope();

var widget = scope.widget;

var elem = $("<div style='position: absolute; top: 1px; left: 1px'><a target='_blank' href='/$sp.do?id=widget_editor&sys_id="+ widget.sys_id+"'> "+ widget.name +"</a>&nbsp;&nbsp;</div>");

var printScope = $("<a href='javascript:void(0);'>Print scope</a>").on('click', function(){ console.info(scope); });

elem.append(printScope);

$(this).append(elem);

});

 

– This will outline all widgets in red, display each widget’s name and provide an easy way to print the scope for the widget.

Get $scope

There are several ways to get the $scope object for a particular widget.

$($0).scope() - This returns the $scope object for the element selected in the Elements panel

angular.element($0).scope() - Angular alternative for the above in case jQuery is not available

 

Refresh a widget

If you need to refresh a specific widget on a page use this. This will only work if $0 is the root of a widget directive (a div with the attribute widget=”widget”).

$($0).scope().server.refresh() –¬†Refreshes the widget selected in the elements panel of the dev tools

To time the widget’s execution wrap it in a call to the native javascript performance API like this:

var t0 = performance.now();

$($0).scope().server.refresh().then(()=>{

var t1 = performance.now();

console.log("Call to " +$scope.widget.name + " took " + (t1 - t0) + " milliseconds.");});

 

Get the form objeect 
var spForm = $('sp-variable-layout').scope().formModel; - get the form object and store it in a variable.

 

Get g_form

To get access to the g_form API in service portal run this in the browser console.

var g_form = $('sp-variable-layout').scope().getGlideForm();

 

 

Once you do that, you will be able to use g_form.setValue, g_form.set_visible, etc from the console the same way you can in the platform.

Count variables in an order guide
var spForm = $('sp-variable-layout').scope().formModel; - get the form object and store it in a variable.

let spf = $('sp-variable-layout').scope().formModel;
let varCount = 0;
for(var i = 0 ; i<spf._items.length; i++){
varCount += Object.keys(spf._items[i]._item._fields).length;
}

 

No comments

Leave a reply

Your email is never published nor shared. Required fields are marked *

Are you Human? * Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This