Patrick Wilson & Will Lisac - mobile.servicenow.commobile.servicenow.com/Service Portal and...

©2017ServiceNow,Inc.Allrightsreserved. 1

LabGuide

ServicePortalandMobile

PatrickWilson&WillLisac

DefaultLogin/Password:

admin/Knowledge17

itil/Knowledge17

employee/Knowledge17


LabGoalDuringthiscourse,wewillbecreatingaServicePortalexperiencethatlooksgreatintheServiceNowmobileapp–anexperiencethatintegratesdeeplywithnativecomponentsandleveragesnativeAPIs.

Inthiscourse,wewillcreateaServicePortalpage,addawidgetthatscansbarcodesandcreatesincidentsfromthem,andaddthatpagetoourMobileApphomepage.Additionally,wewillcreateaspecial‘EscalateIncident’UIActionontheIncidentListthatwillconditionallyopenaServicePortalpagetoprovidemorefunctionality.

Let’sgetstarted!

Createanewwidget1.Inthenavigatortotheleft,searchforServicePortalConfiguration.ClickittoopentheServicePortalConfigurationpage.

2.Fromhere,selecttheWidgetEditor.Fromhere,wewillcreateanewwidget,aswellasapageforthatwidgettolivein.

3.SelectCreateanewwidgetontheeditor.Inthedialogthatwillappear,youwillprovidethreethings:anameforyournewwidget,anIDforthewidget,andonceyouselectCreatetestpage,youwillalsoprovideapageIDthatyourwidgetwillliveon.CreatingtestpagesisaneasywaytoquicklybootstrapapageinServicePortal. Name:K17BarcodeScanner ID:k17_barcode_scanner PageID:k17_barcode_scanner

Ourpageisnowavailablebynavigatingto/$sp.do?id=k17_barcode_scanner.Sinceweneedawaytoreachthepageonourmobiledevice,let’screatealinktothispageinthenavigator.

Lab1Creatinga

newwidget


CreateaNavigatorModuleFromthePlatformUI,searchforNavigatorAppsinthenavigatorandselectit.Fromthelistofnavigatorapps,selectServicePortal.Now,intherelatedlist,clickNew.Providethefollowingconfiguration:Name:CreateIncidentPath:/$sp.do?id=k17_barcode_scannerPathRelativetoRoute:CheckedHitSubmit,andyou’redone!


Widget101Ahighleveloverviewofwidgets(justincaseyouneedarefresher)Thefollowinggraphicshowswhatvariablesaregloballyavailableineachscriptingenvironmentandhowtheyareinitialized.

ServerScript

1. Anemptydataobjectisinitialized.2. Usetheinputoroptionsobjectstogetanydatathatwassentfromtheclientcontrollerorusedto

initializethewidgetfromtheserver.3. Aftertheserverscriptexecutes,thedataobjectisjsonserializedandsenttotheclientcontroller.ClientScript

1. Everythingfromtheserver’sdataobjectcanbeaccessedviac.dataor$scope.data.(Youwilllearnmoreaboutcand$scopelater)

2. Ifyouchangeavalueinthedatamodel,useserver.update()toposttheentiredataobjecttotheserverscriptasinput.Note:Aftercallingserver.update()theclientscript’sdataobjectisautomaticallyoverwrittenwiththeserver’sdataobject.

3. Usec.optionsorscope.optionstoseewhatvalueswereusedtoinvokethewidget.Thisobjectisreadonlyandmakingchangeswillhavenotbevisibleintheserverscript.


LabGoalGoodwork–youcreatedanemptyscreen!However,thatisn’tgoingtodoanyofourusersmuchgood.Let’susethepoweroftheCabrilloAPItobuildatrulymobileexperience!Cabrilloisspecialbecauseitgivesus,aswidgetdevelopers,accesstoanumberofhelpfulNativemobileconstructsandtoolslikenavigationbuttons,isNativechecks,andthecamera.There’ssomethingyoucan’tdoonthedesktopweb!

Thefirstpassofourwidgetwillbesimple–scanabarcode,thendisplaythecontentsofthebarcodeonthescreen.

Buildyourwidget1. Here,we’regoingtoexercisethosecopy-pastemuscles.There’squiteabitofcodethat

makesupthiswidget,sohere’saconvenientplacetogetthecodeandpasteitintoyourwidget:http://mobile.servicenow.com

2. Let’stakeacloserlookatsomeoftheCabrilloAPIsthatwe’releveraginghere.

cabrillo.isNative()Sinceweknowthatourbarcodescanningexperienceisonlygoingtoworkinanativemobileenvironment,wecanfeature-gateourwidgetbycallingisNative().Thisway,ourdesktopuserswillbegreetedbyahelpfulerrormessageiftheysomehowmanagetovisitourpagefromadesktopcomputer.Wecouldevenprovideanalternateexperienceforthoseusers!

cabrillo.viewLayout.setBottomButtons() WiththisAPI,wecanaddacustomnativebuttontothebottomofthescreen,andtieanactiontoit.Prettyuseful!

cabrillo.camera.getBarcode()Thestaroftheshowinthiswidget–bycallingthisAPI,abarcodescannerprovidedbyCabrilloissummonedand,uponrecognizingabarcode,willreturnapromisethatresolveswithavaluederivedfromthebarcode.

Lab2Utilizing

theCabrilloAPI


TestingOurWidgetTotakethewidgetforatestdrive,openthenavigatoronyourmobileappbypressingthelisticoninthebottom-leftcornerofthescreen,andsearchforCreateIncident.PresstheresultinglinkandscanthefollowingQRcodeonthepagethatispresentedtoyou:

LabGoalLab3

CreatinganIncident

fromtheBarCode

fd


Wenowhaveafully-functionalserviceportalpageforscanningbarcodes,butitdoesn’tdoanythingusefulwiththatinformationyet.Let’supdateourscannerwidgettoautomaticallycreateanincidentforthescannedasset.Sincewewillwanttoprompttheuserforadditionaldetailsaboutthebrokencoffeemachine,weshouldalsoprovideanotherscreentotheuser.ThisisagreatusecaseforCabrillomodals!

Buildyourwidget1. Thistime,forconvenience,weincludedthe‘CreateIncident’widgetandpageoutofthe

boxinyourinstance.AllyouneedtodoisopenupyourwidgeteditorandlocatethewidgettitledK17AssetIncidentConfirmation

2. You’llnoticethatourwidget,sadly,isemptyinside.Let’sgiveitsomemeaningbypastinginsomecode,whichcanbefoundathttp://mobile.servicenow.com

3. Sincewe’readdinginsupportforopeningupamodal,wewillwanttoupdateouroriginalbarcodescannerwithsomenewcontent.OpenupK17BarcodeScannerandcopy-pasteinthecodeforthenextstep,againfoundathttp://mobile.servicenow.com

4. Let’stakeacloserlookattheadditionalCabrilloAPIsthatwe’releveraginginthislab.

cabrillo.modal.presentModal()IfyouhavespentalotoftimebuildingwithServicePortalorwithotherwebdevelopmentframeworksinthepast,you’llknowthatcreatingmodalbehaviorscanbeprettytricky.WithCabrillo,it’seasy!Youcanpassinanyarbitrarypagelink(Like,say,anotherserviceportalpage)andthepagewillbenativelypresentedinamodal.

cabrillo.viewLayout.setNavigationBarButtons()WiththisAPI,wecanaddcustomnativebuttonstothemobileapp'snavigationbarandtieanactiontoeachbutton.ThisAPIworksjustlikethesetBottomButtons()thatyou'vealreadyused.Tooeasy!

cabrillo.viewLayout.showSpinner()ShowinganativespinnerHUDhasneverbeensimpler.JustcallshowSpinner()toshowaspinner,dowhateverasynchronousworkyouneedtodo(likesavingarecord)andwhenyou'refinished,callhideSpinner().

cabrillo.modal.dismissModal()Whenit’stimetodismissthemodal,thepresentedpagecancalldismissModal()andpassbackdataintoyourmodal-callingwidget.Powerfulstuff!


LabGoalWenowhaveafully-functionalserviceportalpageforscanningbarcodesandturningthemintoincidents,butthatdoesn’tdousanygoodifouruserscannoteasilyaccessit.Let’smakeuseofthebuilt-inMobileApphomescreenandaddalinktoourserviceportalpagethere.

Lab4Configuringourmobile

homescreenfd


Modifyingamobilehomepage1. FromthenavigatorintheplatformUI,searchforHomePage–selectHomePagesundertheHome

Screendropdown2. Fromthelist,selectthehomepagetitledLabApplications.Thisisthehomescreenthatwewilladd

ourcontentto!3. Currently,ourhomescreenlookssomethinglikethis:

Wewilladdsomemoreitemstothisscreensothatouruserscaneasilycreateandviewtheirincidents.

4. Let’screateanewsectionforourlinkstolivein.IntheSectionsrelatedlist,selectNew.5. Intheform,providethefollowinginformation:

Title:IncidentsHideTitle:TrueModuleStyle:RegularActive:True

6. Submittheform,andnowwehaveanewsection!Let’sgiveitsomecontent.Clickintothenewsectionwehavecreatedand,intherelatedlistentitledModules,clickNew.Providethefollowinginformationtothemodule:Title:CreateIncidentSubtitle:MakearequestorreportaproblemModule:SEESTEP7Icon:EditBackgroundcolor:#2d86d5ContentStyle:LightContent

7. FortheModulefield,wecanprovidethemodulethatwecreatedbackinLab1!Howconvenient!


8. NowwehavealinkthatouruserscanusetocreateanincidentwithourfancynewServicePortalpage!Let’salsoprovidethemalistofincidentssotheycanseetheincidentsthattheycreated.Weprovidethisoutoftheboxinyourinstancestosaveabitoftime(configurationofthisismoreofthesame).ClickEditintheModulesrelatedlist,andselectthemobilemoduleentitledMyIncidents.

9. Sincewemadeanupdatetoourmobileapp,wewillneedtomanuallyreconnecttoourinstanceinsidetheappinordertoseeourchanges.Thisisduetothemetadatacachingthattheappdoesbehind-the-scenestokeepthingsquickandsnappy.Torefreshtheapp,tapyouruserprofileinthetop-rightcorner,thentapSwitchInstance.Re-selectyourinstancenamefromthelistthatappearsonthescreen.

10. Yourmobilehomescreenshouldnowlooksomethinglikethis–welldone!

LabGoalNowthatwehaveabeautifulmobilehomepage,letsfurtherenhancethatIncidentlist.Tostart,wearegoingtocreateamobileListUIActionthatwillenableouruserstoquicklyescalateandde-escalatetheirincidents,withouthavingtonavigatetoaform!WewillalsoprovideahookforconditionallyopeningaServicePortalpagewhencertaintypesofincidentsareescalated.

CreatingaMobileUIAction1. SearchforUIActionintheplatformUINavigator,andselecttheitemtitledUIActions–Mobile

Lab5ListUI

Actions


2. Fromthislist,clickNew.Providethefollowingconfigurationtotheform:Name:EscalateActionname:escalateTable:IncidentListbutton:CheckedShowfor:AnyCondition:current.impact!='1'&&current.urgency!='1'Hidewhendisabled:CheckedBackground:#FF402CScript:ProvidedatGitHub

current.impact = '1'; current.urgency = '1'; current.update(); var isCoffeeIncident = current.short_description.includes('coffee'); if (isCoffeeIncident) { action.setRedirectURL('/$sp.do?id=k17_escalate_coffee_incident'); }

Oncecomplete,Submittheform.

Congrats!Nowwehaveausefulmobilelistactionforourusers.


LabGoalTheescalate/deescalateUIactionworksgreat,anditworksonanyincident.Butwewantbetterforourusers!Wewanttobuildthemagreatexperiencewhere,iftheuserescalatesanincidentrelatedtothecoffeemachine,wecanrecognizetheirimmediateneedofcoffeeandpromptthemtoorderacoffeedelivery!Thesearethe

Lab6CabrilloLocation

API


typesofdynamicexperiencesthatwecancreatewiththemobileappandwithServicePortal.Let’saugmentourUIactionandreallyscorebigwithourusers.

Buildyourwidget1. Thistime,forconvenience,weincludedthe‘CreateIncident’widgetandpageoutofthe

boxinyourinstance.AllyouneedtodoisopenupyourwidgeteditorandlocatethewidgettitledK17Coffee

2. Oncemore,we’regoingtopasteinsomecode,whichcanbefoundatmobile.servicenow.com

3. Let’stakeacloserlookattheadditionalCabrilloAPIthatwe’releveraginginthislab.

cabrillo.geolocation.getCurrentLocation()Asthenamesuggests,byusingnativemobiledeviceGPS,wecanretrievethecurrentlatitudeandlongitudeofauserthroughasimpleAPIcall.ThisAPIreturnsapromisecontainingthedevicelocationforanemployeeon-the-go.

Patrick Wilson & Will Lisac - mobile.servicenow.commobile.servicenow.com/Service Portal and...

Documents

Transcript of Patrick Wilson & Will Lisac - mobile.servicenow.commobile.servicenow.com/Service Portal and...