good morning everyone and welcome to mobile app academy this is our live building series where we can 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 and also want to give you a warm welcome to everyone joining us live here today um if you are joining us for the first time welcome to the session um our product experts are here to provide guidance best practices and answer any questions that come up along the way we do host these app academies every two weeks at 10 a.m pacific and our recordings will be posted onto youtube on the servicenow community channel just want to point out a few resources that we do have available if you're new to mobile we do recommend that you check out some of our self-announcement resources such as our mobile guide books and white papers on our community site but we also do have a plethora of other resources such as labs and mobile trainings on now learning and our playlist to all the previous app academies where you can find sessions like uh asian quick start guides getting started with now mobile and 30 other academies as well also if you do like sessions like these um our servicenow teams do also host other academies for hr service delivery platform foundation platform analytics virtual asian and so many others but you can find these series in their respective community forums by navigating to the forum tabs okay so let me first start off that if you are a previous attendee this might be a little different than our past academies today is the start of our new skill building series on how to build a new custom mobile app now we do have this recorded and it will be replaying it over today's session due to the fact that there are many moving parts and we want to make sure that we were able to capture everything into a consolidated 50-minute recording and this will be a three-part series um but for today's session i'm going to quickly walk us through what all that material will cover and uh we'll then jump into a 50 minute video with ian kinnear to kick us off with part one of this series which is how to build mobile screens okay and then we'll jump directly into the exercise in which we will cover how to build a screen using script data items how to embed a really related list to it and then apply advanced screen ui rules okay um and as you can see this is going to be a three-part series today we're covering experience next session we'll be covering all the major components that involves functions such as cryptic conditions variables uh a crate function versus an update function search list and then also applying ui roles to those as well and then we'll wrap up our series um in two sessions from now on push notifications on how you can enable them for your custom mobile apps okay so for the use case in this series we're going to be taking advantage of the skills management plug-in this is a plug-in that allows you to set skills for users or groups and for you to be able to assign tasks or projects based on the skill levels of your employees and this is a table that should be available across all customers and with this plugin we are building a custom skills management app that will allow your agents to view and manage their skills so that as they're growing their skill sets they can also increase the amount of models that they can support okay and just a quick note starting today we will be using a san diego instance moving forward and so as more and more customers upgrade and migrate over to their san diego instances and i'm sure many of you might already be on it um we want to showcase some of the latest features for mobile as well okay and uh also want to note although we are using the skills management plugin just know that this app building series can be applied to any plugin or table the goal here is to teach you the fundamentals and skills so that you can go and apply these concepts to build your own custom apps using mobile app builder right um but if you do want to rebuild this exact same app with this we will be posting another article following with this video uh that will have the update sets attached and this will allow you to have all the data necessary to replicate this app in this three part series or if you wanted to use it as an exercise to reverse engineer any concepts you can use that as training as well that's totally possible okay but with all of that being said let's go and get started i will now um start the replay of this recording i'm going to do a new share and then we'll get started with in taking us through part one how to start building your screens for your custom mobile apps all right so before we get started here we should deal with one or two housekeeping items since we're going to be creating an application here we should be thinking about update sets and scoped applications so let's make sure that before we get started we head on up to our application list and we create a record an application record to collect all of our work and allow us to manage and deploy the application onto other instances later so in this case i've already created a custom application called skills management mobile the way i did that is i just went up to my application picker you can head to the list and create a new one from there you'll just give it a name this will allow you to maintain things like the version and so on you'll be able to once you've created this application and you you're ready to deploy that application to other instances you'll find an easy way to publish that application to an update set down here obviously give it a good description and be updating that as you add to it okay so here you can see that i've already got my mobile logged in to agent i'm looking at a pretty standard field service agent view pretty standard experience i've got a my work tab here some other tabs we're going to be creating a new tab called skills so let's go ahead and do that we're going to head to our mobile app builder and once that loads up we're going to select our skills management scope that we created earlier so i'll just look for that i've named it skills management mobile and we're going to access our mobile app config here and we're going to look for the one for agent because that's where we're going to want to create our navigation tab entry and our launcher tab for skills so that we can start to add to it this might take a little bit to load just because this has to load the entire configuration that you have so here we go we've got our navigation bar here and you can see that there's several tabs here so let's minimize these so we can see all of our start to see all the tabs you know your instance might have slightly different ones just depending on what you have installed that's totally fine if we scroll down here and look at our navigation tabs we'll see that actually we can't add one from here problem is we're in a different scope than these navigation tabs and the navigation bar was created in so to get around that and in order to allow us to keep all of our changes in our scope we're just going to click here to edit this in the original scope and from there you might find you still can't click new here but that's okay you can just click on this overflow menu open in platform and then this is going to show us our navigation bar and platform and from here we also can't add a new one easily but one way to do it that i'll use is to open an existing one and we're going to just go ahead right click and insert and stay on the menu for this this is going to create an identical one so we're going to get rid of this existing navigation tab map we'll set this for an order of 150 that'll just bring it past my work in our navigation tab and we'll go ahead and save this now we're going to create a navigation tab so we have something to add our sections to and we'll just go ahead and click new up here and from this list it is going to be a launcher tab and we'll give it a label of skills for the launcher screen we'll just select an existing one for now and we'll change that in a minute and then i'll pick the knowledge icon just because it'll give us a nice uh looking um cap icon and let's go ahead and submit this so we have our navigation tab here and we can save now let's go back and check mobile app builder so that we can edit it from here once mobile app builder has been refreshed we'll be able to look for our new skills launcher tab that we just created so here it is here as i mentioned before we've got our my work launcher there because we just put something in as a placeholder start so let's go ahead and remove that from here and click new now here we can make our skills launcher screen we give it a title of skills and we can go ahead and save now what we'll do is just refresh swipe down refresh on our mobile app and we should see a new skills tab here and if we tap it there's no data on there yet but that's a good start next let's go ahead and give ourselves a simple header it's a little more personalized for the user than just the word skills so how we can do that is look under our settings section here and find header title we could choose from an existing list but just to see how to create our own new one we could just click here and then this text is what's going to appear here in the header so it could be just something as simple like hello and then we can leverage the first name with this syntax like this just swipe down refresh here and you can see that the skills static header there has changed to this hello ray all right let's click back to our skills launcher screen we don't need a header function at this point that would just be if you know if they were we wanted a function to be invoked anytime somebody clicked on the header we are going to create a search configuration but because we don't have any screens to point that configuration to yet uh when we the user finds a result we're just gonna skip that this step for now and come back to it later a launcher screen section rather here is what's going to allow us to fill content on the page um so you're definitely going to want um to set up those um we're gonna be creating three of them team skills that my skills rather for skills that the user has team skills i don't have for skills that other members of my team have that i don't and skills i want is going to be an area where we're going to have tasks where i'm in the progress of learning or approving a new skill so let's go ahead and create a new section and this should be a record section so we're going to have the user skills in here and so we can call it my skills we'll keep the header hidden just to save some space we'll leave display title on and horizontal 15 is okay now that we have this we'll go ahead and click and to create a new destination screen and this is going to be a list screen my skills and you can scroll down we can choose an icon this one doesn't really matter because it's not going to display so i'll just choose anything and we'll scroll down here until we find our screen segments screen segments are going to allow us to create these lists on the screen and allow us to have multiple uh segments in in case we wanted to so for this case we're going to have just one and we can call it my skills screen segment for now and give it an order and then within this segment we can also have multiple streams which we can interleave together again in this case we'll just have one so we're gonna have one my skills this screen and for our list screen we're going to need to set up a data item but before we do that we will identify the table that we're going to use so in this case because we want to show the skills that the user has we're going to use the user skill table cis user has skill if you want to take a look at the tables that are involved in this that we're going to be using here just look at the skills navigation modules and you'll see here my skills and this way we're going to see we want to have this particular table to show the users skills so filtered by specific users we went into all skills that's just the raw list of skills or group skills skills assigned to a group so let's head back and we're going to use the user skill table again here this user has skill and we'll start off with a relatively simple data item for this one so we'll click new and we'll call this my skills data item again it'll be the cis user has skill table we can use a declarative function for this data item rather and just keep a simple condition so we're going to want skills since it's my skills we're going to have the user is dynamic me hide this to give us some more space and we're also going to want to have active is true that should be good for this case on our list stream we're also going to need a list item config so let's go ahead and click new here and this particular list item config well again we'll call it my skills list item config we're only going to need one of these oops it's again going to be the cis user has skill table we don't need to give it any other conditions for now because we already have those on the data item but we will need to create a new card in order to display the content of the record in the mobile app um so we're definitely going to click new here and we can call it my skills view config and this is going to be a card to show the skills linked to a user we'll again select our table user skill and we're going to need to make a template for displaying this content so we'll go ahead and click new here and we'll give it a skill user skill rather and this is going to be a template supporting skill view as part of skills management mobile which was the name of our scope go ahead and save this now we can create this template in mobile card builder okay so once that loads we're just going to go ahead and create a really simple view so we can basically see the name of the skill in the card and whether or not that skill was inherited so what we'll do is we'll create one container here that one is going to be vertical we'll line it at the top and within there we'll create actually now that we have that we'll create two click on this plus to make a new container underneath and this one will just add a text value in here this text value we can give it a height just to make sure that our skill description stands out and we'll give it a little bit of a margin and we'll scroll down and align the text to the left we'll allow it to have two lines uh just in case our skill names are a little long and we can also give it uh font size 13 should be okay now up here at the top we're going to want to have whether or not the skill was inherited or not probably somewhere in the top right so to do that we'll create another container in here and this one is going to be horizontal and within it we should change this towards horizontal so we can have two so now we can have our um whether or not the skills inherited or not on the right side here um so within there we'll make text value and for here we'll also choose a value for not but we'll see what our inherited value looks like in a second we'll give this a pretty short height we can align it to the right for now we can make the font a little bit smaller we'll bold it as well okay let's save this for now so as you can see it's a little bit of an art form to build your templates out you can select from existing templates to speed things up uh just depends how much flexibility you need when you're building out the card so let's select our other tab and we have here our template selected i'm going to click back to the actual card and open this in mobile card builder so now that we have a template defined it's gonna auto-populate that and we'll be able to select in here and decide which field we'd like which of course should be the skill name and then the value if it's inherited now this may display just true or false so if that happens we can build a ui rule just to make that a little more fancy and display the word inherited or not let's see how that looks first okay so i'm going to swipe down on my mobile app and we should have a skill list view just pretty basic for now we can clean that up a little bit just in terms of our template but not bad for a start for our card now i am noticing a couple things about my skill card here right away that i do want to change so as i alluded to earlier by selecting inherited in the value it's just telling me the word true or false which doesn't really indicate much to the user um so i'll show you a solution for that using ui rules also i noticed that my card is quite big for the amount of content that i'm displaying and so we can leveraging our san diego card size feature go ahead and select something smaller so to do that we'll click back to mobile app builder and we're going to look at our record section and to change this card size we're going to need to do some configuration on the platform side so to access the record i'm going to click up here to the overflow and open in platform and we're going to give it a really small custom size so we're going to select his custom size over here and we're going to give it let's try a hundred by 160 and since we're making it so small we might as well give ourselves two rows just so we can show more cards in the section by default so let's save this and refresh okay we'll leave it like this for now we can always tweak it more but this should be okay to start us off now as i mentioned earlier we don't like how this inherited is just showing the word true and so let's go ahead and take a look at that i'm going to go back to our mobile card builder view of the template which is over here on this tab and in order to display something better than true we're going to use this value and create a ui rule um so that if it's true we can display a separate field that will show the label of that particular field in the database which is inherited so basically for the mobile ui rule to work on the card we need some value to be on the card that we can use as part of our condition for that rule so basically we can have true or false the actual value on the screen but hide it and then use another text element to show or hide the label based on the value so let's first update this existing text element to show a label instead save that and then over here we can create a new text element here which is going to display the value however we are going to make the text white so the user doesn't actually see it and this one sorry it's going to have the label let's save this and then let's click back over to our card view we'll refresh this so we get the latest configuration from the template we can select this element and map it to the inherited field value select this element and instead choose the label for that field and save now when we refresh we should see just the word inherited so far so good but we only want this to display when the skill is actually inherited so let's click up here within mobile card builder on the card view to open up our ui rules and add a new ui rule and we can call this one if not inherited and we can set up our condition here so it's going to need to reference the text value that we created earlier to show the value the one that we use the white font for and that's over here this text underscore o3 so we're going to say if text underscore o3 equals false meaning it's not inherited then this rule is going to trigger and we're going to select the reverse if false so that if the opposite is true it won't so we'll add this now we have our ui rule we just need an action to apply which in this case is just going to be very simple to hide that element and we'll go ahead and save this and refresh our mobile app now at first glance nothing changed but let's take a look at our mobile user just to make sure that there are some skills that aren't actually inherited um so let's click over to our platform tab and we'll look at user skills and since we're logged in as ray william here we'll show only these skills and let's first just clean up the list here for ray williams so it's a little easier for us to see what we're doing i'm just going to leave three or four skills and delete the rest refresh now we see only those three and we'll just quickly give another one and we'll just keep this record simple we can call it apache load balancer and we'll leave inherited off so let's go ahead and submit that and refresh and we should see that apache load balancer appears and it does not have the word inherited here now in case it still shows up for you it's possible that your ui rule is actually configured properly but it just due to caching i've noticed especially the first time you enable a ui rule on a list screen like this you might want to just log right out of the app kill it on the device and restart it just to make sure before you do any more detailed troubleshooting okay so let's just do a couple things to pretty up our card view here and then we'll proceed to make a record view with a detail segment so open back up the template and let's move this inherited word to the right since we know from before we set the width of this card to 160 the easiest thing to to do here would be to select this container in the template and set the width to 160 here and at that point since we have this text already aligned to the right when we refresh on our mobile we should see it move over so that's pretty good i also want to make it stand out a little more with a ui rule so if we flip back to our card view and select the container surrounding this text we can add a new ui rule here so something like shade if inherited and then the condition again we're looking at that text 0 3 for the value so this wouldn't would be if text o3 is true we want to shade it and we'll set the reverse if false add this then click on our action select change background color and just find a color that you like so let's see how this is looking now so pretty good but if we want to center this text inside of the shaded area a little more i'll just jump back to the template select my text and i'll match the height a little higher for the text inside of here and so that should bring it up a little bit okay so we'll leave that as you can see there's a little bit of trial and error there but certainly a lot of flexibility with what you can do one last thing i'd like to do as well is just compress the card down a little more it's taking up a little bit of too much white space there so if you remember there we had made a modification and platform to the record section and so i'm going to go back to the skills launcher screen here and find the records section for my skills open that in platform and here we should be able to make this height a little bit smaller for the card and so we can see that it's 100 let's try 60. and refresh okay so that's not too bad for now i think we'll leave it and move on to so you can see if i tap on if i'm tapping here on one of these cards it's not opening anything the reason for that is if we look back at our list screen and look at the list item config here we can see that this particular list item config doesn't have anything for the for an embedded screen even though it's saying on tap navigate to a screen so to fix that we can click new and then select a record view and click continue here and then we can call this my skills record and for the card we'll just select the same card that we had for the list we need to select an icon but again it's not going to display anywhere so i'll just select one from my existing if we scroll down we should add at least a detail screen here so if we select a record screen segment and then select new for the embedded screen now we can select the type of view with the type of screen we'd like to have here so let's start with the details screen we'll add an icon for it as well and we should also give it a name while we're here we'll select a table that's going to make it easier when we select our fields again we'll choose this user has skill next we can add some screen fields here so we'll click new there and we can select just a couple example fields from our list here so we can put for example when it was updated save that and we'll just add one more here real quick which is just going to be who it was updated by and we can add one more for the description of the skill and for that i'm going to dot walk into the skill and select the description i'll give it an order to put it at the top now once you click save and refresh on the mobile app we should be able to tap into a skill and see the record view now what if i also wanted to see what models were required or associated with this particular skill your first idea might be to create a related list so how we do that would be we'd go into our record screen scroll down take a look at the record screen segments add a new one click continue give it an order probably after the details and we're going to make a new embedded screen and then this is where you'd select your related list however once we select the related list and identify the table which is again user skill and select an icon we're going to be able to select our related list mapping so in this case the problem is the user skill table has um a complicated relationship it's not a direct relationship to the model so if we were to try and create a related list we're only seeing tables where this value has been referenced directly and so we're only seeing user skills which are contained in other skills so we're kind of stuck here so what we're going to do instead is we're going to create an embedded list an embedded segment here containing a models list and what that's going to allow us to do is write our own data item where we can do the query and return the result based on the user skill table instead of relying on the relationship mapping working so i'll show you what i mean first let's just refresh this screen without saving so that we can undo the related list then we're going to go back to our record screen segment or rather our record screen and we're going to look for our record screen segments again and create a new one a regular record screen segment and then this time instead of making a new embedded screen i'm going to choose my model by user skill screen that i've previously created this is a really straightforward model list screen but the only real difference here that allows us to embed this list is that we've added a ui parameter to it so in other words by requiring the skill we can set up our data item so that such that it has a parameter needed the skill and we've mapped it you that particular ui parameter to into the data parameter here so that means that we're going to be taken to those particular models that are related to that skill only so let's take a look at what it looks like in practice by saving it here and refresh now we can see we have our models by user skill we might want to rename that but this will be okay for now and if we tap on it we see that these are all the models that are related to apple computers and we can also see the state here so um by the way if you happen to get or follow along with me and when you save you don't see this particular related list i just recommend to check your acls make sure that the user that you're logged in as has a skill model user role not just the skill user okay so let's just pause and take stock where we are i'm gonna tap back here so we can see this or we'll take a look at our original goal here so we've created a navigation tab with a new section here for skills we've set up that skills screen layout end-to-end with a list and a record view and even an embedded segment indicating the models next we need to set up team skills that we don't have and skills that we want in the interest of time i'm not going to build these out and and like we did for my skills this is virtually identical team skills i do not have except the difference is we can't just use a simple declarative condition on the data item to say you know skills that the team members of the team have and i don't have we're going to need to script out that data item so i'm going to go ahead and build that screen and we'll look at the data item and script that part out only okay so let's assume that you've gone and created your team skills i don't have screen and the related record screen tied to it and let's say we want to add that to our main skills alp here so how we'll do that is we'll go back to our home in mobile app builder and we can look for the launcher screen skills launcher screen find the one that i updated most recently here skills launcher screen and scroll down and see that we just have this one my skills launcher section so far again assuming that you've built out that team skills one then you can look for that select it here give it an order to make sure that it appears after my skills and save and again let's take a look at that data item i was referring to so here's my whole record section list screen screen segment and data item right here so we'll take a look at the data item minimize this scroll down maximize this view and by the way we'll attach this script as well as the update set for our scoped application once we upload the video so that you can grab the code without pausing the screen and having to type it all out again so in a scripted data item essentially what we're going to want to do is return a list of sys ids in a query string format so we're returning a query string that's going to filter that list of skills in this case so how we built this just in a very simple way so it's easy to read we initialize an array of skills but then we have to figure out okay so what teams is this user a member of so we need to go against the groups table where the user is dynamic me not the groups table rather but the group membership table and filter it by that user we're logged in as so that's all this is and then we do a loop for each of those for each of those groups we can then open up a new glide record against the same group membership table and this time add in to our filter the group and exclude the current user so basically what this is going to do is give us a list of users for each of those groups that isn't the current user once we have that we can then start a new loop where we go against the user has skill table and look for the skills that that particular user has that's in a member of one of the teams that the login user is a member of and finally what we still need to do is check that particular skill and make sure that we don't already have it because we don't want same skills that we actually already have to show that there the point is to see skills team members have that we don't have so that's why we would check to see if the particular skill is one that the user has already so this is just filter is dynamic me and then if it's not if there is not a row returned by that query then we can go ahead and add that particular skill sys id to the array where that list of cis ids is going to be there so this to string just takes the array and converts it to a comma delimited list and return that back now once we have all that we should be able to see a list of skills that team members have but i don't have now just referring back one more time to our initial goal the only thing that's left here is this skills i want record section and the idea for this is going to be a table that's going to be extended off of the task table in our application scope and this way whenever we create a function to say you know identify that we want to learn a skill that we don't have or submit a new skill those functions can create tasks in this task table which will uh can then drive workflow for example for manager approval um we're bumping up on time here so i'm not going to create that for you here but again we'll include it in the update set so it's ready for our next session on adding functions to our app so now i'll pass it back to you david to close things off all right so that pretty much wraps up part one of our three-part series of our mobile app building series so i'm gonna highlight now a couple questions that i saw on the chat um there was a question that asked why does mobile app builders show the yellow warning sign that there are some records that we don't not have permission to view so there's typically two reasons for that and the first being is that the team that built that out of the box app might have decided that that particular table or maybe record should not be configurable by customers um and it's likely because it is maybe an unstable configuration or it's something that they don't want to support however there is a way around it if you do want to override permissions that is always something that you can go through your support team to help you do if you want to make further extensions or customize customizations to some of those records okay um and then the second is sometimes you can just override it yourself if you just happen to have um admin and you uh go to the platform ui so there might be a few things that you can do on the platform side that you might not be able to do in mobile app builder and we try to usually give you the training rails um and guard rails in mobile pillars so that you don't you know touch things that could possibly break um so definitely check out the platform view and if you still don't have access to configure but you want to just reach out to the support team okay a second question is uh it seems that there is question around interleaved fields so this is definitely a great topic idea um if you do have any topic ideas for us in the future there is a post-session survey that you can share that feedback with us so that we can cover in future app academies so definitely let us know what topics you want us to explore in the future and then to answer the question though um if you're not aware interleave fields are something that you can use to prioritize um the sorting of your list that might have multiple data sets so you might have a list example of this is on the now mobile app um things like my approvals or my requests you might have list that contains multiple tables right so you have my instance my work order task my request items requests all on a single list and enter leave fields allows you to sort by the field that you want among all those tables so if you had instant work order tasks maybe you want to sort by priority but which one of those tables should show up first that's what it gives you the ability to control okay i'm not seeing any other questions in the chat and we are at the top of the hour so let me go and wrap up um thank you all for joining us in today's session and we will continue into part two in our next academy and as ian mentioned we're going to dive deeper into how you can build advanced functions for these custom apps and how to um troubleshoot some of that okay and again if you do find these sessions helpful please let us know in our post-session survey um and i'll also ask you what topics you want us to explore um if you're interested in any of our past academies we do record these and upload them to youtube which you can find by registering to our mobile community site so make sure to subscribe to that forum um register to our series and you'll get the latest notifications and updates on our next academies with all that being said thank you all for joining us today and we hope to see you again in part two of our app building series thanks everyone