good morning everyone and welcome back to your mobile app Academy for 2023. 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 our product experts are here to provide guidance best practices and answer any questions that come up along the way and we do host these academies every two weeks at 10 A.M Pacific uh on Tuesdays and our recordings will be posted on YouTube on the servicenow now Community Channel and in case you aren't familiar um 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-enament resources that you can find on our community site such as our essential trainings blog mobile feqs and so much so many other things um we all also have resources such as our Labs mobile trainings on now learning and then our playlist to all of our previous app academies which you can find sessions like uh mobile agent quick start guides getting started with now mobile and so much more um but with all that said let's get started with today's topic um going into the new year we will be refreshing a lot of past academies that we've done in the past like getting started with mobile app Academy a Mobile card Builder which we're covering today um and these are going to be refreshing with the latest releases such as uh Rome Tokyo and so forth right um so there might be slightly different configurations based on the latest enhancements uh and Store updates and so forth um but for today we'll be picking off up from where we last left off on on the Lost Academy um in which we used a starter template to build a list screen to show me my critical recorder tasks that were assigned to me so that was last Academy today I'm going to show you how to build that same list screen but creating our own card templates from scratch using mobile card Builder Okay so this will be a deep dive into creating your custom car template using card Builder and just to quickly review for today's schedule um we're going to start it off with a quick overview on mobile card Builder and then we'll jump into the exercise and if you do have any questions feel free to let me know in the chat and we can either have a conversation or I can just answer it right off the bat um but just to provide you with some context before we jump into your exercise um let's start with a quick overview if you're not already aware this is our visual editor that we use to create templates and display cards in our service now mobile apps and this is all built inside of a web Builder you know so that after you use your data item to Define your data the app builder workflow will then ask you what template and Fields do you want to display uh what what template and Fields do you want to use to display your record information right so whether you want to pick from a predefined template starters or do you want to create a template completely from scratch it's completely up to you on how you want to display data to your end users um and there's no better way to get to show a quick example this and help visualize this then to go through today's example to help us get started we're going to Leverage The List screen that we built in the last Academy and we are going to leverage the field service mobile workflow in which again we built a list screen that shows me my critical task to my logged in agent and we did this using our starter template found on mobile card Builder but today we're going to use our own custom template instead and so this is just a quick example on you know a quick template that I created um so to get started I'm going to share a new screen here um and while I do that let me go and promote charity um to instructors so that she can help answer some q a in the chat as well okay promote the panelists and then let me share a new screen okay so I think at this point you should be able to see my desktop with my Mobile screen and then my instance right so last Academy all we did was we created this very simple list screen that shows me my critical task right and all I did was build a list screen with a record screen uh with some details um and this was using a starter template now if I want to create a template completely from scratch I can get started by jumping into Mobile card Builder we'll give this a second to load thank you and I think I'm going to create a very similar car template here um something that you might not be aware of um you can also apply uh card actions here so um for example this list screen underneath for my task this if there is like a an action that users uh will execute very frequently or you expect them to use very often you can just associate directly to the card so that saves you one less tap right and so this task for example allows you to navigate to that location directly from my task and I don't even have to jump into that record screen to do it saves you some time saves you a tap and I can do the same thing using a custom car template so um I'm going to click down here underneath all templates and there's a new button here that allows me to create a new template I'll go and give this a name also call this critical task custom template um and this will be my template for P1 YouTube me okay now to get started with your template it's always best practices to um to create a con to containerize all your components um so I like to start with a container and it helps to have an idea on what Fields you want to display and I think for this template I want to display I don't know three Fields with a card action in the very bottom and how I imagine this being displayed is I expect one field here one filled there one field there and then an action at the very bottom so I'm kind of imagining four containers right here right one two three four um and the purpose with containers will allow you to adjust your margin properties a lot easier instead of applying margins directly to you know the the text or the button themselves it's best practice to apply any property to The Container you'll just have a much easier time managing how your Fields will display on your cards so um I've created one container let's go and create another um and I actually want to show two Fields um I want to show two Fields let's show a a number field and then a priority field in the top right so I'm going to create two more containers uh left and right and these two containers will contain the two Fields because I expect to apply a margin that will apply spacing between those two Fields okay so this is this is basically my first row of fields underneath that I can create another container for my short description so let's create after our create container I can then create a text field there and we'll also put a text component in each one of these containers right so this again this will allow me to apply my property configurations like height width I'm sorry not with uh my margins um property configurations directly to the container rather than the text element themselves and since I only want one field here and in my second row um I'm only going to apply one container there uh let's also create a third container for let's say that I want to show state um and so we'll create a container and then we'll apply a text to it um and then let's just start with this for now um so this allows me to show four Fields after I get this display on my mobile app I'll then add a action uh to it at the very bottom so let's start with this we'll save this let's say that this is my very simple template that I'm going to go for that shows me four fields if I save this as is uh you'll see that it's not going to display exactly how you want it um so let me show you what that looks like now if we go back to my instance and we open up mobile app builder since I already have a list screen built out all I need to do is now associate that card template that I just built and to point this existing template which is using a a default template remove that default template and point it to the new one okay so I'm going to jump into the field service mobile scope and I'm going to open up this list screen which is called critical task I think I called it critical test sign to me um and then I can go and ahead and jump into the screen segment which will take me to my stream and then my list item config which has my card now it's not the card that I want to change it's the template because the card is where you fill out the fields the template is where you built your template with all your different components whether it be a text a button a container or something else and so I think I need to click into the card which will then show me my card template here it is so this card is now inheriting whatever this card template that you selected which I selected template one which is a starter template let's go ahead and remove this here and I'm going to change it out for the one that I created which I called critical task custom template let's apply that now let's go ahead and save this so because my card already has some Fields uh assigned to it right like number priority short description is going to try to apply some of those pre-existing fields to this new template that I just pointed it to and so let me go and show you what this looks um I'll refresh the mobile app and then open up that list screen so now you can see there's four fields on this but it's all scrunched up right um this is kind of where we have to do some adjusting uh aligning and moving things around so that looks good on your mobile app so we'll now go back into a Mobile card Builder to my template and then start adjusting a few things here um first is I'm going to go into this top left container and add a left margin so that I can apply some spacing between the first field and the second field um actually I'm noticing that is this the short description yeah this is the short description so this isn't even the field that I want to be in the right uh spot I actually want the short description to show up as the second field so let's go back into my card app builder actually and then instead of uh adjusting the template let's go back to my card itself with list item config and we'll open up the card and then we're going to jump into the Mobile card Builder and see what's going on um so you can't have multiple card Builders up at the same time on your instance so I think this one will oh I guess it works okay never mind um so it looks like I've tried applying a priority in top left for subscription top right all I need to do is just change these fields to the fields I want so I actually want this to be number and this to be priority and then this to be short description and then there's a state which is fine and we'll go and save this so let's go back excuse me let's go back to my little lap and refresh um this and see if the changes were applied okay so now I at least have the fields that I want now we go back into my template and start adjusting so that it looks better um again I'm in the template now and I'm going to apply a margin uh to the right actually I want to apply some spacing in between so let's give it a right margin of I don't know let's give it margin of 200 and see what happens and then we'll refresh this oh so it looks like it's not quite there yet because um some of my um party fields are showing as dot dot dot that means I pushed it a little bit too far and what you're going to start to notice is you're never going to get your margins perfect um on your first try it's a lot of playing around with and trying to you know play with the properties see what looks good um it might take you a few configurations um but it's it's work um it definitely will take a few tries so let's go ahead and adjust this to maybe um steel margin 180 instead let's see what that looks like and then we'll refresh all right man hopefully this will look a little bit better so that at least all the texts will show okay so now at this point I I can at least see all of my um values without a going dot dot I think this is a bit spaced a little bit awkward so I could probably adjust it one more time to maybe 185 or 190 and it should like let's do 185 and then we'll leave it like that but I think the point here is you know you're gonna have to adjust a few things based on what Fields you select um and it might take you a few tries to get it to look how you want it to look okay but um I think you'll have the best experience by kind of containerizing everything so that you'll um and then you know you can do like container directions alignment and so forth um it'll just be a lot easier to manage using containers so let's refresh this one more time and see what this looks like and then we'll move on to some of these other adjustments okay so I think that looks good enough for me for now um I have a question from Paul um Paul I'm going to allow you to talk feel free to ask your question and unmute yourself yeah I just uh wanted to know if you can like write a line the you know instead of having it using the spacing using a having it be a all the way to the right of that container the um priority uh what did you mean uh right along uh so that the l and H are on the same side on the right side instead of on the left side you know it's a right now the two and ones are aligning so if the what I'm talking about is like the right side of the oh the right property yeah that aligns to the right and stuff I tried let's see so I think what you're uh mentioning is can you do an alignment to the right um I tried playing with a couple of these properties earlier I need to reach out to the card Builder PM because this alignment isn't quite working the way that I want it to so let's give it a try so for example you know instead of stretch if we apply to right alignment will it align on the h l like um Paul mentioned we say this I don't think it's doing anything I don't know if it's because of my instance or something else I need to investigate but that's why I wonder if that is a if that is a like the text box property instead of the container property I see so it looks like that didn't do anything let's see if we give it a alignment on the text property themselves give it a save that worked the value shows on the right so you know that's what's weird um so I tried a lining on both the text and the interesting container it didn't do anything I'll investigate it's likely something that's wrong with my own instance um I think I've seen this being tested on another and it did work um so I just need to investigate further but great question Paul um okay uh but so far what we have I think looks good enough I just want to do is also apply some sort of margin between uh this first these three Fields here um the number of short description and state they're all squeezed a little bit too tight so what if we added a a margin of 10 between each one of these and I'll apply a margin between these three containers here so now you'll notice why I created containers for my Fields it's going to be much easier if you have multiple fields on on row you'll just be able to apply one margin on the container itself that might have groups of fields rather than each text component so let's do a bottom margin for this first container of 10. that'll give it some spacing and then we'll do a uh a bottom margin on the second container as well and I think that should space it out so that looks a little bit better so let's do a quick refresh and that looks a little better now I think the most important field usually on a task is usually the short description right it's kind of not standing out to me but what you can do is for the fields that are most important on your card you can actually adjust the appearance so right now this font or textile is currently a subhead let's actually make it like a headline or a title to make it pop up more maybe have it bold um you know you also have other options like change the text color do you want the short description on multiple lines um and so forth but let's see if this is good enough give it a quick refresh and then we have another question from Anonymous in the Q a can we configure the demo version of the new higher onboarding experience um I'll answer this in two parts first is we are duplicating the onboarding client from the App Store so if you're talking about the App Store and you look up service onboarding um that client is depending on being deprecated in the next couple releases however um so this is what I'm talking about sir onboarding uh this client however we're taking all all these workflows and it's being um transferred over into the now mobile app uh it just didn't make sense for a new hire to install a completely new app for a couple months while they have that new hierarchical right because after those two months or however long it takes to to onboard them they'll have to delete that app eventually right and then they'll end up installing the now mobile app for all their other employee related tasks and so forth and so it just made more sense to consolidate the onboarding workflow into this now mobile app now can you configure a demo version of it uh the answer to that is yes if you have your own instance and you're currently entitled to the onboarding workflow um you can actually install the plugin it'll give you the out of the box experience and all you have to do is you know install mobile app builder which we showed in the last Academy because that plugin will also install a Mobile card Builder and then you can start playing it with uh with it however you want um so you know you might see some sort of experience like this and so you can just jump into it and start adjusting as you like okay hopefully that answers your question um going back to agents I think we were checking to see if short description were we able to bold it so there we go so now the font uh or the textile is a bit bigger it stands out a bit more and it's not bolted okay um the next thing I wanted to do so these are very simple text components um what if I want to add like an icon uh I think very commonly customers like to show you know the assigned to Avatar or maybe the open buy caller um that can be done let's go ahead and delete this State field because I don't have too much real estate I can only really squeeze five or six Fields Max um if I want this card to look good so let's just say that state is not an important field to me um oh I'm currently in the card template so uh why is this not deleting uh let's go ahead and close this out and then try reopening card Builder what's going on uh charity can you still hear me is it an internet um vlogging a little bit I can hear you um it's kind of like cuts out a little bit uh but it that might be on my end only I don't I'm not sure because my internet's been wacky gotcha okay let's just uh let me try to reopening this see what happens oh gosh okay I think I'm back um internet stable uh so let's go ahead and jump back into oops for it to call Custom template uh again let's go ahead and delete this state text or actually instead of deleting uh what I'm trying to do is I'm trying to add an image type so let's add an image type to the left this will be um let's select this Define this field as the openby color and this will display the caller Avatar and then this will show me my caller name okay um to get the image to display correctly on your card you're going to have to adjust the height and width and usually I think by default I like to apply at 25 height and 25 . the way you kind of get this little circle that shows up and I'll look quite nicely on my card um you can also make it you know apply a corner radius so it's more circular depending on the image that you use and also change the image scaling to fit or fill I'll leave it as fit for now um and so that these two Fields aren't scrunched together I'm also going to apply a right margin of uh like a little right margin and that should be enough spacing for it uh and then we'll go and save this okay so anytime you kind of make a change on the card template you have to go back into your card to make sure that all your Fields um are and we open up the list item config open up card and then make sure that my car looks good okay so basically you try taking that State field that we you know to find it earlier and moved it over here I don't want this to be State I want this to be the opened by whoops I don't want to Dot Lock I wanted this to be opened by okay so this will be the value the name itself and then we'll also defined uh the open by Avatar I think it was already defined for me I'm not sure how I did that but just to make sure it's correctly selected there we go okay so now if we save this and refresh on my mobile app I should see the Avatar in the field itself um this is taking a little bit just because I think I'm currently my internet connection isn't too great at the moment what's going on um let's get off that I'm going to close out of agents and then just jump back in give it another refresh uh while it's refreshing C is there any questions we have a question from Liang and she's asking what is the possible issue when I click on a request under my request nothing happens I haven't done anything yet it should be out of the box before I could open the requests and see all the information about requests Lane I'll get back to you on that question um I think I have the answer for that I'll get back to you in just a second let's take a look at my list screen real fast oh and there it is okay so now you can see that um I have my open by caller app Avatar as well as uh I'm not sure Wes is open by it I think uh this oh it's because it's currently selected as field label so it literally just showed me the column name of the table I want to change this to Value save that and notice how my aperture is currently kind of squared um if your original image file is is you know some sort of square or rectangle it'll show it as this as the 2525 um uh uh adjusting that I applied earlier I can actually make this circular and I'll think I'll look a little bit nicer if I go back to my template and give it oops oh my God where's my oh here it is okay um if we go back to this image field there's a property for Corner radius uh I don't know what the value should be but let's give it a corner radius of five for example and save this I think I should round out the edges um we'll give it a quick refresh oh man it's slow today okay um maybe I can answer the link question in the meantime um Liam you mentioned here I'll unmute you and then you can just ask me directly we can just have a conversation um I want to ask you if some questions that might help me understand hey so I have to now mobile app yeah and when I go through my requests and I click on any of the requests it doesn't nothing happens it used to open and I can see the details of the request I can see the states and the comments but now this nothing happens you're saying that you're seeing no data or what exactly are you saying um nothing happens so if you go to my request for the seven year oh man my averages this is my internet what's going on I think it's loading yeah so we try to reconnect never mind just kidding we can't do that oh boy okay well uh the first few things that um popped up to me is so did you make any changes recently or it just kind of happened um I haven't changed anything it's very weird that they are very old requests if I click on them it will take me to the you know the details of the request but the new ones it just nothing happens it's like when you click on it it's not a touch screen it's nothing happens oh yeah so it would not take me to the if you click email server is done it will take you to the details of the incident right right but on my mobile app it doesn't nothing happens are you on a developer instance um did you upgrade recently yeah PDI the nearest version It's just out of the box right uh what I would recommend is doing a plug-in repair um you can just reset it back to out of the box have you is this like an older developer instance where you upgrade it from like Rome to um yeah Tokyo and was this upgraded recently I can't remember I think maybe a couple months ago okay so maybe that between that upgrade maybe something happened um one is I would require the plugin see what happens if that fixed it if not then try opening up a a case task just so that the app owner can get a can kind of investigate and see what happened okay okay so actually they're just um create a case on the um sorry in like a community post or something uh uh can you or do you have the ability to create cases for the account teams to to look into oh yeah yeah uh but but definitely do the the plug-in repair first the normal yeah yeah okay thank you um I have another question asking about terms and conditions uh for now mobile uh let me get back to that I think there's another customer that asked that exact same question but let me follow back up with on that in just a second okay going back to my Agent app okay just to save some time I'm gonna do some last configurations just to show you the rest of everything um so my image and value should now look good um the last thing I want to show you is how do I add like a like a card action there is a component that allows you to add buttons to add a button here um this button can be any action um any write-back action that allows you to update a record right it has to be a record type of action I don't think it would make sense to show up on this is like create some new task um but you know to be able to take actions directly on this record itself you know work order task five what do you want to do with that it could be any function related to that right navigate to the task to the location edit the record and so forth I'm going to use an out of the blocks function let's have this button display as edit task so that the um agent can directly edit the task and you know change the description or whatever they want to do with it directly from the card itself so uh let's go into this button component um and I think the first thing that I want to do is I'm going to change the format from label to label and icon you have a few options here right the bond could be in just Nikon it could be just a label that says edit I'll have it display both um first I'm going to change the label from button label to edit and then there's some free defined icons that you can select from thankfully there's already an edit icon here um if you're wondering you know can you upload your own icon to use the answer that is no unfortunately not today uh we only have predefined icons that you can use for these buttons on cards okay um and then let's also give this a height and width of um let's go ahead in with maybe 30 and 60. and that looks okay and then uh it's going to ask you know um single or multi functions so if I tap on this you can actually have a button drawer so if you want multiple actions to display one of these are Taps on this edit and I want both edit and navigate to location there that's something that you can do as well I'm just going to have it as a single Standalone function um I'm going to select the an out-of-box function for edit I think I renamed it to FSM so I know it's the correct one and then you can also change you know the button appearance do you want the font to look bigger smaller so forth and then also I can change the background colors to make it stand out a bit more let's give it like a maybe kind of a grayish background and then also have and of course you know if I want this to show up on the right side or in the middle you can apply some sort of margin um and have it move around however you like but at this point I think I should have all the fields that I want as well as button that allows me to edit the task directly from the cart so let's go and do a refresh now oh one thing I also have to do currently in my list screen is showing up as an icon section uh card actions only apply to lists that are showing up as item sections right so let's go and change this um well actually no it shows up here too uh it just makes more sense if it shows up as a item section uh it looks like I need to also add like some sort of margin between the image and the button so let's do that here we'll do a margin bottom of 10. I should look a little bit better foreign section so we'll go back into Mobile Builder uh I need to open up the my work launcher screen and then scroll down to launcher sections so we're going to create a new launcher section here let's do or record and then you know we can critical task we'll ignore some of these other settings and then choose a destination screen uh in this little pull from new destination screen foreign critical test icon doesn't matter we'll give it a random icon and then actually I shouldn't need to create a new destination screen let's go back to launcher screen here critical task I should just be able to select a pre-existing one I'm not sure oh there it is okay so just lagging uh critical test sign to me and then we'll save so now at this point let's go back to my launcher screen and uh let's detach this uh list screen here from my task my work otherwise I'll just be a duplicate and then we'll save oops save MC record has an invalid input that's weird let's go back and the question earlier about is it possible to create terms and conditions pop up on the normal lab where a user is not able to click on any other tab um so if there's no feature specific mobile features to support that however there is like a creative workaround that can be done uh I would recommend that you open up a community post uh because it is quite a long configuration I think someone from the mobile team should be able to follow up on that so please open up what community post and then um we'll get back to you on that okay uh let's open up my work again and then go back to my task oh whoops wrong one uh launcher screen my work and then get rid of critical task and say there it is okay I don't know what happened but we can now remove it uh let's give this a second to reload and this should show my final configuration I apologize for my slow internet today I'm not sure what's going on but uh my instance should not be this low I think it's just an unstable internet connection let's do a quick close and then reopen and then refresh okay any other questions about this as well okay there we go okay so now you can see um I have my fields that I want the Avatar looks like it's not displaying exactly how I want it on this card but if you look at it on this card it looks a lot better um if I wanted to display uh better on this card so notice how this card is slightly smaller right than the list screen itself so these are things to count when you're building out your templates that if you're trying to show it on a record section that you'll have to adjust um your properties to make it look good here um but if you just want to show up on an icon what I have here looks fine okay and then I can do a one tap to edit my task I can change the sort of description and be able to submit and no be able to change that okay but that pretty much wraps up a very quick introduction on how you can create custom card templates from scratch um if you want us to Deep dive further definitely let us know in our post session surveys if you want us to do like a a second session on this to do to cover more best practices and so forth um but with that being said [Music] um we just a reminder that we do upload all these sessions onto YouTube which you can find on our mobile community site so make sure to subscribe to your remote Community forum and register to our App Academy series we'll have another session in two weeks from today and if you register to our series you'll get the latest notifications on upcoming topics I do want to mention that we did migrate some of our Academy post recently with uh the whole Community revamp you can actually find our newest Academy um series if you go to the home site scroll down to articles um or our mobile app Academy is now being displayed as an article if you scroll down here you should see an academy here and you can see you know this live ad build getting started the Builder part two January 17th this is the most respectable um anything that's not this should have been deleted so make sure that you're registering to this one to get the latest updates um you can also see them as events I believe on community so if I go back to home and scroll down to the very bottom okay maybe not the bottom uh scroll down to events these events are created I think two between two to five days before before the actual Academy so you can see that you know there's currently an event in progress um it's just a lot more reliable if you use the article to follow for updates so um that's where you can find us um but if there's no other questions let's go and wrap up for today thank you all for joining us today and I hope to see you again in two weeks thank you everyone