Lab  Guide  

AngularJS:  

Developing  Custom  User  Interfaces  

Tyler  Jones  &  Ben  Kennedy  

Default  Login  /  Password:  

admin  /  Knowledge16  

itil  /  Knowledge16  

employee  /  Knowledge16  
   

 
  

 
 
 
 

This  
Page  
Intentionally  
Left  
Blank  

 
  

Lab  Goal  
Welcome  to  the  AngularJS  lab!  Our  goal  here  is  to  explore  the  unique  
Lab  1.0  
interfaces  that  you  can  build  when  using  AngularJS  within  ServiceNow.   Logistics  
AngularJS  is  a  framework  that  when  used  properly  can  greatly  decrease  
the  time  required  to  get  a  fully-­‐functional  app  working.  When  we  integrate  
with  ServiceNow  through  REST  APIs,  we  can  build  powerful  applications  
within  ServiceNow.  

Log  in  to  the  Training  Instance  

1. Navigate  to  the  unique  instance  URL  provided.  

2. Log  in  with  the  provided  administrator  credentials.  

Log  in  to  the  Training  Instance  

1. Navigate  to  Lab  Management  >  Download  Code  Snippets  to  download  the  code  snippets  
used  in  this  lab.  

Check  the  Skeleton  App  

1. Navigate  to  System  Applications  >  Studio.  

2. Click  Open  Studio.  

3. The  Studio  opens.  Click  the  K16  Incident  Manager  app  to  edit  it.  
 

 
   

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

1  

       

 
  

4. On  the  left  side,  open  the  UI  page  titled  incident_manager.  

 

 
5. Click  on  the  link  next  to  the  Endpoint  to  try  the  UI  page.  

Progress  Report  
1. Navigate  to  Lab  Management  >  Report  Lab  Progress.  
 

 
2. Click  I  am  done!  
 

 
 

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

2  

       

 
  

Lab  Goal  
This  lab  explains  how  to  add  a  controller  to  an  application.  A  controller  is  
Lab  2.0  
the  part  of  the  Angular  app  that  controls  the  logic  between  what  the  user   Add  a  
sees  (the  view)  and  the  underlying  data.  
• Add  a  controller  to  our  app  
Controller  
• Add  different  Angular  resources  to  our  page  
 

Add  a  Controller  to  an  App  

1. In  the  Studio,  open  the  UI  Script  titled  k16.incident_manager.ctlr  (the  full  name  in  the  
navigator  is  sn_k16_im.k16.incident_manager.ctlr).  

2. Select  type  of  UI  Script.  

3. Add  the  following  to  the  Script:  

angular.module('k16.incident_manager.app').controller('IncidentManagerCtrl',
['$scope', function($scope){

"use strict";

$scope.text = “Hello world”;

}]);
 
4. Go  to  the  UI  page  titled  incident_manager.  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

3  

       

 
  

5. Add  the  controller  into  the  app  by  adding  the  code  below:  

<g:requires name="sn_k16_im.angularjs-1.4.9.min.jsdbx"/>
<g:requires name="sn_k16_im.k16.incident_manager.app.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.incident_manager.ctlr.jsdbx"
params="cache=$[jvar_stamp]" />

<div ng-app="k16.incident_manager.app">
<div ng-controller="IncidentManagerCtrl">

<nav class="navbar navbar-default">

<div class="col-md-12">
<h4>K16 Incident Manager</h4>
</div>

</nav>

<div class="row">
<div class="col-md-12">
{{ text }}
</div>
</div>

</div>
</div>

6. Navigate  to  and  load  the  UI  page.  

7. You  should  see  Hello  world  on  the  screen.  

Progress  Report  
1. Navigate  to  Lab  Management  >  Report  Lab  Progress.  

2. Click  I  am  done!    

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

4  

       

 
  

Lab  Goal  
This  lab  explains  how  to  create  a  backend  to  retrieve  data  to  use  in  the  
Lab  3.0  
application.  This  backend  allows  you  to  use  data  that  ServiceNow  has.   Create  a  REST  
 
• Understand  REST  services  and  how  they  fit  well  with  Angular   Service  
applications  
• Create  the  back  end  for  the  app  
 

Create  a  Back  End  for  an  App  

1. In  the  Studio,  open  the  REST  Web  Service  skeleton  at:  Integrations  >  Scripted  REST  APIs  >  
Incident  Manager.  

2. At  the  bottom  of  the  page,  click  on  the  resource  get_incidents.  

3. Insert  the  following  information  into  the  script  field:  

(function process(request) {

/**
* Declare the variables for our API. If the request query parameter
* sysparm_search_value is empty or null, set it to an empty string.
*/
var searchParameter = request.queryParams.sysparm_search_value || '';
var records = [];
var dashboard = {};

/**
* Initialize a new GlideRecord on the Incident table. Order by priority,
* and ensure that we are retrieving records that does not currently have an
* assignee. If the search parameter is not empty, add a query to look for
* records that contain the search term in the short_description.
*/
var gr = new GlideRecord('incident');
gr.orderBy('priority');
gr.addNullQuery('assigned_to');
if (searchParameter != '')
gr.addQuery('short_description', 'CONTAINS', searchParameter);
gr.query();

/**
* Push a record object to our array. If the dashboard object does not have
* a priority key, add the key, create an object that contains the count and
* value. If the dashboard object does have a key, increment the count.
hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    
5  

       

 
  

*/
while (gr.next()) {
records.push({
sys_id: gr.getUniqueValue(),
number: gr.getValue('number'),
short_description: gr.getValue('short_description')
});

if (!dashboard[gr.getDisplayValue('priority')])
dashboard[gr.getDisplayValue('priority')] = {count:1, value:
gr.getValue('priority')};
else
dashboard[gr.getDisplayValue('priority')].count += 1;
}

/**
* Return our response.
*/
return {
records: records,
dashboard: dashboard,
total: gr.getRowCount()
};

})(request);

Test  the  Back  End  

1. In  the  REST  service,  click  the  link  Explore  REST  API.  

2. Click  Explore.  

3. Find  the  REST  endpoint  on  the  left.  

 

 
hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    
6  

       

 
  

4. In  the  main  area,  click  Send.Lab    

5. Inspect  the  output.  It  should  contain  record  data  and  counts  of  how  many  incidents  exist  for  
each  priority.  

Progress  Report  
1. Navigate  to  Lab  Management  >  Report  Lab  Progress.  

2. Click  I  am  done!    

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

7  

       

 
  

Lab  Goal  
This  lab  uses  the  REST  Service  created  in  Lab  3  and  displays  the  data  in  the  
Lab  4.0  
application.   Pull  Data  
•
•
Consume  our  REST  service  into  our  Angular  App  
Understand  how  ServiceNow  REST  APIs  interact  with  Angular  
from  the  
  REST  Service  
Create  a  Service  for  an  App   into  the  App  
1. Open  the  UI  script  k16.incident_manager.model.  

2. Modify  the  UI  script  as  follows:  

angular.module('k16.incident_manager.app').service('IncidentManagerModel',
function($http){

"use strict";

this.initialize = function() {
this.endpoint = '/api/sn_k16_im/incident_manager';
this.searchValue = '';
this.data = {records: [], dashboard: {}, total: 0};
this.getListData();
return this;
};

this.getListData = function() {
var _this = this;
$http.get(_this.endpoint + '?sysparm_search_value=' +
_this.searchValue).then(function(response) {
if (!response.data.result)
return;
_this.data.records = response.data.result.records;
_this.data.dashboard = response.data.result.dashboard;
_this.data.total = response.data.result.total;
});
};
});

Add  the  Service  into  the  Angular  App  

1. Go  into  the  UI  script  k16.incident_manager.ctlr.  

2. Modify  the  script  as  follows:  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    
8  

       

 
  

angular.module('k16.incident_manager.app').controller('IncidentManagerCtrl',
['$scope', 'IncidentManagerModel', 'TemplateService', function($scope,
IncidentManagerModel, TemplateService) {

"use strict";

$scope.model = IncidentManagerModel.initialize();

$scope.getTemplate = function(name) {
return TemplateService.getTemplate(name);
};

}]);

Add  Markup  to  the  Page  to  Use  the  App  

1. Go  into  the  UI  page  incident_manager.  

2. Modify  the  HTML  for  the  page  as  follows:  

<g:requires name="sn_k16_im.angularjs-1.4.9.min.jsdbx"/>
<g:requires name="sn_k16_im.k16.incident_manager.app.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.incident_manager.ctlr.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.incident_manager.model.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.template_service.jsdbx"
params="cache=$[jvar_stamp]" />

<div ng-app="k16.incident_manager.app">
<div ng-controller="IncidentManagerCtrl">
<nav class="navbar navbar-default">
<div class="col-md-12">
<h4>K16 Incident Manager</h4>
</div>
</nav>

<!-- The Incident list, displaying specific Incident

information and dashboard, display Incident counts -->
<div class="row">
<div class="col-md-12">
<div ng-
include="getTemplate('sn_k16_im_incident_list')" class="col-md-8"/>
<div ng-
include="getTemplate('sn_k16_im_incident_dashboard')" class="col-md-4"/>
</div>
</div>
</div>
</div>

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

9  

       

 
  

3. Go  to  the  UI  Macro  incident_list.  

4. Modify  the  XML  as  follows:  

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null"
xmlns:g2="null">

<ul class="list-group">
<li class="list-group-item" ng-repeat="record in model.data.records">
<div class="row">

<div class="col-md-10">
<h4 class="list-group-item-heading">{{record.number}}</h4>
<p class="list-group-item-
text">{{record.short_description}}</p>
</div>
</div>
</li>
</ul>

</j:jelly>

5. Go  to  the  UI  Macro  incident_dashboard.  

6. Modify  the  XML  as  follows:  

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null"
xmlns:g2="null">

<div class="panel panel-default">

<div class="panel-heading">K16 Incident Manager Dashboard</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">
Unassigned Incidents <span class="badge pull-
right">{{model.data.total}}</span>
</div>
<div ng-repeat="(priority, obj) in model.data.dashboard"
class="list-group-item">
{{priority}} <span class="badge pull-
right">{{obj.count}}</span>
</div>
</div>
</div>
</div>
</j:jelly>

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

10  

       

 
  

View  the  App  

1. View  the  incident_manager  UI  page  (either  by  clicking  on  the  endpoint  or  by  going  directly  to  
(sn_k16_im_incident_manager.do).  

2. Where  do  different  pieces  of  data  come  from  in  the  REST  response?  

   

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

11  

       

 
  

Lab  Goal  
This  lab  explains  how  to  add  a  search  feature  to  the  app.  
Lab  5.0  
• Understand  the  digest  cycle  of  Angular   Add  Search  
• Wire  up  events  to  inputs  on  our  page   Feature  
 

Add  a  Search  Input  

1. Open  the  UI  Macro  navigation_bar.  

2. Modify  the  XML  as  follows:  

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null"
xmlns:g2="null">

<div class="col-md-8">
<h4>K16 Incident Manager</h4>
</div>

<div class="col-md-4">
<input ng-model="model.searchValue"
ng-model-options="{debounce: { 'default': 500, 'blur': 0
}}"
placeholder="Search ..."
class="form-control col-md-8" />
</div>

</j:jelly>

3. Open  the  UI  page  incident_manager.  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

12  

       

 
  

4. Add  the  following  to  the  script  (bolded).  The  <nav>  tag  will  replace  the  existing  <nav>  tag  in  
the  macro:  

<div ng-app="k16.incident_manager.app">
<div ng-controller="IncidentManagerCtrl">

<!-- The container and include for the navigation bar, which
contains the header and search input -->
<nav ng-include="getTemplate('sn_k16_im_navigation_bar')"
class="navbar navbar-default"/>

<!-- The list breadcrumb, containing text the current search term or
'All Incidents' if no search term exists -->
<div ng-include="getTemplate('sn_k16_im_breadcrumbs')" class="row"/>

<!-- The Incident list, displaying specific Incident information and

dashboard, display Incident counts -->
<div class="row">
<div class="col-md-12">
<div ng-include="getTemplate('sn_k16_im_incident_list')"
class="col-md-8"/>
<div ng-
include="getTemplate('sn_k16_im_incident_dashboard')" class="col-md-4"/>
</div>
</div>

</div>
</div>

5. Open  the  UI  macro  breadcrumbs.  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

13  

       

 
  

6. Modify  the  XML  as  follows:  

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null"
xmlns:g2="null">

<div class="col-md-12">
<div class="col-md-8">
<h5 class="pull-left">
<a ng-click="model.removeSearch()">All Incidents</a>
${SP}
</h5>
<h5 class="pull-left" ng-show="model.searchValue != ''">
<a ng-if="model.searchValue != ''" ng-
click="model.removeSearch()">&gt;</a>
${SP}
Incidents with short description that contain
{{model.searchValue}}
</h5>
</div>
</div>

</j:jelly>

7. View  the  incident_manager  UI  page  (either  by  clicking  on  the  endpoint  or  by  going  directly  to  
(sn_k16_im_incident_manager.do).  

 
   

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

14  

       

 
  

Add  Search  Features  into  the  AngularJS  Code  

1. Open  the  UI  script  k16.incident_manager.ctlr.  

2. Add  the  following  to  the  script:  

$scope.$watch('model.searchValue', function(newValue, oldValue) {

if (newValue !== oldValue)
$scope.model.getListData();
});

3. Open  the  UI  script  k16.incident_manager.model.  

4. Add  the  following  to  the  script:  

this.removeSearch = function() {
this.searchValue = '';
this.getListData();
};

5. View  the  incident_manager  UI  page  (either  by  clicking  on  the  endpoint  or  by  going  directly  to  
(sn_k16_im_incident_manager.do).  

6. Try  to  add  a  search  by  using  the  upper  right  search  box.  When  are  requests  made  to  the  
server?  When  does  the  data  update?  

7. Try  removing  search  values.  What  happens  when  you  remove  them?  

   

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

15  

       

 
  

Lab  Goal  
This  lab  explains  how  to  add  the  ability  to  open  a  form  to  the  app.  
Lab  5.1  
• Use  platform  GlideModalForm  API   Add  Form  
• Understand  how  Angular  can  interact  with  ServiceNow  APIs   Integration  
 
 
 
 

Add  JS  Code  to  Open  the  Dialog  

1. Open  the  UI  script  k16.incident_manager.ctlr.  

2. Add  the  following  to  the  script:  

$scope.openIncident = function(sysId) {
var modal = new GlideModalForm('Incident Manager', 'incident');
modal.addParm('sysparm_view', 'Incident Manager');
modal.setSysID(sysId);
modal.render();
};
   

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

16  

       

 
  

Add  a  Button  to  Open  the  Form  

1. Open  the  UI  macro  incident_list.  

2. Add  the  following  to  the  script  (bolded):  

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null"
xmlns:g2="null">

<ul class="list-group">
<li class="list-group-item" ng-repeat="record in model.data.records">
<div class="row">

<div class="col-md-10">
<h4 class="list-group-item-
heading">{{record.number}}</h4>
<p class="list-group-item-
text">{{record.short_description}}</p>
</div>

<div class="col-md-2">
<button class="pull-right" ng-
click="openIncident(record.sys_id)">Assign</button>
</div>

</div>
</li>
</ul>

</j:jelly>

3. View  the  incident_manager  UI  page  (either  by  clicking  on  the  endpoint  or  by  going  directly  to  
(sn_k16_im_incident_manager.do).  

4. In  the  resulting  list  of  incidents,  click  the  Assign  button.  An  editable  form  should  appear.  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

17  

       

 
  

Lab  Goal  
This  lab  explains  how  to  add  a  component  using  a  third-­‐party  library  
Lab  6.0  
Add  A  Third  
Add  JS  Code  to  Open  the  Dialog  
Party  Library  
1. Open  the  UI  page  incident_manager.  

2. Add  the  following  two  script  dependencies  (bolded):  

<g:requires name="sn_k16_im.angularjs-
1.4.9.min.jsdbx"/>
<g:requires name="sn_k16_im.k16.incident_manager.app.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.incident_manager.model.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.incident_manager.ctlr.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.chart.jsdbx" params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.doughnut_chart.jsdbx"
params="cache=$[jvar_stamp]" />
<g:requires name="sn_k16_im.k16.template_service.jsdbx"
params="cache=$[jvar_stamp]" />

3. Open  the  UI  macro  incident_dashboard.  

4. Add  a  chart  by  modifying  the  UI  macro  as  follows  (bolded).  Note  that  the  new  content  should  
go  inside  of  the  panel-­‐body:  

<div class="panel-body">
<div class="list-group">
<div class="list-group-item">
Unassigned Incidents <span class="badge pull-
right">{{model.data.total}}</span>
</div>
<div ng-repeat="(priority, obj) in model.data.dashboard"
class="list-group-item">
{{priority}} <span class="badge pull-
right">{{obj.count}}</span>
</div>
</div>
<div class="list-group">
<div class="col-md-12">
<sn-doughnut-chart total="model.data.total"
data="model.data.dashboard"/>
</div>
</div>
</div>
hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    
18  

       

 
  

1. View  the  incident_manager  UI  page  (either  by  clicking  on  the  endpoint  or  by  going  directly  to  
(sn_k16_im_incident_manager.do).  

2. A  chart  should  appear  on  the  page.  If  the  search  is  altered,  the  graph  and  items  should  also  
change.  

hts  reserved.  ©  ®2016  ServiceNow,  Inc.  All  rights  reserved.    

19