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 excuse me 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 but also do you have ian kenner here today on the mobile team here at servicenow as well and we want to give a warm welcome to everyone joining us here live today um but if you are joining us for the first time uh we do welcome you to the session our product experts are here to provide guidance uh best practices and answer any questions that come up along the way we do host these mobile app academies every two weeks at 10 a.m pacific and our recordings are posted to youtube on service on the servicenow now community channel and just to point out a few resources that we do have available um if you're new to mobile we recommend that you check out some of our self-annealment resources such as our mobile guidebooks our white papers or even our now learning now learning training and we have all this on our mobile community site but we also have a plethora of other resources such as labs mobile training and a playlist to all of our previous app academies which you can find sessions to mobile agent quick start guides getting started with now mobile and we have over 30 mobile app academies that you can check out uh but if you also like sessions like these we also have um our servicenow teams that also host academies for hr service delivery platform foundation uh platform analytics virtual agent and many more and you can find their series in their respective community forums by navigating to the forums apps but with all of that said let's get started with today's topic um we're going to show you how you can configure your empty state screens so that when your list screen shows up with no data you can actually redirect your users to another screen or take action on them to complete those workflows okay and just to quickly review for today's schedule this will be about a one hour session we'll start off with a quick ten minute overview on empty state and why it's important and then we'll jump into a quick exercise which ian will take us through um and then we'll open up to some q a at the end but with all that said let's dive into a quick overview so this is empty state handling this is a feature that we released back in quebec that allows your admins to configure an empty state and that allows you to inform users that the screen that they're on does not contain any data and you can actually customize experience by adding images text or even functions and that will allow you to redirect your users to another screen or maybe you know make them take an action on something such as create a new record when there is no data and just to call out empty state screens are something that will appear on your list screens on your embedded list on a form such as a details or a related list and then they also show up when you use global search so when you search up and there's no records you know you'll get this image that says no items at this time okay but you also have the ability to add functions like you know log this incidental um and that way it gives your users something to do rather than just take them to the page that you can't do anything okay and um to configure the your empty state screens you can apply the same experience across all of your screens you know you can have it apply on your list you can have it apply it on your search experience um and you can have it as a single experience right but on the other side you also have the ability to configure them individually so that if you want different texts and images and functions on a list and you want that experience to look different on search you also have that ability to do so okay so um i highly recommend that you check out our product docs if you want to learn more about it but this pretty much wraps up the overview that i wanted to show for empty state handling um and so with that out of the way i'm now going to pass it over to ian who will take us through our exercise for today and he's going to show us how to configure an empty state on a list thanks david can you see my screen okay yep it looks great let me just sure perfect you can see my screen okay now yep okay perfect and you can hear me okay sounds good all right so in this exercise we'll be building on the mobile agent app with the field service mobile plug-in activated and that's how i'm getting the experience that you see here on my screen and i want to start by showing you the out of the box experience for when no records are returned before we start making any changes so let's just pretend that we're a field service technician here but we're searching for an asset and for whatever reason that asset doesn't exist or maybe isn't visible to me so what does that look like so if you see on my mobile app i'm going to swipe across to asset lookup and i'm going to search for something that i know won't be there tap search and i get this screen that you saw earlier in the slide no items at this time so this screen does the core job basically of letting me know that my search didn't return any records but what if i want to have a better experience for my users by tweaking the message for this specific screen so that when no asset results are returned i get some better messaging or maybe even will show some actions that they can take right from here if they don't feel that that was correct that their search should have returned something so let's walk through how to do that what we're going to do is first create an empty state screen that's more specific to asset lookup using our first using or out of the box template and then after that how we'll see how we can update the template and you know improve further on the ux design so what we're going to do is we're going to mo open our mobile app builder oops sorry and we're going to open our field service mobile scope so we've got our mobile app builder up we're going to click on cards and actions and we're going to create a new card and this card is going to be linked to an empty state record which will then leverage our template so we're going to click card and we'll call this something to help us understand what it is so empty state maybe and asset look up and i'm going to add the word card here so i know that i have the card and not the actual empty state record and we'll give it a description like direct access to actions users can take if no assets are returned for the table we can leave that blank and then we'll go down and select our template and so we'll click choose and i'll search for empty and you'll be able to see the default empty state template here and apply that template so now we're going to click save and we have our card created but it's not going to be linked to anything yet so we'll go back to home and we're going to find our asset lookup screen so i clicked on screens there and i'll filter my list to search for asset lookup and i'm going to want the list screen here and then right on this record that's going to come up here for our list you can see if you scroll down there'll be a section to identify the empty state and this is going to be blank by default out of the box because it's going to use our essentially global default that will define at the app the mobile app config later uh layer rather and i'll show you more about that later on but just so you see if i look at my mobile app again if i do critical tasks or anything on inventory it's all using this by default no items at this time so we'll go back to our asset lookup get that screen back now um looking at our mobile app builder again our empty state i mentioned before that there's a card and an actual empty state record so we're not going to click new here or rather we're not going to click choose here to choose an existing one because we don't have one yet we're in an empty state record we're going to create one so we'll call this our empty state asset lookup and here we'll identify the card so that's what i meant by empty state record referencing the card here we're going to choose and we'll find our card that we created earlier and apply that and save so now we have our empty state record available so let's see what it looks like so far it's blank um which is good it's showing us that we've created an empty state and linked it to asset lookup we haven't actually added anything to our card so no wonder that it's blank so let's go ahead and do that to do that we're going to looking back at our mobile app builder we're going to click on this overflow icon actually we're going to open the card first and we're going to open it a mobile card builder that's going to be the easiest way for us to configure what's in this card so once that opens up you'll be able to see based on the template how the card looks um so here's our setup our container here all of our you know text and image and buttons we can define for this specific template so to start let's throw in some text here so we can see something maybe more descriptive such as just copy something in here and it's not pasting so i'll just type it all we want to say is something like your asset search return no rec results so it's a little more specific to asset look up here for us and then for the value uh for the second text element rather we'll also add some static text so again field type drop down static text and this is going to be like a subheading so something to direct the user a little more if you feel this was an error please open a missing asset request or create a new asset so these are functions that we're going to add to this template later on but let's just make sure that this part is working so i'm just going to swipe down on my mobile screen and now i can see that my text so that's good i'm not entirely happy with how the line broke there but we can again we can look at the template a little later on before we do that though let's add an image up here just to personalize it a little more and so to do that first we're going to go into images in the system ui i'm going to click new and we're going to add a new image so for this it's just going to be general categories totally fine and i have an image ready to go here for this exercise however just to say really quickly for this image i do recommend that it has that it's a png with transparency uh just depending on your template um if you have something in the color in the background you don't want to show up you know with the background of the image messing up your template so i'm going to name it and i'm going to click to add the image and i already have this one bear with me one sec so i've already i've already uploaded this um particular image but this is where you would do it all we want to do is just make sure we have an image and then in order to configure it um we're going to on our template on our card rather we need the sys id for this particular image in a later update to mobile card builder you'll be able to do all this directly in mobile card builder that'll be coming in an upcoming release so for now i'm just going to grab the sys id and so i'm just going to right-click show xml it's not going to be the cis id of this record but rather it's going to be the cis id of the image so that'll be this one right here so i'll copy that and then in order to define this uh what we're going to want to do is find open up that card within the platform and find the element and add an element attribute so i'll show you how to do that so this is back in mobile app builder rather we have this overflow icon right here and i can open this record in the platform so just a shortcut to get there more easily and you can see that all the elements of the card and the one we're going to want to look for here is our image element so we'll open that and we need to add a new card element attribute so we'll do that from the list the one that we're going to want to find for the type is called image url so we'll select that and we'll paste in our cis id of the image and submit so now that we've done that let's refresh in our mobile app and we can see our image so so far so good we have an image with some text again the ux size of the image and so on not perfect but let's just proceed with getting this fully defined and we'll go back and look at the template so what we want to do next as you can see here so we're saying you know we're directing the user to open a missing asset request to create a new asset well wouldn't it be a lot better experience for them if they can do that right from here so what we'll do to accomplish that is we'll leverage our functions that we can add in the template now i'm not going to walk through creating a function for reporting a missing asset so that would be you know for example a catalog item with a workflow tied to it if i don't see it we don't need to create all that here and we won't walk through creating the function but david will paste in the chat a link to a previous mobile app academy that we did on creating those action functions um so we'll just assume that we already have those um so we'll to configure them we just click on the button here all we need to do is give a label for that button and identify the function so um we could do something like report missing asset oh and for the function here make sure you select the global function because we don't have the context of any record we obviously we search for something and nothing was found so just make sure you choose global function or won't work so i'm just going to choose for example agent chat should work just for the purposes of this exercise and then we'll create another one here um use the same function and we'll say we can also allow the user to create a new asset straight from here as well so let's save that and refresh in our mobile app and that's pretty decent in terms of the functionality and the look we have all of the text that we wanted we have an image we have functions to open and deal with the asset being missing just doesn't look quite nice enough at this point um so what we can do to fix that is take the template that's being used here duplicate it and make our own and tweak it so that it looks however we want so to do that still in mobile card builder we're going to click in the menu to open a mobile card and then we're going to find the template so what i do is just click on all templates and then click back into the search here and then we'll search for empty and we can see the out of the box empty default empty state template so let's open that so it looks exactly the same but we're on the template now we're going to want to duplicate it so that we can leave the out of the box there we can go back to it if we need and make our own so we can call this empty state and we'll this is going to be specific for the asset so we'll add something like asset lookup template click this drop down to put it in the field service mobile scope click apply click save now we have a new template so look just looking over here what do i want to change just to show how we can easily change some stuff let's make the image a little bigger we'll correct this line break we'll add a border around the second button for creating a new asset so first we'll click on the image what i would recommend here is just to keep the aspect ratio the same obviously and so we'll do 200 by 250. we might as well make this text a little bolder so it stands out a little more so we'll change the font weight to bold we'll make the subheading there a little smaller so it stands out a little bit less we'll also give this subheading a right and a left margin to fix the line break there and then for the button i'm okay with this button but the second one doesn't have a border so why is that um that's because the border width is zero for the second one so we'll make it one and we'll add the color for the border color and i think this one also has a radius on it so you might as well make that the same all right so let's save this and see how it looks oh one issue here we didn't do uh we saved our template but we didn't uh apply it to our card so to do that let's go back to mobile app builder and open up the card and you'll see that it's still using the the default one so let's remove that and we'll choose our new template that we just created and save that and yes so now we have our image a little bigger and so on all the other little tweaks that we wanted to make to the template um so just to recap so far we covered creating a new empty state card uh creating a new template for that card and applying that card as the empty state for a specific list screen in this case the asset lookup one so hopefully so far you're seeing it's pretty easy to do this and it's gonna provide a much better user experience you might all be wondering though um how we can create so now that we created one for a specific screen can we do the default um like uh david mentioned earlier so for that in general you're going to follow the exact same steps now you're going to create a card you're going to choose a template and create an empty state so we won't do all that again but i can show you where to do that in the system so for that we'll go back to our main screen actually we'll change the scope to the global scope first and then we're going to open our mobile app config for mobile agent this will take a few seconds to open because there's a lot of configuration for it to load but once it does all we should have to do is find the default empty state and select the one that we've pre-configured all right um so right on this screen we have our empty state so we can remove that and we can choose and you can see here i've made one called empty state agent mobile organization default and we can apply that so how will that look well obviously our asset lookup is going to stay the same because that's that's configured for this specific screen but if we go back and look at for example um critical tasks we are still seeing the same one you forgot to click save thank you david i thought i was gonna have to do some troubleshooting there yeah um watch this for all the steps okay so um thank you for that um now you can see that i've configured just this simple um screen here these aren't the droids you're looking for just so we can see that it's been changed um obviously this is going to be specific to your organization uh as part of customizing the ux for you maybe you have a gener like a generic or general function to access a knowledge base or something like that you could throw in here basically anything that that you need to do for your global version of the empty state okay um so one more thing that i want to show you uh is a couple more things actually um so we've done list screens empty state configuration for list screen for the asset lookup but we can also do as david mentioned the global search as well as embedded lists on record screens so again you know we're not going to create the cards from scratch for those use cases because it'll be too repetitive but i can show you where to configure those so for embedded lists probably the easiest way to configure those is to find the record screen that the embedded list segment is tied to in mobile app builder so if we were to go back and change our scope again to field service mobile and we were to look for the specific screen that we want so i'll just pick an example so let's say parts used and open that and you want to look at the screen segment so in this case there is only one screen segment for this particular example but if the idea here is if there were more than one or even if there is one we wanted to have a specific empty state for each of those segments we can so all you need to do is click on the screen segment and you won't see that here for now in mobile app builder yet but if we open it in platform here we can see that you can identify a specific empty state for this screen segment so that's embedded lists within a tied to a record for the search so let's talk about search so i'm going to go back and we'll just show what the out of the box looks like first and so i'm going to type something that won't be found in a search you can see no search results here so this um how we can configure this is this can all this part can all be done in mobile app builder um so we're going to want to go back to our home and open the mobile app config and open up mobile agent you can actually specify a different empty state for each of your tabs here um so in this case we'll look at the the home tab which is called my work within field service the field service mobile app um so to find that within mobile app builder i can just search for my work for example and then look for the fsm one under the home tab right here so this one here i can tell is the wrong one because it's itsm and the tab name is my work but if i go down more i can see under my home launcher tab i have my work launcher screen for that specific to has field service mobile related stuff on it so here i'm going to click on this search config and here you'll notice that there's actually two empty state records that you can configure one is going to be default and one when you filtered the list so what i mean by that is let's say i do a search and i search for wireless for example so we here i can see that there is actually a result but if i was to tap on this work orders up here to filter this search to be only work orders it's going to tell me no results are found so this is the filtered version and if i was to search for just something general then i should see that if nothing is found at all no simply no search results so if i wanted to change that and i've got my cards and my empty state records ready to go i'm going to go choose and here i'm going to look for the one i named empty state my work search and i'll i'll leave this particular the filtered one um the way it was before so you can see the difference so let's search for oh don't forget oh save again thank you and search again and you can see your search return no results um so just quickly configured to demonstrate and walk us through an exercise on how to do that all right um so that's the default and again just to tie it through to show the filtered one this should still show us if we tap on work orders here no results found so we can see the difference so hopefully that was clear and you know that that david that wraps up what i wanted to show we saw how to set up a default empty state screen how to build and set the empty state screen for specific screens like asset lookup and finally how to set those on embedded list segments within a record as well as our global search you know that was awesome ian um crystal clear i think uh you taught us the fundamentals on how you can apply all these empty states across different screens so muchly appreciated um so let's now transition over to q a um not really seeing any questions in the chat but we'll take a quick second to see if anyone has any last-minute questions uh otherwise we'll go ahead and wrap up um so let us know if you have any questions for ian any questions about this exercise or any questions in general um uh there were a couple questions earlier from aldrin but i think we were able to answer it um but if no other questions then we can probably uh wrap up okay um thanks everyone for joining us today um you know if you found this session helpful definitely let us know in our post session survey just quick couple questions that's going to ask you what topics you want us to explore in the future we're definitely looking for you know topics that are relevant to you each week so let us know in the survey if you're interested in any of our past mobile lab academies we do record these and upload them to youtube there's a bit of a lag on our recent uploads but we'll make sure to get all those recent videos um up on the now community channel by next week we have one on mobile publishing as well as a another one on mobile classic deprecation but besides that if you want to learn more about upcoming sessions make sure to register on our mobile community site and with all of that said thank you all again for joining and we hope to see you again in two weeks thanks everyone