good morning everyone and welcome to mobile app Academy this is our live building Series where we show you how to build and configure servicenow 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 um if you do happen to be 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 you have along the way and we do host these app academies on the last Tuesday of every month at 10 A.M Pacific in which our recordings are posted to YouTube on the servicenow community Channel um just to point out a few resources that we have available if you are new to mobile um we recommend that you check out some of our self uh Anna mint resources which you can find on our community site such as our Essentials training blog and mobile FAQs but if you are looking for more Hands-On training we do also have labs and now learning courses available and of course we also have our playlist to all of our previous app academies where you can find sessions like getting started with mobile app builder or how to build a custom mobile app and so much more but with that being said let's get started with today's Topic in which we continue our getting started with mobile app builder series today we are going to dive into how you can configure record screens um just to quickly review today's schedule we'll start with a quick overview on record screens and then we'll jump into the exercise and finish off with some q a uh it should be a pretty short Academy um but we'll try to use the session to answer any questions that as many questions as possible um okay so mobile record screens in part one and part two of this app builder series we showed you how to how you you can configure the initial list screen and in this session I want to Deep dive onto how you can configure your details of a record screen and all the things that you do with it in case you aren't aware a record screen is what you use to display content for a single record you can configure functions for users to take actions on those specific records like edit or update task and you can also add segments to display different types of information using embedded screen segments uh on a record screen there's five different types of segments that you can use including detail screen an activity stream a related list and the breaded browser and an embedded list screen your most common three of course are going to be your details activity and related list um for an embedded screen those are used when they're specific when there's specific record data that you're trying to show in your instance and maybe that data isn't supported natively and so you can link out to it or if you want to link out to an external URL that is also support a supported use case for related list know that related list it only supports relationships that are defined uh by a reference field between two tables if you do happen to be using custom relationships or scripted relationships on your related list um then you can actually use an embedded list screen as a workaround and uh I've shown that workaround in a very old Academy prior to using mobile app builder and so I think that video is going to need a refresher and so um we'll have a standalone Academy in the future covering really list very soon okay but for today's session we're going to focus on enabling just the detail screen um you know configuring the card on the details and how it differs from your list screen adding a detailed segment as well as additional screen fields and then you know we'll add an edit function in all the places that are supported on a detail screen which include a top menu footer and there is a new location that we released in I think Tokyo or Utah but we'll also cover that in a future session as well okay so let's get started here um let's transition out of this PowerPoint over to a new screen and uh I did have charity join us she is uh one of our mobile gurus who can help answer questions along the way as well so let's share a new screen okay this should be better so you should be able to see my instance on the right side and then my mobile app on the left side what we're going to do here is you can see that I have a list screen for critical task um right now if I tap on it um it doesn't actually take me anywhere um but if I tap on see all I can see that this is a list screen with you know three records um right now I only have configured the list screen so how do I also create uh how do I further drill down into additional details to do that we're gonna first launch mobile app builder and then we're gonna find the specific list screen this curling lives in my field service mobile app and so it will transition into the field service mobile scope okay and then this specific screen is called critical task so we'll go and look a critical task and then open that up um and if you look through this hierarchy here if you're familiar with mobile app builder this but it'll be clear to you that this currently only has a list screen configuration but if I show you we can just drill down uh to show you what exactly has to configured so I can go into the screen segment go into the stream which contains my data item for my data item I can go to the list item config which contains my card for my list screen right this is the card for my list screen but I can't go any further from here um if you want to go further you'll use this table called embedded screens and that's where I mentioned there's five different types right there's details activity related embedded browser and um embed list screen okay so let's create a new one if I want to show a details screen um this will require a record type of screen okay because a detail screen really it's attached onto the record screen as a segment um a segment is you know I'll be able to show that in just a second but let's create this record screen first and then we'll call this you know critical task record screen uh and then best practices I think I've shown in the past you know to use an existing card but best practices if you actually want to manage your cards and make sure that they differ between your lit screen and form screen you'll actually want to create a new card here um so let's call this vertical task record screen or and then um on the card template level this is where you can use existing templates if you want the card to match identical but if you have a use case where you know when you drill into this record and you want to show a different card that's totally possible that's where you'll create a new template um and then you know customize it however you want we I think uh part two is where we showed you how to customize card templates so definitely check out that Academy if you want uh more information on how to do that but for this simple use case we are just going to create or replicate this identical template that we have here um if you want to know which template this list screen is currently using uh what I would recommend doing is uh going back to your list screen card um and then you can click into the card template and this is currently using um what is it currently using critical custom template um I'm gonna open this up in mobile app builder just or a card Builder just to make sure I just want to make sure that this is truly a custom card and not one of the other box ones but while we'll give that a second to load um let's go back to my record screen and see if we can find it I think it was called custom template oh okay so it is so um you know all I did here was I went to a car template looked for the name and then I'm simply going to select this exact same template for my record screen okay so custom template and apply and then we'll save uh looks like it's asked oh there's a field that we didn't fill out which is icon um even though this won't show up it's just a required field so we'll select any icon to apply to this so you know I'll select um bookmark and Save okay so now at this point um we're not quite done yet so we've configured a new record screen and we've told it what template to use but it this template doesn't have any Fields yet or the card that you are pointing it to to use this template it doesn't have any Fields yet so um on my record screen I need to now drill into the card Step One is fill in the fields for your card before I do any other segments like details or activity stream so let's go and launch this in Mobile card Builder and then fill out some fields right now all these fields are currently blank unless your template has some predefined fields which you can totally do to save you an extra step uh commonly if you do create your own templates what you would do is um let's open up a card template open card Builder so this is the template itself if you wanted to um Define a hard-coded value you can fill it out here under text value right now all of these components are blank there's no values in it because it's saying you know this is just an empty template you can fill in your your fields at the card level but if you wanted if you know that you have multiple screen uh screens that will use the same template and they all use the same Fields you can save some steps by filling it at the template level okay um so we won't do that let's go back to our card now um and we'll fill out the field directly on my card so uh for this first one let's oh notice that it's not allowing me to map any Fields um the first thing that this indicates to me is that I forgot to select the table it currently doesn't know what field to pull because you haven't told it what table you want to pull fields from so we're gonna have to close out of this and go back to my card for my record screen and then select this table really this table should be a required field but because we didn't make it mandatory this is often a for done or a field that it's often overlooked so let's select the work order test table and then save and then let's go and open this back up okay so let's go ahead and fill in um a similar Fields here so we'll select number um we can make it slightly different uh let's also fill in priority as well as short description uh this is expecting some sort of image filled um we don't need to fill this out if you ignore any of these fields it will um it won't you don't have to actually use every component on this template so if there are components you want to skip it's totally possible so let's go and just save these three Fields here and then this will be my card so now at this point if I refresh my screen on my mobile app I should have a uh a record screen that I'm able to tap into Okay so now you can see that I have this new record screen with all the fields that I've touched right um this is what we call a record screen what you're probably more familiar with is you know if I tap into one of these and you have all these different segments right awesome but at the most simple form of a record screen this is what it is you don't actually see those segments until you start um selecting and creating your segments um so if you want to show additional Fields show that TV streams show related lists you'll have to configure them uh manually okay so let's start with the details um let's go back to mobile Builder and let's go into my record screen here so if I want to create segments all I have to do is go into my record screen scroll down and then you'll find this table called record screen segments let's create a new one um notice that there's two different types of record screens you can totally ignore this Dynamic record one this is a very specific use case that we've enabled for the itbm team to build um uh I believe timesheets uh so you can totally ignore this one uh always use the record screen basic one uh when you create a new segment it's going to ask for an embedded screen um we don't currently have a oh no we do have a better screen this embedded screen will be your oh sorry no no uh we need to create a new embedded screen every time so we'll create new here and then these are your options for what type of segment right um I want a details so let's create details again it's going to ask you to fill in an icon we'll select any uh and then the important information is What fields additional Fields do you want to expose um I want it to pull from the work order past table and then um this is where you can fill in the fields I want to show you something all the field types that we support today so if I look at service now service now mobile screen fields we have this product Doc Page here and I just want to show you all the different types of fields that we support and how they will display it on your mobile app so these are all the different types you have text which is pretty straightforward we also support percentages image types you can display the image directly on your diesel screen and you can click uh and expand it further if you want we also support attachments so not only can you see attachments on your activity stream yet you can actually expose it directly on the details uh we also support video files if you want to show PDFs and things like that HTML um we support HTML type fields too so there's like custom formatting on that HTML field all of that will be exposed um checklist date time Fields as well as staging okay so um I'm going to select over you know just a few Fields just to show you an example let's bring over um and when you select your Fields I typically leave a type as Auto but for whatever reason if you ever run into an issue where you're not seeing the field um displaying as you should expect it too like if you select percentage or you select auto um and you select a percentage type field but it's not showing percentage where I would troubleshoot is going back to the screen field changing the the type from Auto into the that specific type that you want so that that's how I would troubleshoot okay but for now let's spring over uh Fields like location say that um every time he creates a field you have to scroll back up uh into detail screen and then create a new one here uh let's also show attachments hopefully the work of our task has an attachment feel oh um doesn't have attachments here okay so maybe not uh let's also show uh you know description I don't think the work order test table has any HTM HTML field so there's not a lot of fields that I can display the different types but just know that you can reference the product Docs to see all those different examples and then let's bring one more over let's also show um maybe open by okay so now um let's go and refresh our Mobile screen and then show you some of the updates so at this point if I tap into my list screen um you'll see all the fields that you exposed if you want to be able to control the order you can set the order here on each one of the specific fields so you know if I want location on top we'll give it an order of 10. uh description underneath so 20 and then 30. and then that should reorder it however you want it to okay um if you're wondering why is it not showing the segment segments yet um for any uh screen whether it be a list screen right so this is a list screen or whether it be a record screen if you only have one segment it won't show the segments it's not until you have two or more that you'll start seeing those uh a segment button to show up so if I enable the activity stream uh you'll then start to see those two buttons so let me show you what that looks like so let's go back to our records okay and create a new record segment and this record segment uh will be a activity stream okay critical pass activity stream and then out of the box these are all the different options that you have um by default we show everything um you know work notes additional comments um you can disable attachments uh uh through the settings here that's a common ask that comes up every now and then um table we want this activity stream to show from the work order task and then I'll give it a random icon okay and then we'll save so now if I refresh my screen since we now have two segments it will show you the different segments okay um I think it's just taking a second to load uh but if you want to rename any one of these tabs you name it uh you rename it here on the name label so let's change this to you know just activity shrink maybe I have to refresh from the home screen there it is okay um and then we can also change the name of our details as well um by going over to that segment um so let's call this I don't know just just details okay uh the second thing I want to show um after you've create your segments you've created all your Fields you've stepped one you've configured the card step two you've configured your segments step three is um adding any functions that you need your users to take action on so common use case here is being able to um update or edit uh this task right so I already have a action function out of the box that allows me to do this um this action function allows me to edit the short description and description if I want to so we're going to reuse this I want to show you uh the different locations that are supported on this record screen um the most common ones are the top in menu uh as well as footer and then there is a new function location that came out in Tokyo in Utah I'm not going to show in today's Academy but uh we'll do it in a future session uh because there's some steps needed to make that one work um so just to show you what that is um I think it's called record section um record section actually let's navigate from here record screen here it is um it's called configure or record UI section for a record screen um and what this is is want to have a record UI section displayed you can actually have a little button underneath it um it's a much larger button it takes pretty much both the left and right side of the screen and you can control how big that bun can be but it's basically a bun that lives on your launcher screen uh that can take action for your record screens um and basically it's just a new location um for your users to take action it's a button is bigger so it's more accessible um it's more discoverable as well okay but for today's session let's enable it for the top menu on the footer um to get it to show on the top menu I have to go back to my record screen okay so here's my record screen and then there should be a table for top menu function instance so by creating new we'll call this top um edit critical task top menu and then for the sleeve label we'll just call it edit and then it's going to ask us to select the function we'll give it a second to load I believe it's called edits um not sure which one it is exactly so let's try to find it um if I open up another mobile app builder tab I'm gonna open up this card record and then it'll give me the name of this function so let's do that real quick or gold task I should have just duplicated the time that would it take me there faster um so let's go down to the record screen card no sorry list screen card because this loads on the list screen or I guess it lives on both um that's that's fine so we'll open this up and then this function is called edit FSN okay perfect so we'll select edit FSM and then we'll save so now at this point if I refresh my mobile app and then tap into my record screen I should see a new button up here um this little Ellipsis if I tap on that it will show you your edit okay so that's one location that supports that is supported on record screens the second location is on your footer you can actually display a big button at the bottom of this record screen um and then you can expose that by going to your uh your record screen once again um I think it actually lives on the details screen so let's open up details and there it is okay so if you want to show it on your top menu it lives on your record screen if you want to show it on the footer it's going to actually live on the detail screen um because you're updating the fields directly on the detail screen so let's create a new footer function here and then we'll call this you know edit vertical task order the label will just be edit and then we'll select the exact same function and then we'll save this okay so now if I refresh I should see this uh button down here um I can also change the button if it's this color as well um you have four different options uh you know destructive I think it makes it red uh but also it depends on your theming that you've applied to your accessible prior to Tokyo um prior to Tokyo these button emphasis colors will work because it's using the old theming uh colors but if you've upgraded your instance to Utah and Beyond and you've enabled next experience know that mobile theming now inherits all of next experiences femi it's supposed to be a one-to-one um mapping and so mobile won't use his own theme anymore we're just going to inherit whatever you have on the next experience side so whatever next experience has defined for these colors it will just use those okay uh so let's change that back to primary and Save and then I'll change the color um record screens also support one more location it supports location called field but for field type of functions they only support smart buttons so we did Cover a smart Bond Academy so definitely recommend checking that out if that's new to you but just a quick refresher what is a smartphone foreign button allows you to perform an action such as uh you know being able to send a native email making a phone call navigate to a map location or you can navigate to a URL as well and then you can apply those smart buttons directly to these type of fields right if it's a URL a phone address so forth I do have a location here but I'm not going to do it because we did cover this in the previous ad account I mean um but just know that those are the three types of locations that we support functions on a record screen okay uh for the fourth location that we just um released for Tokyo or Utah I'll cover in a future session any questions um we have a question asking is there a way to troubleshoot mobile via a desktop browser um so we we don't officially support these external um uh products that like uh that act as the reflector emulators yeah or emulator but I have heard of customers use um products like P cloudy um and similar products um that will basically display your mobile app on your desktop um what I personally use is I just you know if I'm currently using a Macbook um and I can use Quick times to pull up my mobile app just by connecting the the phone directly to the MacBook um and also know that uh for a mobile app builder on their roadmap um they're actually trying to create a built-in emulator so that's something that we're looking to uh into for future release um any other questions before we wrap up I know today was a short Academy um for the next sessions we will try to cover custom activity streams uh related lists embedded screens um and basically everything that uh all the use cases that we haven't covered for record screen there's quite a lot of topics that we need to cover for a record um how do these buttons work in Android is it the same as iPhone yes so I think the only difference for iPhone really um and Android is for quick actions quick actions on iPhone will show up on the top right but I think quick actions for Android will show as a floating action button in the bottom right um for a record screen specifically I don't think there's anything different here um for uh when it comes to functions um you know the the footer will show up here where you expect and then the top menu will show up the top right as you expect as well so no differences from my understanding um any other questions okay if not um thank you all for joining us in today's session um if you found this session helpful or if you have any topics that you want us to explore in the future please let us know in our post session survey uh it's survey won't take more than 15 seconds uh it's just an opportunity for us to learn what topics and Concepts you want us to dive into more um but with that being said we hope to see you at the next session um next month thank you all for joining us cheers