uh good morning everyone and welcome to Mo lab Academy this is our live building Series where we show you how to build a configured mobile apps on an out 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 uh we also have charity Katz who's on our now learning uh curricular team and she's also here to help answer any questions that come up along the way uh if you are joining us for the first time we welcome you to the session our product experts are here to provide guidance give you best practices and answer any questions that come up and we do host these academies once every month at 10 A.M Pacific in which the recordings will be posted onto YouTube on the servicenow and now Community Channel and in case you aren't familiar um these are a few resources that we do have available on community we recommend that you check out some of our self-enaming resources um such as our Essentials training blog and mobile FAQs these have been updated recently so we recommend checking those out and see if you find them helpful but we do have content around things like mobile agent quick start guides getting started with now mobile and I believe we have over 50 academies at this point okay um and then something I do want to highlight uh which is our mobile research panel we are currently looking for customers to work with to provide input on our latest designs and early concepts of new features it's really an opportunity for you to share thoughts opinions and insights through our surveys but you also have a chance to do one-to-one interviews with us uh what's important here is that we are offering a huge opportunity for you to directly influence our mobile roadmap if there's been a feature or use case that you have you've uh you know had a strong uh voice for in the past now is the time to really bring it up in which this survey or your live session will have the largest impact in helping us make some of those decisions around our mobile web app and if it does make a difference at all and if your organization allows for it you can also be eligible for a monetary incentive for volunteering your time to share your feedback with us um let me get that door closed just to minimize knowing um but yeah if you have any questions we do welcome you to reach out directly to our mobile research team so feel free to take a screenshot of that email there and if you do want to sign up there's the barcode um just pull up your phones and scan that barcode it will take you directly to our surveys and then you'll have the option if you want to schedule a one-to-one with our research team okay I'm going to leave this up for just a couple seconds but I will come back to this slide at the end of the session as well uh just to give you some more some time to think about it um I'm seeing some questions pull through in the chat oh perfect so Caitlin's added the um the link for you to directly access it um does it does it require a mobile publishing license um uh I'm not uh familiar with the context to it but yes mobile publishing does require a license uh I would strongly advise that you reach out to your account team um if you would like to learn more about the details around that okay I think that kind of also goes with the next question which was can you throw some light on what is available to be customized without a license and most of mobile can be customized without a license most of it comes as part of the platform um with the exception of mobile publishing yes Nuance is uh when it comes to out-of-the-box experiences so things like iot some mobile agents HR uh Service delivery for now mobile field service mobile agent I would think of mobile as simply as an extension of your licenses from the platform experience and so if you currently already use those products today then you will also have access to those out-of-the-box experiences for mobile so if you're currently using field service on platform you'll also have access to a mobile mobile doesn't give you additional licenses for free it's just we will give you access to what you already have on the platform today hopefully that makes sense and specifically around branding yes that does require a license that is the mobile publishing publisher license publishing license uh where you can then submit um your images and uh what not to have it connected do um or have it built out for you as a branded app and then you can utilize that uh and we do also have an academy on mobile publishing as well as FAQs those typically answered 95 of all customer questions that come in so we recommend that you check out the video because we show you how to a step-by-step instructions and all the questions that you should think about as you're getting prepared for mobile publishing okay but with all that being said let's get started with today's topic um I realized that I set the title up for this mobile app Academy a little uh confusing because there was two UK use cases that I wanted to go to and I think we only have time for one of those today um but for today's topic we're going to be diving into Mobile announcements how do I use record sections to build or to display my text uh accompany banners or display use cases for things like announcements or campaigns um this is the same feature that is used from the HR now mobile team as well as uh I believe possibly safe workplace um this is basically the the components that they use to build out their campaigns feature I'll be showing you how you can build yours from scratch that way you don't have to rely on using those some of those out-of-the-box experiences okay um and just to quickly review our schedule for today um we'll be starting it off with a quick overview on um mobile banners and then we'll quickly jump into the exercise and dive into any q a foreign ers uh if you've been with us for a while and you've done some mobile configurations and you've configured mobile managers in the past historically we have used media sections for this um you know you would just create a new type of UI section called media and that would allow you to upload your images and videos right but that feature was quite a bit limiting because it was just a static image in which you had no control over the sizing and how it displays um or you could only use up to one image or one video at a time on that section right and so we released an enhancement that happened in San Diego it was kind of a quiet enhancement for record sections and this allows you to have more control over this feature it also enabled for the use cases as I mentioned earlier the HR team in that mobile team both were Prime examples uh to use this feature to build out their mobile campaigns and announcements and so moving forward in San Diego and Beyond we would recommend and using this method over media sections anytime that you're trying to display a mobile Banner an announcement of some sort or anything that's related okay um if you take a look on the screenshot on the left um I want to point out that the new mobile Banner is simply using a list screen that uses a fancy card template that makes it look like a mold Banner um and so this card template should be available to you out of the box um if you don't see it then I would recommend just updating your Mobile card Builder plugin to the latest version um I think in most recent releases maybe the past two or three we've been releasing quietly new card templates for you to use out of the box okay and I'll show you where you can find this template once we start our configuration as well but to build out this experience we start by creating a new list screen and then we select the banner announcements card templates we will also need a table that can host your images and videos and for this exercise I will be using the mobile content table this is available to me out of the box from the now mobile plugin um but just know that you can also build your own table to do this you just need a table that has like a title a description and a a field that allows you to upload images or videos right but we will be using the mobile content table to save time and it works completely fine leveraging out of the blocks as well so this is something you can do yourself um so after we upload our assets we can specify um on our data item conditions which items from that mobile content table we want to pull over and that is what is displayed for our mobile Banner okay and that's pretty much uh completes our configuration so let's go ahead and jump in to get started let me share a new screen thank you and then I will share my entire desktop um on the left you should be able to see my mobile device and then for my instance I skipped a couple steps so let's go back to our home page okay so the first thing that I'm going to do is uh I wanna I wanna let's make this a little bit smaller uh what I want to do is I want to create a mobile Banner that shows up at the top of our screen here um for uh the my work tab this is basically my home screen let's say that as a field service agent um uh or as an admin I just want to be able to add a company Banner at the very tops to make it more company themed company branded okay so to get started on building this experience um I'm going to open up the mobile app builder and then I will just have to jump into the correct scope in which all these configurations can be found um that I'm currently using the out of the box field service mobile app and this is my work tablibs lives in that field service scope so we will jump into field service okay and as I mentioned earlier to build this experience this is simply a list screen and so we're going to create a new list screen here we'll create a new screen and select list and continue and then we'll name this uh you know announcements or uh or actually just company Banner you know uh mab or MAA so that I know that I built it for today's session always use unique naming when you're looking for records you'll see dozens or if not hundreds of records at a time and so it's always uh important to use unique naming so you can find it easier later for the icon it won't matter because this is going to be displaying a card so I can choose a random icon here um I'll just pick the first one that pulls up and then I'll go and click save so I've now have my list screen as a template but this is currently just an empty template I'll need to continue filling this in and if you've been to one of our app academies before you'll know that every list screen requires a screen segment um if this concept is new to you we recommend that you check out some of our earlier videos uh on mobile Academy we have lots of videos on how to build list screen from scratch so just check that out on our playlist uh let's call this company Banner screen segments um and then save and then we'll create a item stream which contains our data item right so we'll also name this company Banner list stream and this requires a data item record so we'll create a new data item um company Banner did item okay so the table that I mentioned we're going to pull from is from the mobile content table okay um and before I fill out the conditions I want to show you what this table looks like so that you know what's going on so I'm going to go back to my instance and I'm going to look up this exact table name which is called sncd content mobile so let's go and type that in sncd content mobile.list and this will pull you up this table that just hosts all of our images and videos if I were to create a new one these are all the fields that are required for me to fill out right so on a banner you have the option to fill out a title you can give it a a header text as well as a text the title is just the title of this record I don't think this actually as an input that will show anything on the banner it's really this header text and text okay and then uh you can also add your images if you change this from Banner to video then I'll ask for a video link in which you'll have to create a new video link and um paste your Vimeo or YouTube links okay and then you also have the option for mobile text which is a lot more simple it just gives you a header text and again all of these options are all actionable right so there's a field for link so if you wanted the user to navigate somewhere then you have the ability to do that as well but for our use case we're simply going to create a company Banner today so I'm going to select content type mobile Banner let's give this a title this title is what's what I'm going to use to fetch the items that I want from this table and so let's say that in my conditions um for title well first the content type boxing type um if I wanted to show both my banners and videos then you know I would do like a uh is one of condition oh I need to expand this a little bit more so you can see uh I would do like a some sort of condition that says I would pick both um mobile Banner and video uh but for just this exercise I'm going to show just a banner okay and then I'll add an end plus and say for title it must contain some sort of word that I'm going to add to my title to know to pull up these records and so let's go and call this um let's go ahead and call this you know every time that I insert MAA for mobile app Academy um and then the title for this could be something like uh actually I'm not going to create a new one from scratch I'm just going to use an out of the box one here uh because I have one that's perfectly um uploaded I will use this servicenow uh diversity communities manner okay so the title for us this will be servicenow I'll add MAA as the text that I want to pull from I added some header text and then a short description right underneath it and then I uploaded my band right here okay so let's go and save this um and then let's add the MAA to my condition um contains Ma whoops oh whoops I accidentally locked myself up one segments okay um I made it excuse click save okay so at this point what I have is I have a list stream I filled out the data item um I've uploaded my assets which is just this Banner uh the next step is I need to create the list item config which is uh gonna contain my card and card template right so let's go and create a new list item config um right now this list screen uh knows what data to pull from but it doesn't have a card and it doesn't know how you want to visualize it so those are the last steps um so let's go and call this mobile Banner sorry company Banner list out of config MAA the table is going to pull from the same table mobile contents and then it's going to ask for for you to create a new card and which we'll call this open a banner MAA and then for the card template uh record I won't actually have to create any one because there's one out of the box for me to use to find the template that you're looking for um you know when you select choose you kind of get just this list uh what I could do instead is I could pull up a new tab and open up mobile cardboard and then I can use this interface to see exactly which template I want to use so let's give this a second to load okay so um on my filters here I'm gonna click directly into car templates um and you can see all the different templates that I have on that that are available to me the one that I want to use is called um I believe it's called announcement it's called Banner announcements yeah spinner announcement if I open this up I can see what it looks like and it's just a simple three component thing uh you know it's expecting some sort of image or video type a value and then as a header text and then text so this matches exactly what I have on my mobile content table right so it'll Auto populate some of these fields that I'm pulling into this table okay so um this template is called Banner announcements so we'll go back into the lab Builder and then select that exact same template uh Banner announcements and then we'll go into click save okay uh and then just to make sure that it's populating the right values I want to specify my table here as well so let's select the mobile content table and then let's go back into my card the card and then let's go and launch this to make sure that the values are actually being populated um I just want to double check one thing um for the value of this map field let's actually have it populates the image field right so let's select image here and then save and then for the header text it's already mapping the header text field and the text field is mapping the text field here so this looks good to me um I think I think at this point my banner should work the very last step I need to do is just associate this lit screen to somewhere on my mobile app and uh as we mentioned earlier we want to put this on the very top of our my work screen launcher and so let's go and do that if we go back to the home of app builder um let's go and open up the my work uh launch your screen and then we're going to want to create a completely new UI section because I can't put it as an icon item right if I were to put it inside my work it would just show up as another icon I can't put it here because it's its own individual record item so we'll have to create a new one so on my launcher screen I'll scroll down into my launcher sections uh you can see there's three sections uh on my list which is why you see three sections on my tab so let's create a new launcher section uh and I mentioned there's a uh an enhancement that we made that allows you for additional capabilities for the record UI section so let's create a new one I'll show you some of these new Fields here let's go and call this uh the company Banner record section um and the first thing that I'm going to do is I'm going to hide the header uh just because it looks cleaner without a title I just want to see my banner whatever that it's displaying uh let's say that this banner I only want to display up to three items um the orientation will be horizontal the scroll type is a new field you can see that you can free scroll or you can snap this uh snap start free scroll means you know you can kind of scroll like this as much as you want if you select snap to start it will only allow the user to scroll one at a time and I think this makes sense for things like announcements or campaigns um if you uh want the user to be fixated on one content item at a time um and if it's something like announcements um it makes it kind of hard to read if you're scrolling and it kind of goes a little too fast so I'll select snap to start so it only allows you to go one item at a time okay uh and then I'll leave the rest of these empty I'm not going to pick a card size yet because I want to show you what the experience looks like if I don't customize that uh and then for the destination screen I simply select the list screen that we just created right so let's go ahead and click choose and we will select company Banner MAA and then we'll just click save and at this point I should be able to refresh My Home tab and it should display my banner it's showing section is empty let's do one refresh I might have to do a hard close oh there it is okay so this indicates to me that I have built my list screen correctly because it's showing me my card templates but what's interesting is I'm not seeing some of those field values that I filled out right um on my table like I'm expecting a header text and text um this indicates to me that I've configured my card correctly because it's showing up but I'm wondering where's the rest of my text and it might just be a matter of this card the size of it is simply not big enough for it to host all of these values and so um there is this field on the record UI section if you scroll down there's a new field for card size if you select um choose you can see all the out of box sizes but really what I want to do is I want to create a new card size um and it allows you to configure both the height and the width of your card if you hover over the information icon you can see exactly what your parameters are the range is from 42 to 296 pixels and for the width it goes from 64 to 304. um I've already done some testing on this and I found that the perfect range for this card specifically to my own use case with this image and the the text that I filled out I found that the perfect combination of picks uh values is 260 for my Heights and then 304 for my width and again this is something that will you'll have to customize to your own use cases it really just depends on how much tax you plan on displaying on a banner and things like that so um you know you can just change these values as needed to get it to the right size so let's go and save and I'll show you what this looks like if I do a Refresh on the home it now displays perfectly and you'll notice too that um compared to Media sections this it can be a lot bigger right um it looks almost like a square compared to the uh more rectangular ones and again this is all um controlled by your card size so look what happens when I change my uh you know my height to maximum let's do 296. um if I refreshed it this will just make it look a little bit longer and probably a little bit Yeah so it gives you a little bit more white space media sections um if you had white space you had nothing uh you had no way of getting rid of it but with this card sizing this really allows you to um adapt to whatever you have for what you want to show so let's change it back to 260. because this looks a lot better okay so um that is just a very quick example of how you can configure mobile banners and again you can add things like videos or just text on this section as well you can have multiple items on this uh if you want it uh to act more like an announcements thing but lots of things they can do with it this is just a great introduction to getting started for this any questions before we wrap up can we share a link to the recording on the session after yes uh we will upload this to the now learning oh sorry now the servicenow support Channel or uh let's go to YouTube I always forget exactly what it's called um if you look up service now mobile good evening uh yeah servicenow Community YouTube channel we'll be uploading it to the channel um any other questions uh I would like to set up a consensus Vantage screen which template uh would I need to use can you give me some ideas um consents Banner screen so I would use the exact same um Banner Rich uh if you don't want an image um and you just want like text uh that is totally possible too um I believe what happens is if you don't fill out the the image field it will just ignore that image field it will just display the text and so I would just play with a card sizing to get it to where you want it to be or what you can do is you can also duplicate uh that this card template and just modify the fields that you want so if image is just not relevant to you then just get rid of it completely um and then you can build your tables depending on what values you need right any other questions uh why is the mobile content record active is false um that is a really good question um surprisingly this works even though the the trigger is currently false let's go and save that uh if I refresh that should still work um I guess it's just not for this specific use case it's just not looking at the Active field whatsoever um you know if I were to add that as a condition uh to the data item that I was filling out earlier uh you can use this active trigger as an additional condition uh but uh what I was doing I was just pulling this table and looking at specific Fields uh as my commissions I just wanted to pull up all values that uh showed MAA in the title so that's the reason why this is still showing up uh another question which plugin is the mobile content table available in um if you look up servicenow now mobile oh this is part of the employee experience plugin if I look up on the docs yes the now mobile app um if you go to now mobile and then you click on base system functionality for now mobile uh I believe this plugin should be available here somewhere mobile plugins mobile plugins for now on a mobile ah this one right here so I believe it comes with this specific plugin comdoglide dot mobile employee if you're not seeing it for whatever reason then it's possible that this is actually an HR feature and you would also need this plugin com dot smhr mobile again this feature isn't dependent on using this table to get the feature working I simply wanted to use an out-of-box table to speed up this configuration but as you can see if you're able to create tables the table itself isn't complicated it's just a bunch of fields to get the to fill in what I need um like content type title header text and text and so if you don't have access to HR table then your workaround is building this table from scratch okay any other questions if not then we can go and wrap up I want to show the research slide one last time um going back to my PowerPoints um in case you didn't get a chance to scan our barcode for the mobile research survey again this is a huge huge opportunity for you to directly influence our mobile roadmap we are inviting customers to share their thoughts their opinions and insights uh with us through a brief survey or if you have a very strong opinion for specific use cases then we are also inviting you to jump into a one-on-one interview with us so that you can share that feedback and we can probably hear you out okay um and these mobile research panels do require a lot of time and investment from our research teams uh and so they're usually only open for a limited time of year and so we highly recommend you take advantage of it as soon as possible if you want your voice and your feedback heard and really it's a great chance to directly influence our product strategy um if you're interested in signing up just scan this barcode um you can save the link to complete leader or if you have you know 20 and 30 minutes to spare then you can kind of dig right into it right now if you want uh and if you have any questions feel free to reach out directly to our mobile research staff you can take a screenshot for this email here but with that being said um thank you all for joining us in today's session and we hope to see you again next month at our next small lab Academy thanks everyone