[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] all right hold on tight guys we'll get started in just a couple minutes good morning everyone and welcome back to our mobile app economy where we show you how to build and deploy great mobile experiences on the ServiceNow platform my name is David ha and I'm in outbound product manager here at service now I also have here through the whole with me from the ServiceNow team who will be leading today's session and we want to give a warm welcome to everyone joining us here live today based on popular request today we're gonna be doing a live building session leveraging the native QR barcode scanner that will be used on the now mobile app and in order for you to be successful we recommend that you leverage the mobile implementation guide book that is posted on our mobile community in the featured content section this guidebook will help explain the hierarchy of our mobile apps so that you can be successful in building and deploying your own custom workflows to your end-users most of the workflows that that we built can be used or it can be built using mobile studio Arlo no code mobile designer tool and although today we'll be doing some of the advanced configurations it will require navigating outside mobile studio using platform UI and so in today's session we'll be doing just that we'll walk through an end-to-end mobile workflow on in New York instance configuring both inside mobile studio as well as outside mobile studio using Clapham VI and within today's workflow we'll be covering the following on the UNAM mobile app we'll start with an out-of-the-box experience that's read readily available to use upon plug-in installation and to add to this out-of-the-box we'll first configure a quick action on my home screen to create a new instant but we will configure this new instant actions that it will also allow me to pull up my QR barcode scanner so that my end-users can use it to scan an asset to report that it's broken so if an employee had a broken laptop for example they'll be able to use their devices native barcode scanner to take in the barcode other laptop when creating that new incident okay and then for the second use case we'll improve on this flow by introducing an advanced configuration that will require some scripting and in this use case we will configure a scripted action that will validate whether or not the asset is available in inventory prior to requesting for a replacement so that will be the end of today's workflow okay so for this live building session illa lasts about 60 minutes and will shoot up on wrapping up at the end of the hour if you have any questions throughout today's presentation feel free to send them over in the Q&A section of Zune and at the end of the session we'll circle back and address them and to lead our session for today we have a guest speaker his name is foo ho and he is a solution architect here at ServiceNow he's one of our mobile gurus with extensive experience building ServiceNow mobile apps so without a further ado I'll go ahead and pass it over to foo so we can get started thanks David let's start by creating a function so as David mentioned we're gonna create a very simple use case using no code and then the second the second session will create a scripted one so I'm gonna share my screen hopefully you guys can see that so here on my left I have my mole foam and what we're gonna do is I'm gonna give you a little demo so I'll go refresh this guy we gotta get rid of that guy so we're gonna start by building a quick action on up here okay and so let's go to studio and we'll do some scratch let's go to studio and we're going to use our gutted op creator to help us out trading all the fundamental components so let's call this mobile asset validation oh it's already taken so that's to to scope is already taken okay we'll just do QR see that works alright so we have our scope and we're going to just give ourself admin for now and we'll select mobile and what this will do is let's give it a table and let's create it and so what this will do is this create all the components that you need to build your mobile experience and it's right there that's your scope so here it is and so we're not going to build we're not going to build an athlete an app launcher what we want to do is we want to build a function an action item and a function and then get out of studio because I'm surreal we can only build stuff for the agent experience and we will have to get out of studio and configure it on platform for the now on the lab so we're gonna close this real quick open up again and I'm going to create an action item so go over here so let me blow this up real quick and I wanna create an action item and here we're just gonna say let's call it a report broken laptop and we're going to do an incident on the incident table and we're going to change it from this type I'm gonna say a new one because we're going to create a new incident and I'm gonna hit save and what you save you notice that the item parameter shows up and we're gonna create two item parameters so one it's going to be called let's call it acid and it's gonna be a string type okay and next so fight if you click on this it's going to show up next you create another asset another item parameter called short description and close that and we can refresh this and you'll see both of them here so once you create the item parameter you want to map it to this the fields on this table so on this incident table we want to say a short description is to the short description if we asset we need to store it somewhere so ideally what you want is on your incident table you want to feel that's that stores the asset but since this is out of the box we don't have it we don't have that field so I'm just gonna store it on the description for now in a way you can actually store it in any way you want but for this one we're just gonna store the description it's just sort of a sit there say perfect so right after you finish your action item you want to create a function so we're going to go to a funk band functions and then you want to create an action function so click on this we're right here I'm going to create a new action function and let's call it the same report broken laptop here the type is going to be an action item there are other types here but this is what we just want to create it now an action item and for the action item we're gonna reference the one we just created which is called broken rapport broken laptop and there it is and here if you go down here we want to add some UI parameters but you notice that it doesn't exist yet so you have to hit save you have to give it a condition incident it's not required to add a condition but it is required to add a table as what unit yeah okay so once you hit save which I just did you're gonna have this UI Prime manner and action parameter mapping and so let's just create two UI parameters you so this one will be called short description yeah it's going to be user input you notice that when I created a an item parameter you notice that I use short underscore description but for the UI prime inner I said short space description and I will tell you why we want to do that once we go down the scripting path so let's close this out and what a create other one called sit and here it's going to be user input but we're gonna change it from text to a thing called QR barcode perfect so once you created that your 2 uij parameters what we want to do is we want to map the parameters to the item parameters so let's go here and it's crate and let's do the asset first so now with that this close sound real quick and we also have to do with the short description notice again were there and then notice this one does not okay so we are done function here so we are done with a studio for now and what we're gonna do is we need to associate this function with a quick action and so usually when you do this in studio you would map it in in the applets and then what studio will do is create a thing called a function instance but since we don't have that ability and we have to do it on platform so let's go to platform and we're going to [Music] mobile and then you can you'll see this you see now mobile and then this system mobile but we since we're modifying the now mobile app let's go down this this colleges hierarchy tree so on a navigation so let me actually show you this so we're gonna go down to the navigation when you click on it you notice how there's this navigation tab so there's Home Services and so far thrice there's Home Services and so we want to put the - the quick action we want to put the function on the quick action on the Home tab so I'm going to click on this and I'm going to change the scope so that I am in right scope okay and then one home tab I want to go to this Apple launcher so click on that and you'll notice that when I go to the app launcher you'll notice that there are things called sections these are called UI sections and you'll notice that you know Mike to do this is my task my request is right here and popular services so this this this body here represents this body here but as I mentioned we want to put it up in this section so this is a call to quick action and we've this one already has one but I can get rid of it but we're gonna create a new one and just to add to that in case you're unfamiliar we used to have the quick action that used to be a floating green button at the bottom right mobile app but for all now mobile clients that uses an iOS device we had a UI change where it moved the quick action from the bottom right to the top right as you see on foo this computer and that's really to align with you know Apple's best practices and that's so you should expect two quick actions on their top right every twice moving forward great so we're going to create a function instance and so we're going to create a new one so here we're just going to call it report broken laptop and here we want to the the parent table is going to be the applet launcher it's kind of here and the parent is going to be the home page okay so once we map that create the function here quartz broken laptop and when we display this function we're just going to call it report broken this is what the users will see on the quick connection now another important note is on the location you want to change this to protection it's safe and so here's its now we hack we can reference it so click on this green button to save but that green button is this a safe but you have to save it you have to update the the Apple launcher here too as well all right so if I go back to my phone you wanna see what's going on oh let me get log off it's not showing it so let's see what's going on so on the home so we have a quick action so let's see if there is a scoping issue we can take a look at the action itself - maybe the primers didn't map correctly [Music] - or consider that for troubleshooting yeah okay okay so let's look at the starting with an action Adam yeah so it looks correct new ass that's so you have your item parameters and then check your UI parameters on the action function user inputs yeah that's right so let's do this why don't we when we get rid of these guys let's just make it really dummy real quick and let's you oh is it associated to the right home screen did you select the right applet launcher yeah so it's its home page which is that and let's double check to see if well yeah that's right here [Music] epilogue sure try open the record real quick I think we're seeing more fields that we need to that home home page is wrong I think so click I Oh cannot change the yeah so let me go back to here let's go back to here oh that is round a choker that is right home page yeah let me get rid of this guy update help I launcher we should have one only no it's not showing up hey let's let's try creating it from scratch again um what are you do yeah yeah let's try it from scratch well it's just one parameter this time and then we'll add the second parameter to see if it works out for us okay so this one has no parameter let's just get rid of this guy real quick so gonna get rid of everything even here as well so we have a question from the Geo D he asked do we need to log it off every time we make changes to studio or outside of studio the answer that is typically you only need to log off when you make navigation tab changes so it's really big configurations you can see more on the mobile of implementation guide book that we have on mobile community but for changes like adding an action or a quick action you only need to do refresh by pulling down on the slide but right now food's showing a live tutorial on how to troubleshoot this quick action if you don't see it on your mobile app so he's gonna try to create another one from scratch and yep so let's create another one yeah a report broken and laptop.this this is a function sense so this is gonna be applet launcher and this is the home screen and we're gonna reference the ports and we're just gonna call it report program with a quick action submit on that it ok hit update and it should show up if not win this we're just real let's what's reference one that's already existing so let's see if this one works well maybe just one dozen we're going to be miss remarks okay so something's wrong with our functioned you should create these action item from scratch instead of just deleting the parameters let's just create any one okay that's what we create this whole thing will speed through this time yeah so I'm gonna create a new one that instead actually I was deleted how orders the ACO issue maybe I should just quit one from how to studio and seems like there's a CL issue so let's one report broken laptop - and we're not going to Primus for now just see if it we can actually add this function on to the quick action oh I think I know why I did it oh she is identical tissue that's the issue that's not actually does work okay no that was a live demonstration on how to troubleshoot your actions so just a reminder a quick actions require global context if you set it to record its expecting some sort of context within a record but because it's on a home page there is no context to reference office that's why you would have to set the context to global anytime you create a quick action all right so let's so let's listen tree use what we just have so here's the we report broken laptop and here is the function right here the mistake so it was record for quick action has to be global and that's why I wasn't showing up what's that back in your parameters as well I think they're empty at the moment right but let's see let's just make sure that it's there I don't think it's gonna show up you know because we need we didn't we need a G for an action to work yeah yeah so add in a short description or something on your action item or let's do let's redo this description we're gonna do asset you and will to map description to a short description and we're going to map description with the assets so we're done with the action item now we're going to go to the item parameter for the function the UI primers for the value the UI parameters and we're gonna call this asset I want to make this a QR so by changing the input type to QR barcode now it expects the easier to you know be able to pull up their native camera and it'll scan the asset tag so that's kind of the difference here you have three other input types as well text would expect the user to type in some text also choice list and search list which will give a you know a selection or a choice to select from alright so now you have a UI prime error now we're going to map it with the item parameter this guy now I want to go to map - short description so when I update everything's mapped but there are parameters so now we have to go back and go back to the ALP and we're going to create that so let's get rid of this guy so I believe this is the one we just created this function correct primary quick action yep so since we changed the context of global so there it is is right here so if I click on this notice how we have the short description and then the asset so the next thing I'll do is I'm going to create a QR code so if we've got a platform we're gonna go to my stockroom yeah so stockroom and we're gonna go click on this table here and I'm going to find a Macbook and so let's this guy and I want to create a QR code for this asset EXO just copy this and just go to Google and say QR generate now and we're just going to do text and paste that in and here's your QR and so that's get a copy of that so right now this mimicking QR that should be on a laptop that's it so we're done with down with that's so so I'm going to do is we're going to all right laptop okay you don't see my screen my laptop or my Mac is broken and when I click on the asset tag you can see that it's bringing up this camera and so I'm just gonna scan that guy and there you can see you can see that it's scanning the the asset value so if I hit submit it's going to create an incidents so if I hit refresh and there it is my Mac is my Mac is broken so it basically said it that's the basic case it is that we just created a function to create a function to create an incident to report an incident and so what we're gonna do next is before you go into the next few scales do you want to tap into the record we can so I think what's really helpful here is you know as an end user or as an employee you know if you have a really long cereal bar code that's on a laptop for example you don't actually have to type in those 12 characters you'd be able to use your scan asset tag to input that into the description or the comment or work notes whatever feel that you want to configure on that table and that gets passed over to the agent so that's one use case that foo just showed you on how to use or leverage the scan asset asset barcode and now you can you know we'll transition to the next use case which is a scripting these case and you can kind of go into details on that all right so so just create an incident function for self reporting using the cure feature but what if there are no Mac books available in a stockroom so you notice here you notice how this one is in stock and is available so let's take it let's take the Internet function upper level by checking the stockroom before creating an incident so by default in Studio B go to action item this is declarative right here so when you do when it's declarative it does a it performs a thing called right back action to one table so here's the right back and it's performing this action to one table but in order for us for two to check the status we have to jump to the asset table this alm underscore asset table so if you're using declarative you cannot do that and so the only way to do that is to do convert this type to script and I will walk you through this whole process with you on how to do the checking and then how to and how to display something to the user so if you haven't done a scripting this will be a good good example for you but with scripting you can basically go to multiple tables grab information and and build some sort of launching around it and so in this case let's start with a very simple displaying of a message so there's thing called GS when you can type in GS this is this is a glide system and basically you can just add a message right here and I'm just going to say Swilly created an incident so and so this in theory should say something but not creating so you notice how I'm just displaying a message but I did not do anything else so let's go back to here so we hit we refresh and I click on this and here so I'm just going to do tests it's not going to create it I'm going to sign that and when I hit submit it's gonna say successfully created incident and that's what we have so now you've successfully created a script now let's let's let's sit up checking part okay so so let's let's get rid this guy and so let's the first thing we'll do is look up and this is a comment and I'm going to do VAR q and it's not just create a variable and we're just gonna do record and this is where we create an object for the table so I'm going to look into this table right here am i just grass it so it's gonna be angle on them underscore ascent and we're gonna kind of come in there : and then we're going to do we're gonna check on three things we're gonna check on the asset tag and then we're also going to tech check on the state to make sure that it's in stock and then if it's available in its thing called sub state and I'll show you how to maneuver around these tables so we're gonna write a query so I add query and we're going to do the asset tag first oh so it's gonna accept two parameters so the first parameter is the parameter of the field of the table so so here we assess the asset tag so let's click on this guy and this is how you figure out what fields called so we want to search for our asset tag so if you right click here you see the thing called show it says asset underscore tag that is this is the column the date of the table column so I'm gonna make sure that you're referencing this instead acid underscore tag so asset underscore tag and we want to check it against this asset that is coming from the user input so in order to do that there's a thing called input object right here so you want to do is input dots asset and this is how you get the information that's coming from the mobile phone into your script so let's check that and then we also have to check the the state now again it's not it's not really called state so you have to be careful so you have to go right-click and you see it says install underscore status all right so you have to do q gr dot add query install underscore status and we're gonna we're gonna give it a value we want to make sure that it is in stock but you notice that it's not you can't say you can't say in stock because that's not how you can't give it the the label name you have to dive in and right click and it hit configure dictionary well went sorry so let's go back right click here and say configure dictionary and here this this install status is actually a choice choice field list so you notice how the in stock is the label we don't care about that we actually care about the value so you have to say 6 so this is 6 okay and then next I'm going to do is check for the state and they call it sub-site here but let's check it again so it's called sub status okay so again add query again this is the have this thing called because I have this choiceless you can't just give it the value you have to dive into it to go to configure dictionary and then look down here see what it's actually also available is actually actually called it available now there's two which is fine because there's a dependent field dependent value here so we know that our in-stock means six so we're gonna use this one so it's available like so okay and once you do that this is the this is the search and then once you're finished searching you give it two conditions you have to execute it so it's gr query next you want to like do a condition where gr the next the next available record and if that exists we're just going to wrap this into here and we're just going to display it and if it doesn't work out if we can't find it we're going to have another we're gonna say GS dots error information and we're gonna say some like sorry mmm laptop it is not available and let's say ordering and shipping will take additional two weeks so wait for it to save okay it's like there is a hmm I think tab that's syntax okay so now I'm just going to um do you know report an issue that's gonna do you um this won't create anything I just do a lookup and when I hit submit you notice how it says failed and now when you're doing scripting there's gonna be times when you mess up with the title and stuff and so how you can do this is you can with the way to troubleshoot this is you can just go to platform and let's look up what we've done wrong so you can go to system log and go down to all hmm and you notice that there's there's a warning here it says here is my write by function here's my look of asset and it's it's it's starting here and it's saying something about there's some error right here so something is wrong with line four right here you notice how it doesn't get caught here so what you do is you can go to seriously clyde record yeah let's do great record and here's the issue so you can go to our developer site there's something called new that I forgot to enter so this this log tool will basically tell you where it's feeling and then you can actually go to the documentation and see that I'm missing this new keyword so let's type this in save okay mm-hmm let's do the same thing again and we're going to do that and it should display a message oh you notice how there's a thing called this operation here so you just you just have to what basically this is called cross cross scope privileges and if you do it once it's gonna create it for you automatically on the back end so don't worry about this you can see that we successfully called create an incident so let me let me talk about what this is real quick so if you go to cross scope application right here what platform did was because you're making the API call it's going to create the necessary operations for you so I think I called it QR I called it you QR acid well maybe it's here so basically what it did was it created a cure asset scope for you and it gives you a read for this table so once you do it one time it's it's gonna create it automatically in the background so so don't worry about that and what's once I do it again it's this message will disappear so let's let's try to cause a failure so I'm gonna cause we know that six is in stock so if I do like nine which is not in stock and if I do the same thing and I do that it should fail so sorry your laptop is not available or any shipping will take additional two weeks which is it falls under this this commission right here okay so now we have a look up and what we're gonna do now is we're going to create a record in this block right here so I'm going to I'm we're gonna do the same thing we're gonna create a variable and we're gonna do now what I'm not going to make the same mistake when I say new glide record and we're going to write create an incident so this is going to be the incident table and once we create this this object we're just going to map the fields and in this table into our our into this input feel from the user so remember earlier I said that you want to do underscore because if you didn't have an underscore or you wouldn't be able to reference this this item parameter so again you have to say it's all in this input object so you say input the short description underscore description and then same thing with asset this is gonna be called description because we're mapping it again let me show you so if I go back to new you notice how the description is going to map to this guy so let's go back to script so description is going to be mapped to input dot asset and then once you do that the last thing you want to do is thing called gr insert and this will create a record in the incident table but let's let's take it up another notch so let's go to asset oh my stuck and let's go to Mack look so this I want to show display to display this this asset so instead of saying just doing something generic like successfully create an incident I want to dynamically say something about this incident so I'm gonna say crate successfully created an incident and I'm gonna say to replace your and I'm gonna say honest new plus and I'm gonna do gr new dot and basically all I need to do is get the display name so again we don't know what this the actual column name is so if we want to display anything we write again right click here is display underscore name so let's go back here say display on this for me it's Save all right so let's do this again so when I click on so I'm gonna say my MacBook is not working do the QR there it is submit the asset oh I forgot something got to put this deck as six so let's go back to six because that's in stock so not sure work so if I submit this again you have three message because of the cross scope you notice that because we're going to internet it's going to show here oh and something's wrong here it says success he created an incident to replace your and it says undefined and that means that this is not referencing correctly so let's take a look oh I don't know if you see notice a mistake so this gr new represents the object of incident I do not want to do gr new I want to do gr which is this object because this display name is in the asset so yeah do that it's same again so these are just good troubleshooting steps that you can do so let's refresh this again and I'll do my please you laptop and I'm going to scan you you here and I hit submit so you notice how now you notice that you see this if the message is coming out with that but you notice that there were some like weird comments then if you notice I'm not sure if you notice that that's because this add info message can only display text only and when you have special characters like this guy right here just this double quote it's not gonna display correctly it's going to display some ascii so you know you know you can actually get rid of that via script too so there's a thing called regular expression you can apply to this object but you don't you don't have to actually write it by hand if you go to our community site if you do service now let's say service now dynamically say remove special characters we have people who will just write solutions for you on our community page so let's go to this one we are going to go a few minutes over time but we'll open up to the Q&A just shortly so if you want to stick around we'll open up to QA in just a few minutes so this person has the same kind of issue and we're just going to take this function right here just replace that's and append it to this guy right here to get rid of the to get rid of the special character like so yeah let's do again to remove that special character [Music] you as you can see right here it says order your laptop without the special ASCII again it will you will get rid of the desculpe the scoped privilege if I do it again for example it a message will disappear so there it is no we lost your ammo okay okay so that's that concludes the our QR demo again you can if you get into issues you can go to the system logs to determine where you made a mistake you can also use our developer community if you have scripting issues to look at examples and if you have a special case you can always go to our community to find solutions before you implement your home as you can see what I did with here okay sweet thank you for you for showing us that demo we're gonna go ahead and open up to the audience if you have any questions feel free to ask us in the chat now and if there's any other questions in the chat that we haven't already answered I can bring them up here as well and then mark yeah we'll take a look at your idea on the portal it will be tracked in it will definitely get will definitely further discussion on it in our internal meetings so thank you for sharing your feedback and your ideas with us so you guys have any other questions feel free to ask it now from Zod would we get a recording for this session yes so this will be uploaded to YouTube on our mobile app Academy series here I can share my screen really quick just show you what that looks like if you go to youtube and then you look up ServiceNow ovale app Academy you'll actually see the seven or eight part series just click open up this playlist and you'll see all of our videos here and they'll get uploaded usually within a few days after each lab recording or at most a week later and this is under the ServiceNow now community any other questions okay if no other questions we'll go on ahead and wrap it up thank you all for joining us a I hope you found this session informative and helpful if you have any other questions feel free to keep posting or on a mobile community site so that we can explore other configurations in future mobile app academies we're gonna have another session in two weeks showing you an example of how we can move around and consolidate workflows all into a single app so if you you know if you had just a few nice cases on agent and you wanted to bring it over to now mobile or vice versa that is possible and we'll do a live configuration next and in the next couple weeks um and make sure to keep following our mobile community site to get the latest dates and information one other questions from the g.od how does one become a ServiceNow admin or dev um [Music] just to clarify g.o.d I'm not exactly sure what you mean by that foodies yeah so so you I mean if you have your own since you're you you know you can main admin are you mean like servers now certified admin or because like once you have access to the instance you have you know you you have certain roles and that's that's probably an admin role for you and then Jodie you can on me yourself I allowed you I gave you permission to talk so you can be on me you can ask a question directly your son hi so how does one become developer like I wanted to create some application using ServiceNow but from that perspective the mobile like ice I missed couple of minutes part so I don't know how do we connect those both like I create some I have you service now and as system analyst but I wanted to grow to be a developer so how does that happen yeah so deep so do you have an instance to a you do okay if you want to be developer we have lots of information and how to build stuff so we have a developer community and they teach you step by step on like you know how to build well we you he basically you can learn how to build like functions and widgets and so forth everything is available for you in our community and even in our training sites we have labs that does all this stuff and then specifically we have a whole community where it with beginner tutorials to developer training to serve vacation labs all on our mobile community so you can check that out as well we we put it all on the under the featured content everything that you would need to know if you're starting with mobile from scratch definitely check that out already um we're gonna go ahead and wrap up thank you guys for joining us in today's session I hope to see you at the next full life caddy thank you one Cheers