08.08.2018
Guide: How to include third party libraries in ServiceNow
Third-Party Libraries for ServiceNow - ServicePortal
This is a post on how to include your favorite third party library, to use in the ServicePortal.
This post will give you an example on how to include Google Charts (https://developers.google.com/chart/) in a ServicePortal widget.
Step 1
• Go to <your-instance-name.service-now.com/sp_config>.
• Create a new widget (name could be Test Google Charts).
Step 2
• Go to the ServiceNow platform.
• Go to System UI > UI Scripts and click New.
• Give it a name, the name of the library is probably a good choice.
• Find the sourcecode of the library you want to use (https://www.gstatic.com/charts/loader.js for this example).
• Paste the source code into the script field, ignoring any errors.
• Set UI type to All or Mobile / Service Portal.
• Submit.
o Side note: if it doesn’t want to save, you can add the script from the listview and submit it first without it.
Step 3
• Go to Service Portal > Widgets.
• Choose the newly created widget (Test Google Charts)
• Scroll to the bottom and find the related list of dependencies, add a new dependency.
• Give it a name and submit.
Create a new JS Include:
• Give it a display name
• Set source as UI script.
• Choose the UI script you created in step 2.
• Submit.
Step 4
The library is now ready to be used in a widget.
• Go back to the ServicePortal and edit the widget.
Add the following code to the client side script
function() {
/* widget controller */
var c = this;
// Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it. function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options. var chart = new
google.visualization.PieChart(document.getElementById
('chart_div')); chart.draw(data, options);
}
}
And add the following to the HTML field
<div id="chart_div"></div>
This will give you a nice looking interactive pie chart.
Get the update set from Christian
If you want an update set for ServiceNow with the whole thing, just shoot me an email.
cgs@syspeople.dk
