good morning everyone and welcome to mobile app Academy this is our live building Series where we show you how to build and configure mobile apps on the now platform my name is David ha and I'm an outbound product manager here at servicenow and I'll be your host for today's session if you are joining us for the first time welcome to the session we have product experts here to provide guidance best practices and answer any questions that come up along the way and then we do host these academies once every month at 10 AM Pacific um we are actually changing up our schedule recently and uh we will now be moving forward with just one Academy every month every Tuesday at 10 A.M Pacific make sure to check out our latest Community posts for any latest updates on that but just in case you are familiar uh just want to point out a few resources that we do have available if you're new to mobile we recommend that you check out some of our self-enailment resources that you can find on our community site such as our Essentials training blog and mobile feqs and then we also do have a plethora of other resources such as labs and mobile training so now learning as well as a playlist to all of our past academies which you can find sessions like um mobile Asian quick start guides getting started with now mobile and so much more but with that being said um let's get started with today's Topic in which we further explore getting started with mobile Builder today we're going to be deep diving into building a navigation function using the app builder so how do I enable my users to be able to navigate between screens using record information so just to give a quick example how do I move from a work order task to maybe the caller details of that record okay um and just a quick review for today's schedule we'll start off with a quick overview on navigations then we'll quickly jump into the exercise and then wrap up with any q a um okay but with that being said let's uh jump into the quick overview so in our last few sessions um we've covered right back actions smart buttons uh I've even showed you how to build a list from scratch right um but in today's session we're going to focus on navigation functions which give your users the ability to navigate between their mobile screens you can see on my left screenshot here that this is a work order task record and there is an arrow icon on the parent field and that indicates to me that the user can actually tap on that field and be able to navigate further to another screen if you tap on it it will take you to the work order of this task so if there might be many tasks Associated to a single work order you can see the parent and so that user can tap on it to take further action on it if needed like create a new work order task related to this work order okay um in other common use cases you might also see things like you know you can navigate to an employee directory or maybe you know jump into the caller details or maybe the assign to person and see the um uh profile information on that person right so those are just a couple common use cases uh but for today's use case we are going to build a navigation that allows me to navigate for my work order task to the parent work order um and we'll be leveraging the out-of-box field service mobile app to do that um in our past academies we've created a custom list screen that shows me my critical task which are just p1s and PT work order tasks we're going to further configure that that's um that screen so that I can have this navigation here um but with that being said let's go ahead and get started uh I'll share in the screen and then we'll jump into my instance okay so I think you should be able to see my screen Here and Now okay so to get started um let me show you the out of block experience this is my field service mobile app right I'm out of the box it gives you things like my schedule my test map and be able to see all your work order tasks that are assigned to you I think in our first or second mobile app builder um uh series part of this series we built a critical task list screen and this just shows me all of my P1 and p2s that are assigned to me and if I tap into one of them you can see that there are some details on this record um you can see the parent the location Open by and so forth I want to be able to tap on this field specifically for this one here for parent you can see that I can kind of copy and paste it but not do much further on that if I want to be able to have you further into any one of these fields I need to configure a navigation and then I also need to configure a screen for it I don't currently have a list that shows me all of my parents um all my work orders and so I'll have to build a list screen and then build a navigation and Associate the navigation back to this screen okay so to get started I'm going to jump into app builder and build a list screen for my work orders first okay and so we'll jump into the field service mobile scope and then we're going to create a new screen um type list and then we can just call this you know work order lists um work order list uh we'll give it a random icon just because uh just because icon doesn't show up um since we're just going to navigate directly from here we're not going to put it anywhere so we'll just give it a bookmark and then we'll save and then to further create this screen we're going to create a screen segment I'll just call this work order order screen segments save and then we'll create the stream which contains your data item work order list stream and then we'll create this data item here um we'll call this work order data item and the table that's going to pull it from is from the work order table I'm not going to set any conditions [Music] um for now and I'll explain a little bit later why I'll save it for now if I just wanted to configure a regular list screen and just show you know all work orders that are assigned to me I can do that but that's not my use case my use case is I just want to be able to navigate from uh uh my work order task click on this parent and then take me into this specific parent record I don't want a list of recorded um of work orders I just want to see this one specific record um in order to get this workflow to work you do have to build the entire list screen typically you know you can create the record screen and then just skip this list screen uh uh step but I'll show you in a few steps why the list screen is necessary and the main reason is because you need parameters but we'll we'll get there okay so now that I've completed my data item I'm gonna go back here and then I'll configure my cards and templates so how do I visualize this data item right I know that I want work order but how do I get it on a card so we're going to create a new list item config and we'll call it work order listen for big again this is going to pull from the work order table I won't set any conditions and then we're going to create a new card this card will allow me to decide what Fields will show up on this card right so we'll call this the work order view config which is just another name for card um and then the card template just to save some time I'm just going to use one of our starter templates what I mean by starter templates is when you go back to your instance and open up Mobile card Builder you'll notice that there's a tab for starter templates and it's basically uh pre-built templates for you to use that you can either either use as a starting point because maybe building a template from scratch might take some time but just to give you an idea of like what templates are out there to take advantage of right so if I tap on Startup template you can see that there's I think 12 or nine templates here I think in Utah there's going to be more templates available I think up towards 15 to 20 templates um so something to look forward to I just want this very basic template zero one here um I'm not going to open this I just wanted to see what the name was of this template so that I can go back into app builder and then choose that specific template I know it's called template01 uh this one here and so I'll select that and apply okay um and now uh for my list screen I have to jump into this card and decide what field I want on this card so on this card record I'll jump into Mobile card Builder I could have done it here but I think it's just faster to drop directly from the record itself and you can see that it inherited that card template that we selected template 01 but all these fields are blank and so now I have to fill in the fields that I want um you don't have to use every single one of these values if you leave it blank it will just show up as blank um so I just want to show like maybe four Fields so let's show oh notice that I can't click here from that field what's going on here uh the reason is because you haven't selected the table um on app builder I scroll down here you'll notice that the table is blank um it doesn't know what it feels to show because you haven't set a table so we'll go in here and click save uh I don't think this automatically refreshes so I think I might have to yeah I'll have to close this and then reopen this in card Builder okay so now you can see that I can select the fields that I want um this will be number our second field could show you know the State field um the Third Field could be you know short description um and then maybe this last field could be something like um company so I know um who ordered this work order okay so I just have a simple card that shows me four fields um at this point I now need to build the most important screen for this um flow which is a detail screen okay so I'm gonna go back to my list item config and I'm going to create an embedded screen so that I can attach a record screen to it I'm going to create new here and create record screen your record screen that gives you options to select from details activity stream and relate lists right so we'll call this work order record um we're going to create a new card but we don't have to assign a new template we need the exact same template and so we'll call this work order view config for details for or for record you know the first card that we used was was for the list when you tap into that list um you get the record right the template I'm going to use template 01 again and then we'll save whoops uh it says that there's an invalid input I can just scroll to my left here and I can see the red dots where an error might be present so I'll click here and I'll look down see if there's any issues it doesn't like there's any red dots here so I'll click into the second one what is it missing it's missing an icon so that's the reason why we saw the error message again I'm going to select a random one because this icon won't actually show up but it is necessary to build the screen and then we'll click them to this last one to see if there's any missing fields and there's not so I can save now okay so now at this point I have my record screen but this is an empty record screen I now need to create tabs which are just uh which are segments I need a segment for details when you have only one segment you won't actually see these tabs it's only once you have two or more that these tabs will show up it will just look like a regular list screen if you only have one segment okay so I'm going to create a new record segment record segment and the embedded screen a new administrate will be a details screen um and so we'll call this uh work order details we'll select a Nikon again uh the data is going to pull from the work order table and then I can just uh pick what screen feelings I want on this so for the fields that I have here on my card what other fields do I want to show for my parent right so I can add some Fields underneath let's show um things like location uh we'll go back into my details screen add another Springfield for maybe uh open by that could be another field open by and then we can just leave it simple like that we'll just add two field students details but at this point my entire list screen and my record screen are complete so I have my list screen ready for work orders um let's check this out um just to show you what this looks like so far I'm going to now associate this list screen to my work order launcher screen right which is my home page I'm gonna put it on this UI section here it's a horizontal section icon section and I'm gonna just put it to the right of my group task uh and it's just for a reference point for me to see what it looks like so far to make sure everything works before I move on to the next step okay so um let's go back to my home and I need to open up this launcher screen here which is called my work um we look at my work uh this is a launcher screen which is the right one so we'll open this up and then on this screen here I just have to scroll down into the launcher sections and then open up there's three I want this one at the very top which called my work and then you can see that there's four screens attached to this launcher section I'm going to add a fifth one which is the my work my work list screen that we just built and we call that my what we call the work order um what I call it yeah call it work order list pictures this one uh so that so this is why it's important to use unique naming that way it's easier to find your records once you've built them so let's go ahead and save that and do a refresh foreign okay so yeah so these have this has the four fields that I have I think the company's not showing up because the specific work order might not have um a company oh so you can see that this one does acne um I'm just using uh dummy data and so not all these records have companies but it does have the four fields that I want if I tap into any one of these um you can see that I have my two detail screens uh Fields but it looks like my card doesn't have anything and the reason for that is because I forgot to select the fields on that card so let's go back into app builder and remember to fill in the fields for the uh that card so let's open up um work order list and we'll scroll all the way down to my details record screen sorry and then this car here let's open this up and then jump into cart Builder although I use the exact same template I forgot to jump back in here and select the fields that I wanted um it'd be nice to have like a replicate from initial screen so that you know if I just want the cards to be the executive kit of each other you know I'll just tap on one button and it would fill the fields in for me similar to mobile Studio but we don't quite have that feature yet um okay so let's fill in the fields you can see that I can't tap on this so again I have to go back into app builder and set the table which is work order and then we'll save and then we'll close out of card Builder and reopen it so it's good to make these mistakes just so that I can kind of show you the troubleshooting process of you know where are my mistakes where do I go find it where are some hints and tips to go find where my issues are right so here we'll select the number um state short description and then this last field could be company and then we'll see okay so if I just do a refresher it should have my changes there it is okay uh so now now at this point um it's good that I showed my list screen because I didn't know if it was working correctly or not now that I see that it works correctly oops let's do a refresh from the home screen that way the changes are effective across this okay um now I'm ready to build my navigation because I know that my list Screen Works and my record Screen Works um so let's go back into my app builder and go home I'm going to create a new function okay we're going to create this new function here and we'll call this navigate to this work order specifically we're navigating to the um the record screen and so I'm gonna name it specifically that we want to skip the list screen we want to go directly to that record so if I click into this work order task for example um I don't want to see multiple parents right I just want to see this specific one 9001. um so let's change the type to navigation the context is going to be record you only use Global when you want to navigate to launcher screens um This Global navigation is more of a common use case if you want to build like multiple landing pages right so maybe you don't want to have maybe you have a lot a lot of launcher screens that your user needs access to and you don't want it to over flood your tab your navigation tab down here you can actually you don't have to have it shown on a tab you can just create a navigation function and navigate from one of these icons for example I can create a navigation tap on it and it'll take me to that new home screen or to another Landing site basically so that's what this use case is for for our use case we want record because it's trying to pull record information from this work order task to be able to pass and find the specific parent record okay um uh we're getting a question in the chat um I wasn't able to join the early portion of this as a recorded session yes so this is automatically recorded uh we are a little behind in uploading videos but uh just know that all the videos will be uploaded this week okay for all of our mobile app Academy uh mobile app builder series sorry this will be our fifth video okay so um I've created a new function the type is navigation and the context is record okay uh and it's going to ask what screen do you want to navigate to it's going to be the screen that we built right it's that new list screen for parents um I'm going to select the list screen and I'll show you what the experience looks like in a bit I kind of want to show you what it looks like broken and then we'll fix it later so let's select the um what do they call it work order list we'll apply that it's going to ask what table that's pulling from which is the work order table and this is really if you want to apply any conditions so this doesn't really matter for me and then lastly is going to ask what are the redirection fields and if I were to create a redirection field right now it's not going to show me anything here really you won't really understand what this well UI parameter is because we haven't created any I can't select from a list of UI parameters um and so um before I move forward I need to go back um the navigation needs a variable in order to pass to be able to navigate to this parent screen and so I need to create a both a data item parameter to to define whether it's a string or it's an integer or something else for us it's a string that's my data item parameter and then I need to create a UI parameter to Define um how that field is going to show up right what is the behavior um so let's go back to my screens and open up this work order task this is called critical task oh sorry no um we want we want this on the the parent which is called word order my bad work order list um on this list we go back into my data item and if we scroll down there is a thing for parameters this is my data item parameters I want to be to pass the sys ID of this and so we're going to create a new data item parameter called uh sys ID data item parameter let's give it unique naming so it's easier for for me to find I'll call it a mobile app Academy MAA the type is string so this is this variable is going to be a string type okay so we'll save this and then if we go back into my list screen if I scroll down here there's a section for a UI parameter I'm going to map that data item parameter which is just an empty variable and I'm going to Define what the behavior is going to do right the behavior of this variable you know do I want it to pop up doesn't really matter to me because I'm just automatically passing it over is the source going to be user input or autofill um I'm just going to rename this this ID UI parameter for mobile app Academy okay uh I'm not going to touch any of these because uh none of these inputs matter because you typically use this when you want the users to fill out like a screen of of inputs like a pop-up shows up and it's maybe like a right back action right and you want them to fill in a bunch of fields on the form um this isn't quite the use case and so I'm going to leave these as default and I'll show you why these won't matter um in a second so we'll save this and the last thing I need to do is I need to map that empty variable that I created for the date item and map it to this UI parameter which defines the behaviors so I'm going to create I'm going to choose my screen data parameter mappings and I'm going to select that data item that we called or sorry CIS ID that we call data item sys ID what do we call it uh MAA so this is the reason why I added the maafn C is there for me to find we'll apply that and now my two parameters are mapped okay now when I create my navigation I can pass this um uh mapping over to the navigation and it knows uh to navigate to the right screen okay um so now at this point I can go back to my home on mobile app builder we'll open up that function again I don't know if it actually saved because there are some required fields uh let's check I think I called it navigate to the work order so it didn't actually save um I think there were some required fields that didn't allow you to see so we'll just create a new one here okay so we'll call this um navigate to work order MAA um again the type is navigation contacts is record destination screen um we'll select I'll break this for now so let's let's just uh select for a quarter list this is the wrong screen but I'm just going to select this just to show you the behavior if you automatically thought that you would just navigate to the list I'll show you what that looks like and then I'll show you what the correct screen is okay and then the table of this is going to be work order no conditions and then we'll save and then we'll create a new redirection destination field it's going to ask what is that UI parameter what is that variable that you created earlier we'll choose uh the one that we called um when you see this empty screen give it a few seconds to load and then the search bar will work so I think my instance is just lagging a little bit let's give it a second yeah man oh um oh there it is okay uh that was weird uh so now I was going to ask look up your UI parameter which we call sysid for mobile app Academy and then it's going to ask which field do you want to navigate from on um and we want to be able to navigate from the parent field okay so we'll save that so now at this point um I've created my navigation so the last step is just to associate this navigation back um onto this field here which lives on my critical task list right so how do I get it over here um I need to go need to go to my home and open up vertical task list tasks we call it critical tests it's a list screen so we'll open this up this actually lives in my record screen sorry I should have clicked record but I can also navigate from here on my left hand nav here's my record screen if I scroll down here and jump into the screen segments into the details this is the details and then here I can see all my fields that are associated to this table I want to add this navigation into the field function of this detail screen um we'll create new and we'll call this navigate to work order um the display won't matter because this won't actually show up so we'll just copy and paste um and then it's going to ask what field are you navigating from on this detail screen and so we're going to select the parent field and it's going to ask what the function is which is our navigation again we'll give this a second to load navigate to work order and then we'll save oh looked in reality soon okay so now at this point let's refresh and see what this experience looks like okay um we're going to tap into the critical task and then you're going to notice that there's now an arrow popping up so if I tap on this first you're going to see that this is um showing up uh your UI parameter for sysid and then if I click on search it's going to show you a list of work orders not quite what I'm looking for right um first of all when I tap on this I don't want to see the screen um it's it's showing this Behavior because this is what I Define as the default on my UI parameter right um we said that it was going to be if we look back at that UI parameter let's go to home um and this is a work order list um on this list screen right we created a UI parameter here and it's saying these are the default values I sent it's user input it's asking for the assist ID that it's going to be a text input type um and you know I didn't touch any of this because I it I'm going to ignore this in order to bypass this completely I want this sysid which is the correct sysid to automatically pass when I tap on this so that the user doesn't have to have to tap on search it's taking me to the correct screen but I don't want the user to tap on this I want them all to hide this so how do I do that we go back to app builder and we open up the navigation there is actually a setting on that navigation that allows you to automatically pass the sys ID or whatever value that you're trying to pass um so if we look at navigate to uh work order there's this little setting called Auto populate screen parameters okay so if we save this and then I do a refresh you'll notice that it'll automatically take me to that list screen right so now I think I fixed that experience um the next step is um it's taking me to the list screen which is not what I want I want it to take to I want it to take me to this exact ninety thousand one work order and so we actually Associated the wrong screen we don't want the list screen we want the record screen okay so let's um uh the destination here is currently list so let's remove that and then select work order record ER record apply save so now if I refresh I tap on this it'll take me to ninety thousand one okay and so I now have my completed experience um when I tap into any one of my assigned critical tasks and my user wants to be able to see additional information on the parent record which is this type of 90 0001 parents I can now see additional details on it if I want to build further actions on this work order I can do that right if I want to be able to create a work order task I can do that I want to add additional fields on the record screen on this um I can do that um but I think this is a pretty simple um example just to get you started on your navigations okay um are there any questions from the audience before we wrap up here we'll use a couple minutes to answer any questions um and I do want to remind you all that we are now pushing back our bi-weekly series to now once a month we will host these academies every uh every two uh once a month every Tuesday uh on the last Tuesday of every month and so today's the 28th I think the next session will be uh sorry March 28th okay and then we'll update these dates on our community site as well um I'm not seeing any questions until we can probably wrap up um thank you everyone for joining us today um if you found this session helpful please let us know in our post session survey there's gonna be a couple of questions asking what topics you want us to explore in the future uh we love getting that feedback so make sure you share that with us if you can and also make sure to subscribe to the mobile Community forum and register to our App Academy series that way you can get notifications on the latest content and updates on future sessions but with that being said um thank you everyone for joining us in our academies and we'll see you again next month thank you very much