good morning everyone and welcome to mobile app Academy 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 and I want to give a warm welcome to everyone joining us here live today um if you are joining us for the first time welcome to the session um 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 in which our recordings will be posted to YouTube on the servicenow now Community Channel I do want to point out a few resources that we have available um if you are new to mobile we recommend that you check out some of our self-annalement resources such as our mobile guidebooks and white papers that you can find on our community site and we do have other resources such as Labs trainings on now learning as well as our playlist to all the other app academies which you can find sessions like um mobile agent quick start guide getting started with now mobile and quite a few others but just to quickly review for today's schedule um we're going to start off with a quick overview our goals for today where we're going to implement and how to get started and then we'll jump into the exercise in which we will be I'll be showing you some mobile icons uh enhancements that we introduced into San Diego okay uh and then we'll open up to some q a uh if there's any questions at the end uh but with that being said let's go ahead and jump into this um so in San Diego we introduced a bunch of new features that it greatly improves some of the things that you can do around in-app branding um with the introduction of the next experience UI from platform we wanted to make sure that if customers wanted alignment between their platform design and their mobile design that they would have the the capability to do so right and so we introduced some icon section enhancements in San Diego you now have the ability to use custom images on these icon sections in fact there's now three different layout types that you can pick from you have your standard serves now library of icons on the left right there's like 30 plus icons that you can pick from today but we also introduced two new ones uh one which is a label layout which just shows text on top of a colored background and I'll show you how to configure that but if neither one of those appeal to you then you also have the ability to upload your own custom images so this is going to give you a lot more control on how your mobile landing pages will look and feel like and so today I'm going to show you how you can quickly upload your own images and then apply them to your icon sections okay so let me go and get started here I'm going to share a new screen and I will share my desktop here okay we'll do a new screen share and we'll give my instance a second to load but just want to quickly show you what I'm about to do here so this is my out of the box field service mobile app I'm currently logged into Mobile agent you can see that you know I have some screens for my task as well as an icon section at the very top now these are using the default servicenow library of icons right um now if I wanted to be able to upload my own or kind of deviate from this how would I go about doing that um and to start I'm going to show you how to to First upload your own custom images okay so when you're on your instance you're going to want to navigate to this table here it's called sys SG icon uh I believe it's icon images one sec let me check it is this SG icon image that is correct dot list okay so this is the table that you're going to want to navigate to sys SG icon image we'll open that up and here you can see that there's already some custom images that I've uploaded let's go ahead and create a few new ones that I'll upload from my desktop here um let's call this first one let's see what I have let's go ahead and upload um let's do fish first we'll go and name this fish we'll select this image that I have ready for us and then click ok okay so this could be any image that you want um and then I can ignore this image uh Family Table so we'll go and save this I'm going to migrate some of these old icons some of these old screens actually I'm going to take my group task my schedule my task map and let's also do asset lookup we'll take those four and then use our own custom images for this okay so I have one let's do three more um let's go back to that table and create upload three more images um let's also upload um what else do I have here let's do Astro Astro mab cheese file and then okay uh so now I have my second image let's do two more let's call this um charts now let's call this flying it maybe and then we'll select that PNG okay so now I have three images let's do one last one uh we will upload landing and maybe okay so now if I go back to this table um this tree icon images table um you can sh you should be able to see the four that I just uploaded um how do I organize this let's go and filter this let's do last updated uh and then click this to reorganize and here's all the four that I uploaded okay so now that I have my custom images how do I go and apply these to my icon sections um to do that I'm going to create a completely new icon section and I'm going to show you why you can't use your pre-existing Legacy icon sections um so let me show you what I mean by that I first need to find this uh launcher screen in order to be able to create my new icon section so let's go and navigate to launcher screen and I believe this launcher screen is called my work so we'll open up the my work launcher screen and it looks like this is the FSM scope which is the correct one that I want and in the body I currently have two UI sections which I can see here on the left right I have an icon section as well as a single individual list screen here underneath I want to create a third UI section in order to replace this one so let's create a new one here and when you create a new UI section you'll notice that you'll see two things Legacy icon section in icon section well you're going to want to start using this new icon section moving forward if you want to be able to uh to take advantage of some of these icon section enhancements um if you haven't created any new ones just assume that they're all using this Legacy one and this change happened in San Diego so if you have like a pre-existing one you're not going to be able to take advantage of any meat of these new enhancements okay so that's something that I would troubleshoot in case you don't see some of these new inputs for whatever reason so let's go ahead and create this new icon section and give it a second to load uh let's go and give this a title um we'll call this uh I don't know my work and it actually looks uh for me it looks a bit cleaner if I don't show the title since I already know that this launcher screen is labeled my work so let's go ahead and just hide the label um or hide the header um and then let's go ahead and click submit for the display type you're going to want to select icon if you want your own custom icons for basic this is basically just a background image I mean I'm sorry a background color and a foreground color so if you just want text on top of a colored tile then that's what it will give you um no I made a mistake sorry a display type uh basic yes background color foreground color image is for custom images icon is your default service now icons okay so let's actually change this to image and then let's go ahead and click submit and Save and now let's jump into the UI section that we just created for my work okay so let's double check this I have display Type image orientation will leave as horizontal for now we can play with this later and I'll show you what you can do with it here um you can also enable the hide section if empty so if there's no records in uh your screens then it will hide the section completely let's go ahead and create a new icon section destination currently I have an ntui section it doesn't know what screens I want to display yet so we'll need to create four destinations right if I want to replace my group task my schedule my task map and I say look up so let's do that now and uh we'll create a completely new icon destination so we'll click new uh and know that the uh for destinations you can actually have three options right you can actually um have your users execute a function you can have them navigate to a completely different uh launcher screen but in our use case we just want to open up a single screen um and then we can give this a name um let's do the first one for my group test uh in which the screen is also my group task um so for this first one the only thing we want to use is image for custom images this is the default servicenow icons right so you have all of these icons to pick from in the past and then the foreground color and background color is for um for basic okay for image let's go and select the one that we just uploaded uh let's do this first one we'll pick the fish one first and I'll submit that and then also in at this point I should be able to see one single icon section so let's go ahead and refresh this and there you go so I now have my own custom image uploaded um and I'm able to take advantage of this okay let's go ahead and do this for uh do it three more times for my other screens so let's create three more icon section destinations went back a little too far so let's jump back into my work and create another icon section destination I want a screen we'll ignore the other types and let's call this one on my schedule I'll go ahead and try to speed through this really fast um Maybe uh what did I call it not sure okay not sure and then we'll submit oh that's why uh we want my schedule and then save and then we'll do this two more times create a new destination or screen this one will be for charts or for slang for [Music] my test my task map line submit and then let's do one more four uh asset looking or actually SD recently closed task oops and then we'll select this last image here for landing okay so now at this point I should be able to see all four icon uh all four screens as new icons okay so that's how you can quickly upload your own custom images and then apply them to your icon section so what else can I do with this let's go back here I want to show you that you actually have a bit more flexibility on the amount of um columns and rows here so if I change the orientation from horizontal to vertical you're going to see a few other new columns here you can actually control the column count so if I want my column count to show you know only two and then uh the rows to also show just a two by two grid then that's totally possible let's go and update this and refresh okay so this will space out your image a bit more and take uh more space on your landing page I can also change it to you know column count one and a wide column count of three or actually four right and then we'll save that and if I refresh this this is what it'll look like okay so this is a bit sleeker for me I think I'm gonna leave it as this I can also display the fee count so it'll tell you how many records are on each screen so if I save this I should see like accounts right next CDs if I refresh that give it a second to load it might just be my instance I have so many things going on uh and the background of this um let's do a hard close and redo that um okay do another refresh there it is okay so there's my account so you can see that recently closed task three zero records there um but my test map you know I have five records and so you can quickly tell them okay so um let me also show you the other new um uh icon section enhancement which is for basic so if I change this to basic actually I'm going to create a new a completely new icon section to demonstrate this let's go and go back uh and of course if I want to clean this up a bit even further um just if you know if you have a portal experience as a branded portal experience and you might have like some sort of banner you know getting colors to align right now I kind of have this purple theme all the colors on these icons here and the header this is all controlled by theming I already have a themed um uh configured and this was something that was available since I think Orlando or sometime way back but just know that this icon section enhancement will further help you with your in-app branding right um and so let's go ahead and create um a new icon section it might be just faster if I go to launcher screen again okay and then we'll open up my work and then uh let's create a new UI section um again we're going to select the icon section and not legacy okay we'll click ok and then let's go and name this um you know my work but this is for basic display type we'll leave it a horizontal and change the display type to basic and then click submit and we'll go and save that and let's go ahead and jump into this section here and now let's go and I'll just show maybe one um let's create a new icon section destination here and this time when you fill out the form um we'll select for screen uh you know if you wanted uh to display my test map instead of using this image field we would be using the foreground color and background color and it's just asking for some hex values so I have some hex values here on my notes let's code and copy and paste this and paste that okay then we'll submit and then if I do a Refresh on my mobile app it will just display the text on top of some sort of background color Okay um I can also display the count if you display the count it'll look a lot better if you use this type of formatting um so if I go back here um uh display if you count if I save this and refresh oh there it is so you can see that there's five on test map okay I'm curious what this looks like if I turn this to Vertical but I might need more than one um oh so it looks like um this really only works for um horizontal I think uh but because it looks like it just changes the tile back to gray okay so we'll leave it back on horizontal and Save but just know that you now have more options than you you did before with uh mobile icon sections okay um let's go and wrap up this session um by cleaning this landing page up a bit um since I now have these four screens I don't need them here I um as well so let's go ahead and remove these two UI sections and then we'll add a media section at the very top and then I should have my um the very own branded um uh landing page for my work so let's go back to my work screen launcher or launcher screen so if I have in my history launch your screen for my work uh we'll get rid of uh basic as well as this old one and we'll save that and then we'll refresh and there it is okay so um let's go ahead and add a media section just to complete this entire branded experience um I'm going to create a new UI section for media section and this is something that we've covered in a past Academy so if you want a lot more details on more step-by-step instructions on what you can do with media sections definitely recommend checking out our YouTube series uh we'll call this um let's see what should I give it a title of well we'll do welcome to mobile welcome to mobile uh for the headline we'll just copy and paste this uh and then for the image uh you can I can just upload something in the attachment here let's use the charts one foreign and then once I attach it I can now select it as an image and then we'll submit and save uh we'll make sure to make sure that this display is at the very top we'll give it a order of 100 and then we'll move this one around to 200. and then save and then if I refresh um not sure why I popped up the fish let me double check did I select the right one welcome to mobile oh it looks like I did upload the fish one um let's use charts so now if I refresh that looks a little bit better okay so now I have my own very um a very clean landing page for my work for my field service agents and that pretty much wraps up what I wanted to show for Icon section enhancements uh definitely recommend checking out the product docs if you want to learn more about any specific details on you know each one of these uh field values and what else you can do with it uh we'll try to cover more academies in the future if you want us to go a bit deeper there are also card enhancements as well as record section enhancements that we also released in San Diego so we definitely recommend checking those out okay um any questions um and while I wait for questions to come in through the chat I do want to pull up a quick mobile survey if you guys might don't mind um helping us share some feedback on our community experience so let me do a new reshare okay so um this is our Academy Community feedback survey um just going to ask a couple questions on how you're liking the overall new community experience since our um our update to it uh you know just let us know how satisfied you are with the current navigation experience are you able to find what you're looking for right um we used to have a lot of content um in our our last community site with it with this new migration has an enhanced experience or are you now like struggling to find what you need right so this is kind of helpful for us to use this feedback to make the site better for everyone moving forward um so here's a QR code if you want to pull up your phone really quickly and help us take that survey um I'm not seeing any questions in the chat so we can also wrap up very quickly for today but I'll leave this survey screen on Just for another minute and then we'll go and wrap up if no other questions okay so I'm not seeing any questions um let's go and wrap up I do want to mention that today's session is our last App Academy for the year as we ramp up for holidays um however we are going to kick it off at the beginning of next year in January um and we're going to have a whole lot more exciting topics on our agenda that will that we are super excited to share with you uh but until then please continue following our mobile community site to get the latest dates and information and uh thank you for joining us in today's session and I hope to see you again um at the start of the next year for our next Academy cheers everyone