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

More Related Content

Similar to Making Service Portal Widgets Work Together (20)

Recently uploaded (20)

Making Service Portal Widgets Work Together