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.
Send Christian an e-mail
Insert your information in the fields below
