Home London Platform Capabilities Now Platform capabilities Service Portal Service Portal widgets Widget developer guide Widget troubleshooting guide

Widget troubleshooting guide

Use the following tools to investigate and resolve unexpected behavior in your custom Service Portal widgets.

Reduce complexity

Deactivate widgets unrelated to the widget you are troubleshooting to isolate parts of the page that may be causing errors or unexpected behavior. Set the active field to false on a widget record to hide the widget on the page, and prevent associated scripts from executing.

Use the browser developer console

All supported desktop browsers have built in developer tools. Access your browsers developer tools to view console messages and errors thrown by client-side javascript. Many of the logging tools detailed below output information to this console.

Use the widget context menu to access information and options

CTRL+right-click a widget to access configuration options for the widget. There are also options to output the scope and scope data object to the browser console. For more detail on this menu , see Widget context menu.

Use script methods to capture debugging output

Several methods are available to output debugging information within your server and client-side code.

Table 1. Scripted debugging methods
Method	Availability	Description
console.log()	Server and client	Logs output to the browser developer console.
$sp.log()	Server	Logs output to the Service Portal Log Entries [sp_log] table, when the logged in user has the `sp_admin` or `admin` role.
gs.log()	Server	Logs output to the Log [syslog] table. Note: gs.log creates records on the syslog table. Excessive use can adversely affect performance.
gs.warn()	Server	Produces warning level output in the Log [syslog] table.
gs.error()	Server	Produces error level output in the Log [syslog] table.
gs.addInfoMessage()	Server	Displays a green information message at the top of the browser window.
gs.addErrorMessage()	Server	Displays a red error message at the top of the browser window.
spUtil.addErrorMessage()	Client	Displays an error message within the browser window.
spUtil.addInfoMessage()	Client	Displays an Info message within the browser window.
spUtil.addTrivialMessage()	Client	Displays a message which automatically disappears after a short time.
debugger	Client	Sets a break point in Chrome and Firefox browsers, allowing you to step through a script line by line in the browsers developer console.
{{data\|json}}	HTML	This code can be added to the HTML code of a page to output the data object to the portal page in JSON format.

Check for security restrictions

Often, widget display issues are caused by access rules rather than the widget script. Verify that any records that are not accessible within a widget are accessible using the platform UI. Use the ACL debugger to ensure that your users have the expected access to records used by your widgets. For more detail on the debugger, see ACL debugging tools.

Create a reference to the widgets scope in the console

Use reference to a widget to manipulate scope data or manually run the widgets client and server scripts. Use the following steps to create the reference.

1. Right-click the widget and choose Inspect.
2. In dev tools Elements tab, click to highlight the element with attribute widget=widget. You can find it a few elements above the currently inspected element. This element points the $0 scripting tool at the widget.
In the Javascript console, run the following code:
```
var scopeRef = angular.element($0).scope();
```

Use the reference to your widget to change data within the console. See the following example. Remember to run AngularJS $apply() on the scope to apply changes to the page.

scopeRef.data.prop1 = "Pear";
scopeRef.$apply();

Run any function defined in the widgets client controller from your reference using the syntax below.

scopeRef.exampleFunction();

Use the refresh command to manually execute the widgets server script.

scopeRef.server.refresh();

Previous topic

Next topic

Send feedback

Release version

Widget troubleshooting guide

Use the following tools to investigate and resolve unexpected behavior in your custom Service Portal widgets.

Reduce complexity

Use the browser developer console

Use the widget context menu to access information and options

Use script methods to capture debugging output

Several methods are available to output debugging information within your server and client-side code.

Table 1. Scripted debugging methods
Method	Availability	Description
console.log()	Server and client	Logs output to the browser developer console.
$sp.log()	Server	Logs output to the Service Portal Log Entries [sp_log] table, when the logged in user has the `sp_admin` or `admin` role.
gs.log()	Server	Logs output to the Log [syslog] table. Note: gs.log creates records on the syslog table. Excessive use can adversely affect performance.
gs.warn()	Server	Produces warning level output in the Log [syslog] table.
gs.error()	Server	Produces error level output in the Log [syslog] table.
gs.addInfoMessage()	Server	Displays a green information message at the top of the browser window.
gs.addErrorMessage()	Server	Displays a red error message at the top of the browser window.
spUtil.addErrorMessage()	Client	Displays an error message within the browser window.
spUtil.addInfoMessage()	Client	Displays an Info message within the browser window.
spUtil.addTrivialMessage()	Client	Displays a message which automatically disappears after a short time.
debugger	Client	Sets a break point in Chrome and Firefox browsers, allowing you to step through a script line by line in the browsers developer console.
{{data\|json}}	HTML	This code can be added to the HTML code of a page to output the data object to the portal page in JSON format.

Check for security restrictions

Create a reference to the widgets scope in the console

Use reference to a widget to manipulate scope data or manually run the widgets client and server scripts. Use the following steps to create the reference.

1. Right-click the widget and choose Inspect.
2. In dev tools Elements tab, click to highlight the element with attribute widget=widget. You can find it a few elements above the currently inspected element. This element points the $0 scripting tool at the widget.
In the Javascript console, run the following code:
```
var scopeRef = angular.element($0).scope();
```

Use the reference to your widget to change data within the console. See the following example. Remember to run AngularJS $apply() on the scope to apply changes to the page.

scopeRef.data.prop1 = "Pear";
scopeRef.$apply();

Run any function defined in the widgets client controller from your reference using the syntax below.

scopeRef.exampleFunction();

Use the refresh command to manually execute the widgets server script.

scopeRef.server.refresh();

How search works:

Topics are ranked in search results by how closely they match your search terms

Widget troubleshooting guide

Widget troubleshooting guide

On this page

Widget troubleshooting guide

Widget troubleshooting guide

Log in to personalize your search results and subscribe to topics