lab guide - advanced service portal

©2017ServiceNow,Inc.Allrightsreserved. 2

LabGuide

AdvancedServicePortal


GoalInthisexercise,wewillcreatealistwidgetandthenwewillmodifyittoloaddataclientside.

LogontoYourTrainingInstance1. NavigatetotheuniqueinstanceURLprovidedtoyou.

2. Logonwithprovidedcredentials.

CreateListWidget1. NavigatetoServicePortal>ServicePortalConfiguration.

2. SelectWidgetEditor

3. SelectCreateanewwidget

4. Enterthefollowinginformation:

– WidgetName:dd18_list_widget– WidgetID:dd18_list_widget– CreateTestPage:checked– PageId:dd18_list_widget

5. ClicktheSubmitbutton.

Exercise1Createlist

widget

6. YourScreenshouldlooklikethis

EnterWidgetInformation1. EnterthefollowinginformationintheServerScriptWindow:

(function () { /* populate the 'data' object */ /* e.g., data.table = $sp.getValue('table'); */ //define the variable to hold our list data.list = []; //Query the table var gr = new GlideRecord('incident'); gr.addQuery('active', true); gr.query() while (gr.next()) { //load values into object var record_obj = {}; record_obj.number = gr.number.getDisplayValue(); record_obj.short_description = gr.short_description.getDisplayValue(); record_obj.priority = gr.priority.getDisplayValue(); record_obj.category = gr.category.getDisplayValue(); //add object to the list data.list.push(record_obj); } })();

2. EnterthefollowinginformationintheHTMLtemplatebox

<div class="panel panel-default">  <div class="panel-heading"> DD18 List Widget </div> <div class="panel-body">


<ul class="list-group"> <li class="list-group-item" ng-repeat="item in c.data.list">{{item.number}} - {{item.short_description}} - {{item.priority}}</li> </ul> </div> </div>

3. ClickSave

4. Navigateto[yourinstance].service-now.com/sp_config/?id=dd18_list_widgetandcheckyourresults

Loaddataclientside1. Navigatebacktothewidgeteditor

2. ModifytheServerScripttolooklikethis

(function() { /* populate the 'data' object */ /* e.g., data.table = $sp.getValue('table'); */ if(input){ //define the variable to hold our list data.list = []; //Query the table var gr = new GlideRecord('incident'); gr.addQuery('active', true); gr.query() while (gr.next()) { //load values into object var record_obj = {}; record_obj.number = gr.number.getDisplayValue(); record_obj.short_description = gr.short_description.getDisplayValue(); record_obj.priority = gr.priority.getDisplayValue(); record_obj.category = gr.category.getDisplayValue(); //add object to the list data.list.push(record_obj); } } })();

3. EnterthefollowinginformationintheClientScript

function($scope) { /*widget controller */ var c = this; c.data.loading = true; $scope.server.update().then(function(){ c.data.loading = false; }) }

4. Modifythehtmltemplatetolooklikethis

<div class="panel panel-default">  <div class="panel-heading"> DD18 List Widget </div> <div class="panel-body">


<span ng-if="c.data.loading"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading\...</span> </span> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in c.data.list">{{item.number}} - {{item.short_description}} -{{item.priority}}</li> </ul> </div> </div>

5. ClickSave



GoalInthisexercise,wewillmodifyourlistwidgettomakeuseoftheRESTAPI.

ModifyListWidget1. Navigatetothewidgeteditorandopenthe

dd18_list_widget.

2. ModifytheServerScripttolooklikethis

(function() { /*populate the 'data' object */ /*e.g., data.table = $sp.getValue('table'); */ })();

3. ModifytheClientScripttolooklikethis:

function($scope,$http) { /*widget controller */ var c = this; c.data.loading = true; $http.get('/api/now/table/incident?sysparm_query=active%3Dtrue').success(function(response){ c.data.loading=false; c.data.list = response.result; }) }

4. ClickSave


Exercise2RESTAPI


GoalInthisexercise,wewillcreatetwong-templatestobeusedbyourwidgets.WewillaltertheHTMLTemplatetouseoneandthentheothertoseehowthataffectstherendering.

CreateTemplates1. NavigatetoServicePortal>Widgets

2. Openthedd18_list_widget.

3. ScrolltothebottomandselecttheAngularng-templatestab

4. ClickNew

5. Enterthefollowinginformation

– ID:task-priority– Template:

<span>{{item.number}} - {{item.short_description}} - {{item.priority}}</span>

6. ClickSubmit

7. ScrolltothebottomandselecttheAngularng-templatestab

8. ClickNew


– ID:task-category– Template:

<span>{{item.number}} - {{item.short_description}} - {{item.category}}</span>

10. ClickSubmit

Exercise3NG

Template

UpdateListwidget1. Openthedd18_list_widgetusingthewidgeteditor

2. ModifytheHTMLtemplatetolooklikethis

<div class="panel panel-default">  <div class="panel-heading"> DD18 List Widget </div> <div class="panel-body"> <span ng-if="c.data.loading"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only"> Loading\... </span> </span> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in c.data.list" ng-include="'task-category'"></li> </ul> </div> </div>

3. ClickSave


5. ReturntoyourHTMLTemplateandchangeittothetask-prioritytemplateandreload.


GoalInthissection,wewilldefineoptionsforourwidgetandusethemtoaltertherenderingofawidgetasitappearsonapage.

Addoutofboxoptions

1. NavigatetoServicePortal>Widgets

2. Openthedd18_list_widget.

3. ClickonthelockiconnexttheFieldsfield

4. Addthefollowingfields:

– Title– BootstrapColor

5. ClickUpdate

Modifylistwidget

1. Openthedd18_list_widgetusingthewidgeteditor.NOTE:Ifyouhadtheeditoropen,refreshitbeforecontinuing.

2. Clickonthe iconinthetoprightcorner

3. SelectEditOptionSchema

4. Clickonthe iconinthetoprightcorneronofthemodalwindow

Exercise4WidgetOptions


WidgetOptions


– Label:Table– Name:table– Type:String– DefaultValue:incident



– Label:Query– Name:query– Type:String– DefaultValue:leaveempty


– Label:Template– Name:template– Type:String– DefaultValue:leaveempty

10. ClickSave

11. ModifyClientScripttolooklikethis

function($scope,$http) { /*widget controller */ var c = this; c.data.loading = true; c.data.table = c.options.table || "incident"; c.data.query = c.options.query || ""; c.data.template = c.options.template || "task-category"; $http.get('/api/now/table/'+c.data.table+'?sysparm_query='+c.data.query).success(function(response){ c.data.loading=false; c.data.list = response.result; }) }

12. ModifyHTMLTemplatetolooklikethis

<div class="panel panel-{{c.options.color}}">  <div class="panel-heading"> {{c.options.title}} </div> <div class="panel-body"> <span ng-if="c.data.loading"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading\..</span> </span> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in c.data.list" ng-include="c.data template"></li> </ul> </div> </div>


13. ClickSave

14. Navigateto[yourinstance].service-now.com/sp_config/?id=dd18_list_widget

15. Press“Control”rightclickontopofyourwidget

16. SelectInstanceOptions



18. ClickSave

19. Checkyourresults


GoalInthisexercise,wewillcreatearecordwatchersoourwidgetisautomaticallyupdatedwithouthavingtorefreshthepage.

Setuprecordwatcher1. Openthedd18_list_widgetusingthewidgeteditor.


function($scope,$http,snRecordWatcher) { /*widget controller */ var c = this; c.data.loading = true; c.data.table = c.options.table || "incident"; c.data.query = c.options.query || ""; c.data.template = c.options.template || "task-category"; function getData(){ $http.get('/api/now/table/'+c.data.table+'?sysparm_query='+c.data.query).success(function(response){ c.data.loading=false; c.data.list = response.result; }) } getData(); snRecordWatcher.initList(c.data.table, c.data.query); $scope.$on('record.updated', function(name, data) { getData(); }); }

3. ClickSave


5. HowManyChangesaredisplayed?

6. Openanewwindowandopenanewcriticalprioritychangerequest.

Exercise5Record

Watchers


7. Gobacktoyourwidgetwindow,isthenewchangerequestnowshowing?


GoalInthisexercise,wewillmodifyourwidgettobroadcastaneventandhaveanotherwidgetreceivethatevent.

Setupevent

1. Openthedd18_list_widgetusingthewidgeteditor.


function($scope,$http,snRecordWatcher,$rootScope) { /*widget controller */ var c = this; c.data.loading = true; c.data.table = c.options.table || "incident"; c.data.query = c.options.query || ""; c.data.template = c.options.template || "task-category"; function getData(){ $http.get('/api/now/table/'+c.data.table+'?sysparm_query='+c.data.query).success(function(response){ c.data.loading=false; c.data.list = response.result; $rootScope.$broadcast("DD18ListWidgetUpdated",c.data.list); }) } getData(); snRecordWatcher.initList(c.data.table, c.data.query); $scope.$on('record.updated', function(name, data) { getData(); }); }

3. ClickSave

4. Click

Exercise6Broadcast

events

5. SelectCreateNewWidget

6. Enterthefollowinginformation:

– WidgetName:dd18_count_display_widget– WidgetID:dd18_count_display_widget

7. ClickSubmit

8. EnterthefollowingcodeintheHTMLTemplateField:

<div>  <h2 class="jumbotron"> Total Records:{{c.data.count}} </h2> </div>

9. EnterthefollowingcodeintheClientScriptfield:

function($scope) { /*widget controller */ var c = this; c.data.count = 0; $scope.$on("DD18ListWidgetUpdated",function(evt,results){ console.log(results) c.data.count = results.length; }) }

10. ClickSave

11. ClickontheDesignerOptioninwidgetheadermenu


12. Usethefiltertolookfordd18_list_widgetTestPage

13. SelectthePage

14. Usethefiltertosearchfordd18_count_display_widget

15. Draganddropdd18_count_display_widgetabovethedd18ListWidget


17. Isthecountofrecordspopulating?

18. CreateanothernewChangeRequestrecord.Doesthechangereflectinbothyourlistandthecountwidget?Ifnot,trytotroubleshoottheissue.

lab guide - advanced service portal

Documents