Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Making Service Portal Widgets Work Together

5 385 vues

Publié le

Service Portal is a powerful tool both for End User portals and for custom application UI's. In this session, we will explore some design patterns and architectures that make our widgets more flexible and work together more effectively.

Publié dans : Technologie
  • Soyez le premier à commenter

Making Service Portal Widgets Work Together

  1. 1. © 2018 ServiceNow All Rights Reserved Making Service Portal Widgets Work Together Travis Toulson Sr. Architect GlideFast Consulting
  2. 2. © 2016 ServiceNow All Rights Reserved 2Confidential 2 #Know18 © 2018 ServiceNow All Rights Reserved Widgets are volatile, self-obsessed, and don’t play well with others Problem
  3. 3. © 2016 ServiceNow All Rights Reserved 3Confidential 3 #Know18 © 2018 ServiceNow All Rights Reserved ng-app ng-controller container row column rectangle widget The Design Powerful widgets simplify everything else
  4. 4. © 2016 ServiceNow All Rights Reserved 4Confidential 4 #Know18 © 2018 ServiceNow All Rights Reserved BUT…
  5. 5. © 2016 ServiceNow All Rights Reserved 5Confidential 5 #Know18 © 2018 ServiceNow All Rights Reserved
  6. 6. © 2016 ServiceNow All Rights Reserved 6Confidential 6 #Know18 © 2018 ServiceNow All Rights Reserved Massive Widgets Repetitive Widgets VS
  7. 7. © 2016 ServiceNow All Rights Reserved 7Confidential 7 #Know18 © 2018 ServiceNow All Rights Reserved Embed widgets to compose complex behaviors #1
  8. 8. © 2016 ServiceNow All Rights Reserved 8Confidential 8 #Know18 © 2018 ServiceNow All Rights Reserved ç Data Table Widget - 7 Different Behaviors - Over 300 lines of client code - Over 150 lines of server code
  9. 9. © 2016 ServiceNow All Rights Reserved 9Confidential 9 #Know18 © 2018 ServiceNow All Rights Reserved <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. 10. © 2016 ServiceNow All Rights Reserved 10Confidential 10 #Know18 © 2018 ServiceNow All Rights Reserved <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
  11. 11. © 2016 ServiceNow All Rights Reserved 11Confidential 11 #Know18 © 2018 ServiceNow All Rights Reserved <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
  12. 12. © 2016 ServiceNow All Rights Reserved 12Confidential 12 #Know18 © 2018 ServiceNow All Rights Reserved <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
  13. 13. © 2016 ServiceNow All Rights Reserved 13Confidential 13 #Know18 © 2018 ServiceNow All Rights Reserved <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
  14. 14. © 2016 ServiceNow All Rights Reserved 14Confidential 14 #Know18 © 2018 ServiceNow All Rights Reserved <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
  15. 15. © 2016 ServiceNow All Rights Reserved 15Confidential 15 #Know18 © 2018 ServiceNow All Rights Reserved A “child scope” (prototypically) inherits properties from its “parent scope” “ - AngularJS Developer Guide
  16. 16. © 2016 ServiceNow All Rights Reserved 16Confidential 16 #Know18 © 2018 ServiceNow All Rights Reserved <a style="display: inline;" href>{{page.title}}</a> Data Table Widget HTML Template
  17. 17. © 2016 ServiceNow All Rights Reserved 17Confidential 17 #Know18 © 2018 ServiceNow All Rights Reserved ng-app ng-controller container row column rectangle widget {{page.title}} Data Table Widget doesn’t have a page object?!?!
  18. 18. © 2016 ServiceNow All Rights Reserved 18Confidential 18 #Know18 © 2018 ServiceNow All Rights Reserved Child Widgets inherit functions and data from their Parent Widgets
  19. 19. © 2016 ServiceNow All Rights Reserved 19Confidential 19 #Know18 © 2018 ServiceNow All Rights Reserved Structure application models with Angular Services #2
  20. 20. © 2016 ServiceNow All Rights Reserved 20Confidential 20 #Know18 © 2018 ServiceNow All Rights Reserved You can use services to organize and share code across your app “ - AngularJS Developer Guide
  21. 21. © 2016 ServiceNow All Rights Reserved 21Confidential 21 #Know18 © 2018 ServiceNow All Rights Reserved 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. 22. © 2016 ServiceNow All Rights Reserved 22Confidential 22 #Know18 © 2018 ServiceNow All Rights Reserved 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. 23. © 2016 ServiceNow All Rights Reserved 23Confidential 23 #Know18 © 2018 ServiceNow All Rights Reserved 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
  24. 24. © 2016 ServiceNow All Rights Reserved 24Confidential 24 #Know18 © 2018 ServiceNow All Rights Reserved 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
  25. 25. © 2016 ServiceNow All Rights Reserved 25Confidential 25 #Know18 © 2018 ServiceNow All Rights Reserved 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
  26. 26. © 2016 ServiceNow All Rights Reserved 26Confidential 26 #Know18 © 2018 ServiceNow All Rights Reserved 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
  27. 27. © 2016 ServiceNow All Rights Reserved 27Confidential 27 #Know18 © 2018 ServiceNow All Rights Reserved 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
  28. 28. © 2016 ServiceNow All Rights Reserved 28Confidential 28 #Know18 © 2018 ServiceNow All Rights Reserved function (incidentService) { var c = this; incidentService.reload(); c.reload = function() { incidentService.reload(); } c.getIncidents = function() { return incidentService.get(); } } Client Script
  29. 29. © 2016 ServiceNow All Rights Reserved 29Confidential 29 #Know18 © 2018 ServiceNow All Rights Reserved function (incidentService) { var c = this; incidentService.reload(); c.reload = function() { incidentService.reload(); } c.getIncidents = function() { return incidentService.get(); } } Client Script
  30. 30. © 2016 ServiceNow All Rights Reserved 30Confidential 30 #Know18 © 2018 ServiceNow All Rights Reserved function (incidentService) { var c = this; incidentService.reload(); c.reload = function() { incidentService.reload(); } c.getIncidents = function() { return incidentService.get(); } } Client Script
  31. 31. © 2016 ServiceNow All Rights Reserved 31Confidential 31 #Know18 © 2018 ServiceNow All Rights Reserved function (incidentService) { var c = this; incidentService.reload(); c.reload = function() { incidentService.reload(); } c.getIncidents = function() { return incidentService.get(); } } Client Script
  32. 32. © 2016 ServiceNow All Rights Reserved 32Confidential 32 #Know18 © 2018 ServiceNow All Rights Reserved function (incidentService) { var c = this; incidentService.reload(); c.reload = function() { incidentService.reload(); } c.getIncidents = function() { return incidentService.get(); } } Client Script
  33. 33. © 2016 ServiceNow All Rights Reserved 33Confidential 33 #Know18 © 2018 ServiceNow All Rights Reserved <div ng-repeat=“inc in c.getIncidents()”> <!-- Incident Template Here --> </div> Digest Loop HTML Template
  34. 34. © 2016 ServiceNow All Rights Reserved 34Confidential 34 #Know18 © 2018 ServiceNow All Rights Reserved Use Angular Events as a last resort #3
  35. 35. © 2016 ServiceNow All Rights Reserved 35Confidential 35 #Know18 © 2018 ServiceNow All Rights Reserved 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. 36. © 2016 ServiceNow All Rights Reserved 36Confidential 36 #Know18 © 2018 ServiceNow All Rights Reserved ng-app ng-controller container row column rectangle widget Event Propagation $rootScope $scope $broadcast $emit $on
  37. 37. © 2016 ServiceNow All Rights Reserved 37Confidential 37 #Know18 © 2018 ServiceNow All Rights Reserved But given that it’s a stupid a** decision, I’ve elected to ignore it
  38. 38. © 2016 ServiceNow All Rights Reserved 38Confidential 38 #Know18 © 2018 ServiceNow All Rights Reserved 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. 39. © 2016 ServiceNow All Rights Reserved 39Confidential 39 #Know18 © 2018 ServiceNow All Rights Reserved 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
  40. 40. © 2016 ServiceNow All Rights Reserved 40Confidential 40 #Know18 © 2018 ServiceNow All Rights Reserved 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
  41. 41. © 2016 ServiceNow All Rights Reserved 41Confidential 41 #Know18 © 2018 ServiceNow All Rights Reserved 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
  42. 42. © 2016 ServiceNow All Rights Reserved 42Confidential 42 #Know18 © 2018 ServiceNow All Rights Reserved 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
  43. 43. © 2016 ServiceNow All Rights Reserved 43Confidential 43 #Know18 © 2018 ServiceNow All Rights Reserved 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
  44. 44. © 2016 ServiceNow All Rights Reserved 44Confidential 44 #Know18 © 2018 ServiceNow All Rights Reserved 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
  45. 45. © 2016 ServiceNow All Rights Reserved 45Confidential 45 #Know18 © 2018 ServiceNow All Rights Reserved 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
  46. 46. © 2016 ServiceNow All Rights Reserved 46Confidential 46 #Know18 © 2018 ServiceNow All Rights Reserved Embed widgets to compose complex behaviors #1 Structure application models with Angular Services #2 Use Angular Events as a last resort #3
  47. 47. © 2016 ServiceNow All Rights Reserved 47Confidential 47 #Know18 © 2018 ServiceNow All Rights Reserved
  48. 48. © 2016 ServiceNow All Rights Reserved 48Confidential 48 #Know18 © 2018 ServiceNow All Rights Reserved Travis Toulson Sr. Architect GlideFast Consulting travis.toulson@glidefast.com Thank You

×