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 i also have ian kinnear here today from the mobile team from servicenow as well and we want to give a warm welcome to everyone joining us live here today um 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 we do host these academies every two weeks at 10 a.m pacific uh in which we'll upload the recordings to youtube on the servicenow community channel before we get started just want to point out a few resources that we have available um if you are new to mobile we recommend you check out our some of our self-announcement resources such as our mobile guide books and white papers that you have on the mobile community site there are some new articles that we've released in the past couple weeks so definitely check those out but you know we also have a plethora of other resources such as labs mobile trainings on that learning as well as our playlist to all the previous mobile app academies additionally if you like sessions like these our servicenow teams also host academies from hr service delivery to platform foundation platform analytics virtual asia and many others um and you can find these series in their respective community forums by navigating to the forum tabs um but with all that said let's go and get started with today's topic we're going to show you how to configure your actual icons on your launcher screens so that your users can get access to actions that are much more discoverable and have quick access to their most commonly used functions directly on their landing pages um just to quickly review for today's schedule this will be a quick 30 minute session um we'll start it off with a quick 10-minute overview on what actual icons are and what you can do with it then we'll jump into a 20 minute uh walkthrough and then we'll wrap it up with some q a but with all that said let's quickly dive into a quick overview so actionable icons this is a feature that we released in rome that enhances your icon sections so previously with icon sections you can display icons on your ui sections right these are ui sections so that you can navigate to different screens like a list a map or maybe even a url screen but we released an enhancement in rome that will now allow you to navigate to another launcher screen or to be able to launch a function directly from that icon right so if i put an icon here you can actually navigate to different tabs so instead of the users clicking on tabs it can take them directly to a different landing page experience or you can have it you know be a native action if you want to create an icon to launch virtual agent that's totally possible create a new record all that is possible through icon sections in room okay um something that is important to call out uh this capability is only available for new icon sections that you've created on a roam instance or beyond um and so likely if you are using an out of the box app um it's likely that you are using one of the legacy icon sections um uh but uh to be able to use this new capability you'll have to create a new icon section and then migrate some of your screens over which is all very quick and easy to do so let me go and show you how to do this now um but the use case for today is we're going to be working inside of the my work launcher screen for the field service mobile asian app um we're going to make our quick actions a bit more discoverable and we're going to create a new icon section and move all of our pre-existing quick actions over to this new icon section so that's the first use case the second use case is i'm also going to create um some icon sections that will navigate to other landing pages within my field service app and this is going to be helpful if you're managing many different monster screens and you're trying to consolidate these experiences into a single landing page so that your agent has quick access to everything that they need on a single screen so think of like the uber app for example right if you launch into that app you can go to ubereats you can go to uber rides all that is done on a single screen and that's a capability that can be done on our apps as well okay so let's get started i'm gonna share a new screen and share my instance okay so you should be able to see my instance now let me zoom in here so that you can see it a little bit better um and the first thing that i'm going to do is i'm going to show you how to convert some of these quick actions right at the top right you see there's a little ellipsis we've heard from many customers that these actions at the top right aren't as discoverable and uh they're worried that these actions might get missed uh any time they're onboarding new users onto this new app and so they actually want to take some of these actions and put them directly on the on their launcher screens um so that they're very apparent easy to see and easy to tap onto less taps too right uh so let's go ahead and migrate these three existing ones and then put it into an icon section okay so the first thing i'm going to do is um i want to show you what a legacy icon section will look like and i'll show you how you won't actually be able to see this capability unless you create a new one so i'm going to launch into mobile app builder um and i'm also going to show you something on the platform so that you can easily identify whether you're using an old one or a new one okay i'm going to jump into the field service mobile scope okay and the first thing i'm going to do is i'm going to look up whatever this launcher screen is and this launcher screen is called my work in the field service mobile app so i'm just going to look up my work and there it is we'll jump into it okay and then immediately on this launcher screen if we scroll down you'll see a bunch you'll see um the launcher sections which are all the different ui sections that are attached to this launcher section right i have one media section one icon section a vertical icon section and then just a list screen so you can see those are the four here um let's say that you know this is a pre-existing icon section it's a legacy one it was built out of the box by the field service team if you were to try to add an action to this icon section let me show you what will happen so i'm going to open up my work which is this ui section here if you scroll down all you see is the ability to add screens screens like list maps um urls and so forth right but there's really no ability to add functions here um and you can see at the top here it says legacy icon section so this is your indicator that you are using the legacy one right now if we were to go back to my launcher screen and create a new ui section right i'm going to go to launcher section and create a new one i'm going to select icon click continue um let's go ahead and name this uh this will give me access to all of my actions so let's call it uh we'll call it quick actions um and then uh it can be a horizontal that's fine um and then it's gonna ask me what are um these are the launchers that the screens that the user goes to or the functions that can be executed so this is where i can set my destinations down i'm going to create a new destination and it's going to give you three options instead of just screens the enhancement in rome gives you access to be able to launch into another launcher screen or a function so let's go ahead and create a function destination i want it to be able to pull up launch connect to be able to uh for my agent to go off shift and then for my agent to be able to go on break um so let's do this first one here for launch connect call it launch connect the function should also be called launch connect we're just pulling this pre-existing function that already lives on my instance um launch connect oh maybe they called it something else there it says called connect um and then i can give it an icon i'm gonna i'm gonna choose a pre-existing one i'm sure there's like a chat icon in here somewhere um we'll just scroll down and see what's available comments we'll use this one okay and then we'll save so what's going to happen here if i refresh i should now be able to see my first quick action okay and i can launch into it by directly tapping into it and there it is okay so let's go ahead and migrate uh these other two as well so i'm just gonna go back to my launcher screen and then create two more or go into my quick action um let's set the order of this to let's do 10 so that it's below my media section because it looks kind of wonky right now and then we'll save there we go so now i have quick actions underneath the banner um so now let's go back into my quick actions and create two more and create the function we can name this what is the action called off shift um function off shift now when they associated these functions to the quick action these are actually the name of this is pulling off the um the title column um and so if i were to look up off shift you won't actually see the exact naming you actually want the name of the function in which the field service team built and looks like they called their action item asian offshift okay if you ever want to double check what the function is i would just go into the quick actions and see what that function is called so you can either do it inside a mobile app builder or on platform i can do it really fast on the front uh on platform i'll just look up launcher screen uh and i know that this is a quick actions that lives on the my work launcher screen uh my work for field service um and then the quick actions um you know off shift let's open this up and see what functions associated to this quick action button and you can see the function name here okay so that's how you figure out what the name of the functions are if you're not quite sure um and then let's give this an icon we'll give it an agent icon let's see if i can find another one agent status perfect okay and then we'll save so now if i do a refresh on my what i should be able to see that second one as well and this will you know one tap and immediately the action gets executed this is a native action okay i think this is a smart button that we built and so that's why it takes you to a web screen um and then let's migrate over our last one for on break we'll go back to my launcher screen jump into our quick actions launchers section and then create another destination for a function and then we'll name this one on break and then choose that pre-existing function which hopefully is called on brick prefix and then we'll select the icon and save and now i've quickly migrated over all of my whoops what's going on here um let's give them an order so maybe that they're not competing with each other so let's do 10 20 and 30 and then save huh that is quite funny uh let's do a hard close and re-event oh he did why um it's because my status is because i launched the uh executed the action earlier the agent is currently on break and so you won't see those actions again i believe there is a condition that was applied to these functions that it will hide those actions um if the agent is already on break you can't execute that extraction twice so let me go and actually go back on shift and then now you should be able to see those functions there it is okay so that just means my condition on that function is working properly okay um all right so that is how you can associate your quick actions on the icon sections uh the same steps are applied if you want to launch into different screen launchers so let's say that i also want to be able to create an icon section that takes me into inventory articles in my team right it's going to be the same steps but i'll show you a quick example and again this is going to be helpful for mobile experiences in which you have you know maybe dozens of tabs and you're really trying to consolidate this onto a single screen you know one quick place where they can navigate to everything that this specific agent needs okay so let's go back to our launcher screen and create another icon section um something that i do want to mention is as you upgrade to san diego and beyond we also release an enhancement that allows you to control your rows and columns on these sections and so if you wanted eight icons you know four by two um you have more control over your rows and columns instead of just having a vertical and just a horizontal one and so as we move over to san diego you'll have better flexibility on how you want these icons to be displayed okay so let's go and create a new launcher section here and this will also be icon and we'll call this one um [Music] call this agent uh agent i don't know experiences i'll come up with another name if i can pick something better ian what do you think if you can think of a better title uh to navigate to different screen launchers go for that for now okay you can think of something better let me know um we'll create another icon section and this will this time we're going to navigate into a launcher instead of a function so let's create that um and then let's say that we want to be able to pull over inventory so we'll call this inventory we'll select the inventory launcher and then give this an icon okay so now if i refresh um let's apply an order so that it goes below the banner let's give this one [Music] an order of one and then refresh okay so now if i were to tap into this it'll directly navigate me to that launcher experience okay i don't have to tap on the tab to go there so if i want to hide if i only want one single tab and still be able to navigate to these three i can hide the rest of these right so let me go ahead and configure the rest of these real quick and show you what that experience could look like so we'll go back into asian experiences and then also create two more uh two more launchers this one will be for our article um and then we'll create one more for my team oh i just realized uh this whoops uh let's go back to that my team is actually a uh itsm oh nevermind wait let's do that again let's create a new destination launcher my team okay so yeah this is not even relevant so i'm gonna take this off completely because this lives on the iq sub scope and i don't care about that one so um let's see if there's another one that i can pull in um [Music] let's say that i want to pull in catalog services this is from the now mobile app but again uh we definitely get questions where you know folks will ask us is it possible to consolidate experiences between the now mobile app uh and to the asian app and the answer to that is is uh definitely the you can't do that um if you know ninety percent of your use cases live on the agent app and you just wanna pull in a few experiences from the now mobile app that is totally possible and i'll show you this an example now i'm going to pull over the catalog item workflow and just put it directly into this icon section okay [Music] so now this agent gets access to your kbs as well as your inventory and then also be able to order catalog items if you wanted to and then we'll give it an icon for service and then save so now if i refresh um i'm now able to access any one of these landing pages on a single screen right so this takes me to my catalog and i can order one of these services okay or i can go to inventory and be able to do that as well um and then you know if if this is the approach that you want to go at it then you can you know hide these tabs right so now we only have one tab that we're working inside of so i can go back to um i'm gonna go to home let's make sure we save our work uh i don't think i need to save anything it's fine so now we'll go to our mobile app configs because we want to be able to configure our navigation tabs we'll go inside of agent give it a second to load when you open up the mobile app configs it basically tries to load everything that's why we don't typically recommend starting from the very top um if you know exactly what you want to configure whether it's a screen a function then just go directly there so we'll go to our navigation bar and then uh we'll disable uh we'll make sure we're configuring in the right scope and then disable inventory here i'll take off that tab and then we'll also take off the my team tab since that's not relevant to me at all my team and then we'll take off the articles tab that's a lot of articles okay maybe it's faster if i just scroll down there it is okay and then we'll save um and i think if i do a refresh i'll have to do a hard close to get those articles uh refreshed or the tabs to refresh oh what does that say um internal unable to delete record security restraints uh uh there's an acl that's preventing me from doing this um let's try that again what did not work let's get rid of inventory and then try to save that huh mobile app builder doesn't like this um i'm going to try to bypass that and just go and do this on platform i'm just going to look up launcher screens uh no actually client navigation bar uh the agent now navigation bar and then from here i can also delete it so we'll get rid of this articles and then my team okay so now if we refresh um you can see those are hidden now uh maybe i deleted the wrong one for this one let's find the other my team looks like there's one more if i get rid of that david that one looks like it was a part of field service mobile oh so it was part of field service okay well um looks like we were able to get rid of all this now um i'm not sure why this is called my team let's go back into mobile app builder and make sure that we named it properly um we'll go back to our launcher screens for my work and then rename this to services oh yeah looks like we accidentally named this to my team let's actually name this service catalog there we go okay and of course i can also update these icons in their colors um but that's we can probably skip that uh but that wraps up what i wanted to show for today um let's go ahead and take a few questions here um ian are there any questions we want to highlight sure yeah we had one question about adding the company logo to the top left of the screen and i i did answer that one in text as well but just in case anyone missed that we cannot currently add an icon to the top left of the mobile screen but if you look at david's mobile screen right now he's got a media section with an image for field service mobile so that's a great place that you can you know throw up a company imagery um and you know with description um that will display right there on your hometown that's what i would recommend for that awesome um and there's also other we have a dedicated mobile academy that shows you all the different things that you can do in this banner section um not only can you use a media section but we also offer the capability to create campaigns so you know if you have announcements or um anything related that you want to promote that is another capability um and it can be a scrolling carousel too so if you have multiple ads or promotions or announcements users can scroll between each one okay any other questions before we wrap up for today um i just want to um piggyback on that that while there isn't a way to necessarily have an icon in the upper a persistent icon in the upper corner with mobile publishing you can set the icon for the launcher application for the app on your on the phone and the splash screen to be branded and you can set the theming colors to match those of your organization yeah and just to clarify uh by that icon um i think tradie you mean this guy icon here right correct yes yep um and that is a premium license that um for mobile publishing and that's the route that you want to go down so if you want more information on that definitely follow up with your account teams uh looks like we have another question from paul this campaign is available for all mobile agents how to remove the demo account link from the app um so if you're paul if you're asking about this button here try with the demo cap um assuming that's what it is um is there an ability to remove this uh ian i don't think there is vessel unfortunately i'm i'm not aware of any way to remove that yeah that's unfortunately it's not a supported configuration however we do recommend that is something that is um important uh definitely let us know on the idea portal on mobile community that way our internal teams can kind of follow up on that and definitely let us know like why um [Music] you know what is the use case around it okay uh another question um sorry david go ahead go ahead i just i'm going to mention that there was another question in the q a about help around the loading performance of catalog items so those are going to take a little longer to come up because they are rendered using web views used in inside of browser screens in the mobile app so you know that's something where there's a lot more involved than just the native mobile app so i definitely encourage you to you know check out the performance even outside of mobile just you know browsing to that same page you know on your browser and then taking a look at you know what's going on in the instance if the catalog item has you know a lot of variables on it or scripts that are running and so on and taking a look at optimizing the performance another one is if you have a an image on that catalog item that's large that needs to load sometimes having a smaller image in file size as possible without reducing the quality uh noticeably so a couple other things to check there um and then i would definitely follow up with um the now mobile team too to kind of get a road map session around some of the upcoming uh updates to employee center um because i think that's kind of where servicenow is moving forward with um a consolidated uh employee experience experiences i think they're moving away from the service portal and moving on to this new product called the employee center which is more of a a better self-service experience for employees uh and with that roadmap um overview you'll kind of get an understanding of how they're updating their experiences for service catalogs for kbds um and how you have more control of on that in the future there's another question on uh if you can use update sets to capture your mobile development and you can from a training perspective that's actually how we build out the training so you can export update sets of where you are in the development process if you want to save it or move your build from a development instance to a production instance you can export those there are applications so you can export the actual entire application that you create or existing applications that you've modified and then import them as update sets into another instance i also think we have an article on if you go to mobile community and click on successful training i think there is a video um on this somewhere yeah so publish your application to an update set if you click on this link um there is a video that shows you as well as um i think there's an article as well find out more okay so one of the things i often sorry sorry david but just to add one of the things that that i often do that helps me is i will update in a separate tab um on the platform ui sys underscore update underscore xml so the xml updates table and that way i can kind of track like make a filtered list with my user id and track what updates i've done across all applications and update sets as i'm working one of the things that happens sometime with mobile especially if you're working on like a launcher screen that that brings together things from different scopes is you can jump around you can need to jump around between different scopes a fair bit just depending on what you're doing so that kind of just helps me to understand what changes that i've made so i make sure all my update sets that i need to capture are noted awesome cool um any other questions otherwise we can go and wrap up uh thanks everyone for joining us today uh if you found this session helpful please let us know in our post session survey um there's gonna be a quick couple questions that just ask you what topics you'd like us to explore further in the future if update sets for example is something you want us to dive deeper into let us know in that survey um but if there's other topics then also let us know if you're interested in any of our past mobile app academies we do record these and then we upload them to youtube and we also post them on the mobile community site so make sure you register and subscribe um so that you can get notifications on all the latest updates but with all of that said thank you all for joining us this week and we hope to see you again in two weeks thanks everyone