Making Service Portal Widgets Work Together

© 2018 ServiceNow All Rights Reserved
Making Service Portal Widgets
Work Together
Travis Toulson
Sr. Architect
GlideFast Consulting

© 2016 ServiceNow All Rights Reserved 2Confidential
2
#Know18
Widgets are volatile,
self-obsessed, and
don’t play well with
others
Problem

3
#Know18
ng-app
ng-controller
container
row
column
rectangle
widget
The Design
Powerful widgets simplify
everything else

4
#Know18
BUT…

5
#Know18

6
#Know18
Massive
Widgets
Repetitive
Widgets
VS

7
#Know18
Embed widgets to
compose complex
behaviors
#1

8
#Know18
ç
Data Table Widget
- 7 Different Behaviors
- Over 300 lines of client
code
- Over 150 lines of server
code

9
#Know18
<div>
<sp-widget widget="data.filterBreadcrumbs">
</sp-widget>
</div>
var breadcrumbWidgetParams = {
table: data.table,
query: data.filter,
enable_filter: data.enable_filter
};
data.filterBreadcrumbs = $sp.getWidget(
'widget-filter-breadcrumbs',
breadcrumbWidgetParams);
HTML
Server Script

10
#Know18
<div>
</sp-widget>
</div>
table: data.table,
query: data.filter,
};
HTML
Server Script

11
#Know18
<div>
</sp-widget>
</div>
table: data.table,
query: data.filter,
};
HTML
Server Script

12
#Know18
<div>
</sp-widget>
</div>
table: data.table,
query: data.filter,
};
HTML
Server Script

13
#Know18
<div>
</sp-widget>
</div>
table: data.table,
query: data.filter,
};
HTML
Server Script

14
#Know18
<div>
</sp-widget>
</div>
table: data.table,
query: data.filter,
};
HTML
Server Script

15
#Know18
A “child scope” (prototypically)
inherits properties from its
“parent scope”
“
- AngularJS Developer Guide

16
#Know18
<a style="display: inline;" href>{{page.title}}</a>
Data Table Widget
HTML Template

17
#Know18
ng-app
ng-controller
container
row
column
rectangle
widget
{{page.title}}
Data Table Widget
doesn’t have a page
object?!?!

18
#Know18
Child Widgets inherit
functions and data
from their Parent
Widgets

19
#Know18
Structure application
models with Angular
Services
#2

20
#Know18
You can use services to organize
and share code across your app
“
- AngularJS Developer Guide

21
#Know18
1. Create the Angular Provider
2. Add it to the Widget’s Angular
Provider Related List
3. Inject the dependency into the
Client Script
Wire up a Service

22
#Know18
function($http) {
var incidents = [];
function reload() {
$http.get(‘/api/now/table/incident’)
.then(function(res) { incidents = res.result; });
}
function get() {
return incidents;
}
return {
‘reload’: reload,
‘get’: get
};
}
Service
Type: Service
Name: incidentService

23
#Know18
function($http) {
var incidents = [];
function reload() {
}
function get() {
return incidents;
}
return {
‘get’: get
};
}
Service
Type: Service

24
#Know18
function($http) {
var incidents = [];
function reload() {
}
function get() {
return incidents;
}
return {
‘get’: get
};
}
Service
Type: Service

25
#Know18
function($http) {
var incidents = [];
function reload() {
}
function get() {
return incidents;
}
return {
‘get’: get
};
}
Service
Type: Service

26
#Know18
function($http) {
var incidents = [];
function reload() {
}
function get() {
return incidents;
}
return {
‘get’: get
};
}
Service
Type: Service

27
#Know18
function($http) {
var incidents = [];
function reload() {
}
function get() {
return incidents;
}
return {
‘get’: get
};
}
Service
Type: Service

28
#Know18
function (incidentService) {
var c = this;
incidentService.reload();
c.reload = function() {
}
c.getIncidents = function() {
return incidentService.get();
}
}
Client Script

29
#Know18
var c = this;
}
}
}
Client Script

30
#Know18
var c = this;
}
}
}
Client Script

31
#Know18
var c = this;
}
}
}
Client Script

32
#Know18
var c = this;
}
}
}
Client Script

33
#Know18
<div ng-repeat=“inc in c.getIncidents()”>

</div>
Digest Loop
HTML Template

34
#Know18
Use Angular Events as
a last resort
#3

35
#Know18
Insanity Warning: scope depth-
first traversal. Yes, this code is a
bit crazy, but it works and we
have tests to prove it
“
- Line 1417, rootScope.js AngularJS Source Code

36
#Know18
ng-app
ng-controller
container
row
column
rectangle
widget
Event Propagation
$rootScope
$scope
$broadcast
$emit
$on

37
#Know18
But given that it’s a
stupid a** decision,
I’ve elected to ignore
it

38
#Know18
function ($scope) {
$scope.$on(‘incident.changed’,
function(event, data) {
// Do something!
});
}
function ($rootScope) {
$rootScope.$broadcast(‘incident.changed’, {});
}
Widget 2
Client Script
Widget 1
Client Script

39
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

40
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

41
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

42
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

43
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

44
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

45
#Know18
function ($scope) {
// Do something!
});
}
}
Widget 2
Client Script
Widget 1
Client Script

46
#Know18
Embed
widgets to
compose
complex
behaviors
#1
Structure
application
models with
Angular
Services
#2
Use Angular
Events as a
last resort
#3

47
#Know18

48
#Know18
Travis Toulson
Sr. Architect
GlideFast Consulting
travis.toulson@glidefast.com
Thank You

Making Service Portal Widgets Work Together

Recommended

Recommended

More Related Content

Similar to Making Service Portal Widgets Work Together

Similar to Making Service Portal Widgets Work Together (20)

Recently uploaded

Recently uploaded (20)

Making Service Portal Widgets Work Together