good morning everyone and welcome to mobile app Academy this is our live building Series where we show you how to build and configure mobile apps on the now platform my name is David Hall and I'm an outbound product manager here at servicenow and I'll be your host for today's session um I also have charity cats with me from the now learning training in curriculum uh to help answer any q a that comes up along the way and if you do happen to be joining us for the first time welcome to the session our product experts are here to provide guidance best practices and answer any questions that you have and we host these app academies once every month at 10 A.M Pacific in which our recordings will be posted to YouTube on the servicenow now Community Channel uh in case you aren't familiar just want to point out a few resources if you're new to mobile we'd recommend that you check out some of our self-enamed resources that you can find on our community site such as our essential training blog and mobile FAQs but we do have other resources such as labs and mobile trainings on now learning and our playlist to all previous app academies where you can find sessions like mobile agent quick start guide getting started with now mobile and over 30 other Academies um I also want to point out if you do happen to be joining us for knowledge next month we do have two mobile uh lab sessions they are more on the beginner side getting started with mobile app builder but we have a mobile one-on-one session and a mobile 201 session so if you do happen to be joining us for knowledge definitely check those out and feel free to register but with that being said let's get started with today's topic um in which we dive a bit deeper into Mobile UI rules today I'm going to show you how to configure mobile UI roles for both your cards and your input form screens uh just to quickly review today's schedule we'll start off with a quick overview on UI rules and then we'll quickly jump into the exercise this will be a very short Academy today um but we'll wrap up with some q a if there are any questions after this um but with that being said um in RLS session we use mobile UI rules to apply our UI styling to change the color and appearance of the text on our mobile cards right so if a meta certain condition you would be able to change the text and color um in today's session we're going to be using mobile UI rules but rather we'll be using it to apply our UI policies and a lot of times you might have UI policies on the platform and you're trying to figure out how do I convert these over to mobile because platform UI apologies do not automatically transfer everything you have to create specific mobile UI rules to be able to apply any policies that you want on your mobile cards or on your input form screens okay you can see on my left screenshot here that this is an input form screen with three fields for any of these fields shown you can use UI rules to apply your policy students right so things like hiding the field making them read only or maybe making it mandatory or you can even do things that require things like Auto applying field calculations um you aren't able to do any client scripting things that you might have been able to do on platform but we have we are looking into common use cases uh common use cases for client scripts things like applying field calculations um those simple arithmetic uh calculations can be done through mobile UI rules and we are looking for further client scripting use cases to be able to add into for mobile URLs and future releases as well but for today's use case we'll be focusing on the three bolded policies here um disabling buttons uh or hiding elements on mobile cards and making inputs read only or mandatory these are some of the most common UI policies that get converted over from platform to mobile um and in order for me to configure this it will be slightly different depending on where I will be applying this mobile UI rule if it's on a mobile card then I can apply my mobile UI role by opening up Mobile card Builder or uh opening up the card inside of the app builder but if it's on an input form screen then I'll just have to open up the input form screen itself on mobile app builder and uh configure it there and it it's the same two steps whether it's on a card or on an input phone screen we'll first create the UI rule which are the conditions and triggers and then we'll create the mobile UI role action which will actually apply my UI policy that I want if the conditions met okay so let's get started here um okay let me share a new screen okay so you should be able to see my desktop now um and the first thing that I'm going to do is I'm going to launch open mobile Builder uh for our first use case uh let's open up one of these critical tasks here this is a list screen that shows me my p1s and p2s um and what I want to do is uh let's say I wanted to disable this edit button um if it meets a certain criteria and for whatever reason you know if it um if it is a P1 or PT we'll make this button disabled if it's any other party then you should be able to edit it okay and to do this we'll first launch into the field service mobile scope which contains this critical task list screen here and so I'll look up critical task this is the list screen and we'll open that up and um because I'm applying this mobile UI roll to this card I'll need to find this card right and then I'll have to open this card Builder up so you know I can do that a couple ways I can either scroll down and keep clicking until I get to the right screen or if you're a bit more familiar then you can actually scroll down on this left-hand nav and I can already see that there's a list item config and card underneath that okay so here is the card for my critical task now I'll go ahead and just open up Mobile card Builder to launch it and card Builder is where I can create half of my mobile UI rules again if it applies specifically to a card um you can configure the UI rules in card Builder but if it's for an input form screen right like an action of some sort then you'll have to open up the input form screen on app builder to apply your UI rules there oh okay so here is my card with all my fields and some of the policies that we applied last Academy right we made this field red and we applied a text decorator now let's say that I wanted to apply a UI role to this edit button um to do that we'll first tap on this element we'll tap on this UI rule um tab right and then we'll go ahead and click add a UI Rule and then we'll give it a unique name of some sort let's say that I want to disable the button the edit button when P when for P1 P2 test okay um and the condition will be when priority something to point out um these condition Builders are new by the way um this I'm using the latest app builder version I believe this is 21.4 and as well as the latest card Builder 21.6 and with some of those latest updates you get these condition Builders so that you're not manually figuring out what text elements I need to pick um and manually writing those out right so this will save me a whole lot of time and confusion um but you can see that this condition Builder only allows me to select the fields that are on this card I have four fields and that's why it's only showing those four Fields we've had further enhancement requests asking you know can I apply rules that use Fields outside of my card we are looking into this and we are that's definitely been an item on our roadmap um that we will prioritize in a next few releases um so that's where we're at with that but for now let's just apply this disabled POI rule to Priority when priority is one of P1 and PT okay I'm just using this as an example um just to show you that this works so let's go ahead and have that rule this first part was just creating the conditions once you've created the conditions you can find your UI role on the right here and then you're going to want to click on this Arrow icon to apply the actions to the selected element I've only selected the element in which I want to apply to the role and the condition now I have to create the action to decide what it does um and I want to turn on this disable button here this disable button will only show up for elements that are for buttons this is a button for an action if I click on this text element you'll notice that you'll have different UI roll actions right you now have hide element rather than disable the button so just something to point out um for edit let's go and go back in there we'll disable the button and then we're going to click save so now this button should disable every time that this condition is met where priority is one or two okay so if I refresh my screen here um you'll notice that this button for my P2 is now disabled I can no longer tap on that um card action okay um something else that I want to show um what if we wanted to hide one of these fields based on condition how would I do that now that if we disabled a button let's say that I want to hide um I don't know let's hide anytime priority is one or two let's also hide the uh number field I don't know just using that as a quick example um we'll hide this number element which is a text field anytime P1 is p anytime priority is one or two so we'll create a new UI role here and we'll say hide number field when desk is p102 and then again we'll select the condition as priority is one of one or two and then again we have to hover over this Arrow icon next to the UI rule that we've just created to apply the action which is height element and then we'll go and save that so with that I should be able to slide the number field if I do a quick refresh do another refresh there okay um and there you can see that the number Field's hidden for all of these uh p1s and PTs I think this critical task only shows p1s and PTs and so um and then if there's any uh policy that you don't that you want to undo or set in uh you know disable you also have this active button here if I set that to inactive I should be able to see my number field again and there it is okay so that was just a quick example on how to apply you know UI policies for your mobile cards now um if I go into this critical task and then I have a second edit button here on my footer action um if I tap on that it launches my form screen and shows me uh some of these fields in which the user can edit right and they can change the short description they can change the estimated end or apply a long description if you want how would I go about applying my UI rules to this um actually before we get to that there's one more rule that I want to show and actually came up um recently uh as a customer question um how do I change this text format to show you know weeks ago or days ago um I think it's a bit hard to read when you're looking at just a straight text year month and time text I think it'd be a lot easier to digest if the user just saw you know this task was created uh you know three months ago or two days ago right so um if I click on any text field that is expecting a date value right um I can create a UI rule for this and change change text uh date value to days I'll go format um and I won't apply any condition to this um you can you can say that for any record where the date is greater than 2023 you know to signify that any record that was created this year you can apply it but I'll just apply this to all records so we'll leave the condition as blank and then again we'll hover over this um Arrow icon to apply my action in which there should be this hidden little policy here that says display date as a time frame right and we click on the information it says that it will display your text value as minutes hours days months and years uh until or since the date and time so let's see what happens when we turn this on and Save um so we'll give it a quick refresh interesting and you can see that that date time changed to seven months ago two months ago and so forth a lot easier to read right so a nice little um uh quick configuration you can do there um let's see some of the comments that we have um I had some problems creating UI rules for input form screens out of mobile app builder after creating the role it does not show up under in molapit or under in perform screen only in UI 16. also the onload and on chain triggers were faulty and had to be added new again in UI system to get them working uh Benedict you actually raise up uh something I was going to bring up today um we do have an open Bug for UI rules for policies for for input form screens if you create them in mobile ad Builder with the latest version you'll run into the issue that your rules won't work and so you'll have to create it under UI 16 in the meantime but we're currently investigating the shoot and uh should have it fixed within the next update so um thanks for calling that out um question from Mike I asked in the previous session how to apply URL based on date having passed I updated my plugins to the current version I still believe the functionality does not work correctly um in that the UI role will always apply even when the date commission is false uh Mike can you open up a case for that I want to make sure that you know the first our team takes a closer look to make sure that what you're experiencing is is um that seems like a a broken experience so we definitely want to take a look at that so feel free to open up case for us to look into in the meantime um and then Mike and Benedict uh just to make sure that you guys are on the latest versions um I'm currently using app builder 21.4 as well as Mobile card Builder 21.6.1 okay all right um let's move on to UI rules for input form screens uh so to get started um I'm gonna go back to mobile app builder let's close out a card Builder I don't need that anymore um and here I have my critical task list screen again I need to find my edit footer function right um I know that this is associated to the record screen so I just need to scroll down to record screen segments and you can see that here is my critical task details if I scroll down here you can see that there is a footer function Associated for edit um on my function instance um underneath it you can find the function itself which is and it work order task and here I should be able to open up my um if I drop into the correct scope open record from here I should be able to open up the action item which will have my input form screen okay so this is where I can apply my UI rules to input phone screens um on my input form screen for a task if I scroll down there should be a section for UI rules at the very bottom and this is where you would create your UI rules um now this is where I would create my URLs um again we there is an open Bug uh with this latest app builder version um for whatever reason UI rules that are created on app builder won't actually um turn on when you create them here and so as a workaround um I'm actually going to navigate outside of app builder and uh I'm going to actually create this on platform UI instead okay uh to do that I'm just going to look up mobile UI rule right and uh I'll be able to create a new one here okay what's nice about building them inside a mobile app builder um there's less steps and less um pointing things to the right record right if I create the UI rule here I'll directly you know there's some fields that automatically get filled in for you but when he creates them on platform UI you'll have to know exactly what screen where to point it to and making sure that they all apply so um a little bit more painful but we'll do it just because um uh for for now um so let's go and name this mobile guy role um what we want to do here is uh let's go ahead and open up this input phone on screen let's say that um order mechanisms let's say that uh I just want to make this description a read-only field right so how would I go about doing that um so we'll set make description read only and we'll give it to mobile app unique naming um for any condition uh when you're creating them for input form screens unfortunately we don't have the condition Builder um for for input form strings yet this is something we're working on until you'll have to type these out manually um I won't apply any condition we'll just make the description read only uh for parent table um if you're applying this to a card then you will select mobile view but since this is a input form screen we'll be applying this to the parameter screen again you know you wouldn't have to worry about these when you build them inside a mobile app builder these are um the table names on the back end and then for triggers we'll do just an on load and then it's going to ask for Target record so let's go ahead and find this edit task record um oh nope um that was a trigger sorry uh so let's go ahead and save this for now oh is it asking for a parent sorry parent is where you select your uh input form screen so let's select search for parent and I believe um you know this document field is asking what is the name of this input form screen again another hassle that you would have to go through if you build these on platform you like um I know that this is called edit task and then we'll go ahead and Save okay so that was just the condition part right um since I don't have any conditions all I did was map the correct input phone screen here and decide that this is an online unload trigger um so now let's create our mobile UI roll action um again it's going to ask for Target uh and operation so let's decide our operation first we want to make the description field read only and the value if you want to know what values you need to write out we do have these on docs so if you look up servers now mobile UI rule should be this first DOC here on Google search we'll give this a second to load but we didn't have all of the values written out on the dots so let's scroll down here under mobile UI rules create a mobile UI role action right if we open that one up um it will if you scroll down you'll see what are all available values depending on the operation that you want so since we're trying to make this read only if you set the value of the true then the element becomes read only so it's pretty simple um let's set this to true and then we'll submit okay so at this point um I just noticed that I forgot to set the target so let's open up that record again and let's make sure that we're selecting the right field that we want um we want to set description to read only and then we'll update that okay so now at this point if I do a Refresh on my mobile app that UI rule should turn on okay we'll do a refresh here and then click edit so now you can see I'm actually trying to tap on my description field but uh it's really the only so I can actually tap in it if I want to change the estimated n I'm still able to do so short description right okay so this UI rule works um let's show one last UI role for for the screens and then we'll go and wrap up um let's also show um set mandatory so how do we make how do we make this description field a required field that the user has to fill out right so um I'm going to set this role to inactive and then we'll create a new UI role I'll speed through this one so let's make this uh make short description mandatory uh we won't apply condition we'll just force it to work this is a parameter screen and then we'll select the edit task input form screen and then triggers don't matter since I don't have any conditions and then we'll submit order save we'll create our mobile URL action um the operation you can see all the ones available here right so you do things like simple arithmetic date calculations set visibility read only mandatory um you know we'll do set mandatory it's going to ask for a Target uh we'll choose description and then let's review docs again to see what values I need to set for mandatory to work so if we set it to true then it does become mandatory so let's set it to true and then we'll click submit and then if I do a quick refresh here you can see that that description field is now required as you can see by this little red icon okay so you know I can't click submit until I fill something out here so um I don't know um internet lost on or 25. normal Smith okay so that was a very quick walkthrough on how you can use mobile UI rules to apply them to both your mobile cards and your infant performance trains um we are working on this open bug you should be able to the the intent experience is for you to create mobile UI rules in app builder and it should be a lot more simple and quicker to do um so just look forward to the next update uh in which you'll be able to build them on Apple instead okay um any questions before we wrap up uh we have a question from Stefan can he create a new mobile app with custom branding and distribute to your organization without going through one of the official Google or Apple app stores um uh without going through the official Google or Apple App Store so the question is can you have your own app basically um without releasing them through the appsource the answer to that is no um you know uh basically when you go through the mold publishing process right we build the app it's completely new app that you can manage yourself um and you wouldn't be able to distribute that unless you go through Google or Apple um and that would require you know an apple business manager account or you would have to have Firebase um to be able to use it for Google right um so Stefan if you have any further questions feel free to reach out to your account team um we have but I don't think you have to go through the app stores you have to have a business account so that you can um have certain configurations set correctly but it doesn't have to be published to the App Store to be downloaded you can if you have an internal repository where you allow people to uh add apps um you can do that through like a management system um your phones though would then have to allow the installation of third-party apps essentially because um it wouldn't be coming from one of the app stores so um I don't know that that's always I don't know as much about Apple but I don't know that that's always as easy with apple um I know you know you can definitely do that with Android but then it can open the phone up for people be having things installed that they should not be installing because they've set that setting in their phone to allow that third party installation um so in terms of distribute distribution you can distribute it internally uh but without publishing it to the App Store but usually publishing it to the App Store is probably a little bit safer but if you are using a mobile like a device management system um like an MDM you should be able to publish it there and keep it kind of internal as well thanks for the clarity charity um if that was clear I'm not sure if it was but and then Stefan uh feel free to you know reach out to the account team if you have any further questions I did want to make this mobile seq um visible we have a immobile publishing ftt service now um on this FAQ you'll find a very detailed list of resources in which we try to answer every question possible when it comes to mobile publishing so definitely recommend checking this out as well we also have a technical FAQ in which our product managers block through the entire process from the form submission to everything there okay um Benedict mentioned uh that you know he's also running into some issues linking inputs from sections um Benedict I'd recommend opening up a case just so that we can take it closer look um but thanks for making that visible um and then some of these other questions are a bit too deep dive um if you have any specific questions to your customer environment I'd recommend uh opening up a question on mobile community that way our team of mobile gurus as well as the broader Community can help answer okay and Tony had his hand raise I'm um thinking maybe it's because of the questions that he has there in the I think those are a bit too specific right so again Tony I'd recommend opening up a mobile community uh post um and I think that broader Community is the best place to post on those questions and I think your last question which seems more relating to like platform security um would be not necessarily mobile Community but in the like um like in the community there will be a you know a security error platform section that would that they would probably be best to answer that question um perfect okay um thank you all for joining us today um again if you found this session helpful please let us know in our post session survey oh I'm sorry Tony yeah about the acquired company I I don't have an answer to the acquired company so I would that would also I'd put it in the general Community not the mobile Community I apologize misread okay um but I do want to mention that we are scaling your academies back from bi-weekly to once a month um and so our next session will be on May 30th um we do have knowledge coming up on uh I think the third week of May and some of our project experts will be there um so if you have any questions feel free to reach out to us on the knowledge floor um but we hope to see you there and in the meantime um thank you all for joining us today and we hope to see you again at our next app Academy