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 ha 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 team to help answer any q and up Q and A that comes up along the way and we want to give a warm welcome if you are 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 do come up along the way and we do host these small laugh academies once every month at 10 A.M Pacific in which our recordings will be posted to YouTube on the search town now Community Channel and just in case you aren't familiar these are a fee resources that you can check out to sell service which you can find on our community site and it points you to all of our essential training materials that you can find from blogs to FAQs as well as mobile trainings on now learning and our playlist to all of our previous app academies which you can find sessions like mobile agent quick start guides getting started with now mobile and over 30 other sessions um but with that being said um we can go and get started with today's Topic in which we further explore getting started with mobile app builder today we're going to Deep dive into configuring uh mobile UI rules uh how do I create a mobile UI role to apply uh conditional UI stylings to my mobile cards um so that's just a quick example a use case um but just to quickly review our schedule for today we'll start with a quick overview on mobile UI rules and then we'll jump into the exercise and wrap up with any q a okay uh but let's go ahead and do a quick overview on mobile UI rules in our last few sessions we covered right back action smart buttons and navigations and in today's session we're going to focus on using mobile UI rules which will modify the appearance of your cards and input form screens in order for you to apply policies or UI styling condition or conditional UI stylings in case your um you've been using mobile for a while you might have heard of things like mobile UI policies and mobile UI styling conditions when we introduced uh Mobile card builder in Quebec which were which was you know quite a few releases ago um we created this new concept of mobile UI rules and this was going to replace our old way of creating UI rules and UI styling conditions um in and by creating this this will allow us to enable a whole lot of more use cases things that you couldn't do before like apply auto field calculations and so much more but just know that you know if you're on likely San Diego or any release after that you're going to be using mobile UI rules okay um and if you take a look at my screenshot on the left here this is a work order task record and the state and priority fields are highlighted in different colors based on the condition that was met so you can see that you know the state of this was work in progress and so there was a mobile UI rule that changed the color of that field to blue and then you also have a priority you know if the priority is moderate high or critical change it to different these colors in which you said okay um and that will indicate to the agent that you know this is an important task you know you should probably look at this um you can also use your URI rules to apply policies such as disabling the buttons or in cards um hiding or displaying field elements making inputs read only or mandatory as well as Auto applying field calculations right in today's example this is going to be a two-part series today's example we will focus on just using mobile UI rules to apply our conditional UI Styles things like changing the text and background colors the font colors as well as being able to add text decorators onto the fields of your mobile cards and I'll show you just how quick and easy it is to do this um uh mobile app builder and Mobile card Builder with our latest Utah release we've also updated those two tools um if you update those two tools to the latest versions uh which you can see in this next slide uh version 21.4 for app builder as well as 21.6 you'll see that it's gone through a big update in which um configuring mobile Guy Rules has been made much easier and I'll show you that in our exercise for today but for today's use case we are going to use mobile URLs to highlight fields in my car to indicate to my agents that these are important tasks to look at the UI rule will give me the ability to change the color of the background uh sorry the text color the background color of that field as uh as well as being able to apply a text decorator to it if I want um and in order for me to configure this I just need to complete three steps first I'll open up mobile app builder and find the screen as well as card that I want to apply this to I'll then open up the card which will launch me into Mobile card builder for me to be able to create that new UI rule uh the UI role will then ask me what are my conditions and triggers right and then lastly you just have to create the rule action in which if the condition is met then it will apply these colors and text decorators okay so let's get started um I'm going to share a new screen and the first thing I want to show are the updates that happen for app builder and card Builder so let's pull up the product docs every three months or app builder and the card Builder have new Store updates they have updates that go through the service down store and so I want to show you where you can find these updates um let's share my entire desktop one second what I want to do this desktop oh one more try okay so um I think you should be able to see my entire screen now mobile device on the left browser on the right if you look in product docs uh these are where we release our quarterly servicenow store releases and with our store releases we usually have um app builder that go that uptakes a few updates as well as card Builder that um I'll take a few updates for app builder um this was released just last month in February um as of February with version 21.4 you can see that pillar now has full feature parity for all features up to Tokyo so any new features that we released in Tokyo all those configurations can now be be done in mobile app builder so this should build your confidence that you know as you're moving forward with your mobile app configurations you should use app builder because we're trying to consolidate all your configurations on a single panel you don't want to be able to navigate between so many different tabs and different tools maybe you are more familiar with platform UI but we want to make that experience much easier using the app builder and so with this update you can now see all your configurations or most of your configurations at least inside of that Builder um we will actually be meeting full feature parity um sorry uh uh Safe Harbor notice but in the next release the goal is to meet full Utah parody and with that release any new feature regardless of how soon we release it um app Builders should be able to uh catch all those updates and so there won't be this weird n minus one um feature parody uh that we have to catch up so something definitely to look forward to okay um next I want to show you the card Builder release notes so let's go ahead and look up Mobile card Builder release notes you can also find it on my left hand nav here um if I click here um the card Builder that I have is version 21.6 which was also released last month along with Utah and first they've improved their open screen previews which are now more representative of the type of cards that users view on their mobile device so let me go and show you what that means um oops looks like my session expired so let me log back in here um login let me go and launch into card Builder here foreign card Builder you can see that there's a lot more details uh and the visuals are a lot more representative of the cars that you'll actually open I think previously um I think it was a very uh loaf Lo-Fi representation of the card now you can actually see what are the where are the fields being placed what are those fields you can see the actual fields are being represented here and you can also see the the description of each one of these previously you would only see the title and when they were added but you know if you use the description it would help your other admin developers help find the cards that they need or templates right and you can see that we've um filtered these by cards card templates and Legacy cards Legacy cards are where what you want to migrate off of right prior to Quebec if you ever created a new list screen or any screen of some sort it was using item view jsons um and those item View jsons um you know in order for you to change the overall format of any one of these you would actually have to go in the Json and write um uh it was quite messy and it was very complicated and so with the introduction of card Builder we've migrated over to templates and cards and so this is what um this will hopefully um help you sort through um uh some of your old cards versus your new cards okay uh and again you can filter through different Scopes see what types of screens that you have and also sort them by A to Z or last updated okay so that's those update the second update is um there's now a new built-in condition Builder to assist you with your mobile UI rule configurations um before this release you would have to Define you know what exactly which element and the name of that element and then uh you know once you find the element find that and map that to the conditions and the rules that you want it was quite of a messy configuration we've simplified this by just introducing condition Builders if you want a mobile UI role you can now select from a pull down list of fields that you want to apply it to and then you select the action that it does you know just a few clicks and you have your mobile UI rules and I'll show you that in today's exercise we're also supporting things that were supported on uh UI stylings prior to Quebec um this was it became a lot harder to do but we wanted to bring it back so it's much easier text decorators now it's just a a pull down menu you can just apply it with that UI roll um daytime configurator um if you want to change your date uh uh format from you know months uh year month day to days ago or weeks ago Um this can now be easily configured with that UI role okay um I think that was the main gist of it but if you want more details feel free to take a look at the release notes okay so let's go ahead and now jump into the exercise um let's go ahead and configure a mobile UI we'll solve this and I'll show you um some of these latest improvements um let's read some comments and questions in the meantime before we started a comment from Mike Love mobile and having to directly edit Json to change the font has been a pain can't wait to see new updates yes and we're excited there with you Mike um it's definitely taking the pain away um some questions uh you another question from Mike is Utah not required to update the tools just got to Tokyo yes that is correct so I am on a Tokyo um instance right now um you can actually use the latest versions of app builder and uh card Builder as long as you can access the servers down store you don't have to wait until you talk to use it okay and if there are features in it that do have some Reliance on the um the family release version which in this case definitely wouldn't because this came out in February and the family release version was not out but if there is some kind of Reliance then uh you can still be on the latest version and the those features just will not be included yep I'm pulling that out another question from [Music] um uh let's let's save some of those questions Tony's questions if we have time we can we can get to that um but uh John asked uh do mobile UI rules now appear in mobile app builder after saving them and changing which screens you're viewing in mobile app builder uh yes um yes John I think and I think you'll be able to see this once I actually start the configuration so just give me a few minutes and let me have any further questions from that uh and is the Mobile card Builder automatically patched when the new release comes out or the user has to explicitly update from the store uh and so the answer that is they do have to manually update through the store um you have release updates which come with the whole family release and then you have separate service now store update because you have to uptake yourself so um these release notes for card Builder and app builder just any Mobile store business we've Consolidated on on this one single page and so I'd recommend bookmarking this so you can see um uh things uh updates and they can be updated uh through the platform itself like where you would update plugins and whatnot it will grab the latest release from the store uh just make sure that you know what you're getting before you do the update perfect uh one last question before we get started um Karen we're planning on you just using the mobile app builder or mobile apps do we start by building a custom mobile app or is there something that servicenow has as a base for starting Karen so that's a really great question we don't advise anyone to ever start just trying to build an app from scratch we have all of these out of the box workflows from different business units they've already built apps based on how customers are typically using um the platform for their needs whether it's itsm field service or employee experience there's already a out-of-the-box experience for that and so we'd recommend checking out those experiences what comes out of the box figuring out what you need um as uh and how easy to use the surface out platform and then documenting those gaps and then you use our app Builders to fill in those gaps right so we'd recommend reaching out to your business unit teams reaching out to your account teams and making sure you find out what are the experiences available to uptake before you get started okay uh but okay so I think that's a good um break to his now to start digging into our configuration let's get started with configuring a mobile URL what I'm going to do first is I'm going to launch a mobile app builder okay and again what I'm going to do is uh what you're seeing on the left hand side here is I have the box build server mobile app installed and so this is um kind of the experience that you see this critical task was something that we configured custom but everything underneath that came out of the box as you can see what I want to do is as an agent if I look at all my critical tasks um right now I only see highs and criticals but imagine there was also like low priority um work order task I want to be able to highlight some of these to make sure that my agent's eyes are looking at just the most important ones and so if it's critical or high let's go ahead and highlight some of these fields so they pop out okay so once I'm in mobile app builder I'm going to launch into field service mobile skill since this is the out-of-the-box field service experience right all the configurations that they've built inside of this app can be accessed from this scope here and then um since I'm trying to configure a mobile article I'm trying to apply it to this specific screen and so I'm going to launch this I'm going to open up the screen this screen is called critical task and so I will look up exactly that critical task I'll open that up and then I need to Now find the card of this uh right here you know I can keep clicking until I find this card but if you're more experienced you can kind of navigate on this left-hand nav here and quickly I can see that there is my list screen here and here is the car that's associated to that list screen so I'll click on my card and then open up inside of Mobile card Builder and then we'll give this just a few seconds to load I do have a lot of demo experiences inside of my instance and so um my instance might be a little lower okay so now that is loaded um you can see that these are you know the four or five fields that I have attached to this card um I can apply my mobile URL to any one of these elements whether it's a field or an action you can see that I have an edit action here I can apply a UI role there too I can apply to icons um if I if you look at on the on the right side this is your tab for UI roles you can create a new UI role you can apply your conditions and then once you apply your conditions you create the action and it'll show you what actions you can apply to that element for our use case all I want to do is make this number field pop up anytime that the task is critical or high so I'm going to add a UI rule here um and we'll name it uh you know task critical task we'll just call it critical task um and then my condition will be it's going to ask which one of these fields um that I have on this card I want to party is one of critical and hi so if you're not familiar with this this condition this condition Builder is completed um before this you would have to actually write out the text yourself you would have to figure out what the element name is whether it's container two text underscore O2 and then you would have to figure out what the available values are and so you would have to go into the table dictionary and find out what are all the valuables available and then you would actually write all that out these condition Builders are going to save you a whole lot of time right and so this is what you're seeing with the latest enhancement so now that I have my condition created I'll go ahead and click add um I wanna let you uh Point your eyes over here um after you create a UI role if you click on this show you why role action indicator oh it doesn't show up yet okay so let's actually create the action first um back on this after you create your UI world you have to navigate your mouse over to this little action button on this right hand side that says apply actions to the selection element I'm going to click this and create my actions you can see that there's four actions available based on this element I can either hide it completely based on the conditions met or I can change the text color change the background color add a text decorator if I want as well as The Decorator color so these are my UI styling conditions right um and again in next Academy I'll show you how to apply policies but let's just focus on these three styling conditions um let's go and change the text color to one of these here you can see that um if you have any um uh theming uh applied to your instance you can you can access it on this second tab here or you can just pick from one of these colors here uh so let's go ahead and just make this text you know neutral color click save I'm going to change the background color so that it pops out more let's make it a uh let's make it like a bright red and then I'll apply that and then I can also apply a text decorator um among this list of decorators it can be an alert a flag uh let's just give it a flag and then we'll make that flag um white hopefully that will show and then we'll click save so with just that I can now just refresh my mobile app by swiping down on the home screen and I should be able to see the UI rule show up and there it is so you can see that there's a white flag next to on that field there it's highlighted red okay um I can also apply my UI rules to buttons these ones if I tap on this edit button right it will allow me to execute whatever that action is um let's say I created a UI role here um we'll say purple task action we will um I don't know maybe we say if as the priority is this doesn't make sense but let's just I'm just show an example you know the priority is critical I'm going to add that add a action we'll disable the button anytime that that condition is met right just showing you so it works um uh sorry I'm just showing you this example to show you what it looks like uh so if I swipe down it should be able to hide that button as well let's give another refresh uh so it doesn't looks like it doesn't actually um hide it what it does it disables the button so now I can't actually tap on that action anymore because that condition is met um this one's critical if it's high I can still execute the action if I want okay so that's just a quick example um so that that was a very very quick um introduction into Mobile on how you can use them to apply your UI stylings again this is just part one um in our next Academy we'll teach you how to use rules to apply your conditional policies um any questions before we go ahead and wrap up here uh charity were there any other um questions that we want to pull up we have one question from Mike can you show our UI rule example of color change based on a date that's been passed I was able never able to get that to work in San Diego uh that is a great question um I haven't tried that before but we can give it a try let's see what it looks like with this new thing and if we can't get a Rick I can follow back up on if you post it on the community um page we'll follow back up but let's give it a try um I'm going to change one of these fields to a date field I'll apply my conditions and then we'll try to apply an action Okay so let's go to app builder and I will go into this card Tempo oh no sorry uh card Builder I can just change the field from here I'm already on it uh let's just change let's just give this field right here a value um I think this is currently pointing to work order tasks so I just need a a field that has a date here um or any one of these fields a date maybe as that's a duration field travel duration estimated end which one of these is a date for sure schedule starts this is probably a date we'll select that and then save let's go ahead and refresh this and see if it pulled up I'll give you another refresh oh and there's my date okay so now now that I have my date field let's go and try to apply a policy here um let's create a new UI rule we'll call this critical task uh date um it will apply to my expected start and it looks like uh it will make you know if you had to write this um with text it would be a lot harder but thankfully with my condition Builder you can see all the different values that I can pick from um let's just say that you know if the expected start is before today which I'm trying to force this to trigger I'm pretty sure this starts before today this 2020. so last year yes this should work let's add this if this meets the condition which it does let's apply a rule let's change you know the text color to something else let's make it let's make it purple we'll save that and then we'll save and then uh let's give this a refresh see what happens um and then one more refresh oh and there it is so it looks like I was able to get the dates work um I'm sure this configuration was much more difficult prior to the condition Builders being introduced so Mike hopefully that um answers your question cool um love it thanks awesome glad uh glad it was helpful I've also included a link in the chat to a docs page that has some um high contrast combinations so you can actually add the hex code instead of picking a color so if you have you know Ada concerns or something you can use those um or if you have a developer who is colorblind which worked with then they can just choose that and they don't have to worry about whether or not the colors are uh correct perfect oops so I'll give Dad call back later uh Mike I mean sorry um Akshay there's a question is the first lecture in the series no it is not uh if you go to YouTube and um actually no let's let me point you to community that's better Community will just give you all the lectures videos that you can access you scroll down on this mini site and go on sign up for mobile app Academy here you can see all of our past academies and links to it okay uh oops looks like I forgot to hyperlink so I need to go ahead and do that but on YouTube uh if you look up mobile Academy we have a playlist here viewers you can see all of our capacities okay now if you're asking in regard to like UI rules and styles this is the first of I believe two I think you're just gonna have two uh on UI rules and styles using the new functionality that was added in February exactly um Tony I'm gonna ask uh because that's kind of more of a platform question can you please ask it on the Community page and I'll hopefully someone will follow up I don't have answers to all those questions um at the moment so Tony please post your questions to the community sites uh but with that being said um thank you all for joining us today um if you found this session helpful little please let us know in our post session survey there's gonna be a few questions to ask you what topics you want us to explore in the future we love getting that kind of feedback so please let us know um also want to mention we are scaling back our academies from bi-weekly to monthly and so our next session will be on April 28th in which we'll cover out of uh the second piece of mobile UI rules which is how to apply your policies um we are getting ready for knowledge and so you know knowledge is coming up uh middle of May and so hopefully I'll see some of you there and um with that being said thank you all for joining us today uh and we hope to see you again next month at our next mola Academy thanks everyone cheers