good morning good afternoon good evening everyone and welcome back to mobile app academy where we show you how to build and configure mobile apps live on the now platform my name is charlie steiner product marketer here at servicenow and today's session will actually be continuing our mobile classic migration series started in the past few mobile app academies with how to migrate your ui policy mobile ui rules and for some extra help we do have our mobile classic office hour sessions which will be tomorrow and the next couple wednesdays of march uh so do be sure to check that out our community and i'll talk about that a little bit later but if you are joining us for the first time we want to welcome you to mobile app academy which is a live building series that focuses on managing and building out mobile apps in real time we have product experts on hand to provide guidance and best practices and answering any of your questions in the chat so we host these sessions every couple weeks every two weeks excuse me here on zoom at 10am pacific and you can find the recording of this session posted to our youtube playlist thursday morning specific time as well and that playlist does contain all of our past recordings so do be sure to check those out as well a few additional resources i want to call to your attention before we get started today is our mobile community page is just chock full of great awesome stuff you know getting started guides labs um best practices how to's implementation white papers uh and are recently updated for rome a best practice uh for best practice for building and configuring so ux ui um white paper that was recently updated to check that out that is in our featured content section and on the right is our app academy playlist where you can find awesome sessions ranging across mobile from deploying now mobile to getting started with mobile card builder global app builder and our couple most recent sessions on how to migrate from mobile classic so all that can be found in our youtube playlist do be sure to subscribe so you never miss a session in case you can't join us live for one week one more thing to note is we do have sister academies across servicenow that do wonderful wonderful stuff in hr in platform foundation a little bit more developer focused and reporting and analytics everything now intelligence and of course a virtual agent so if you're interested in any of these sessions do be sure to check them out let them know you came from us show them some love and you can find them by navigating to the forums tab on community and going to their respective pages where they will be linked on their page and as previously mentioned we do have an ongoing series a weekly series for mobile classic migration so if you have in-depth questions or you're struggling with something or you just you know want some feedback on something that you're working on with regarding to mobile classic our zoom is open 9 30 a.m pacific time and we'll be here to answer any of your questions and walk you through anything we can um regarding mobile classic migration you can check that zoom link out on our community page it is a featured tab so it'll be easy easy to catch and easy to sign up for and we hope to see you tomorrow or if not tomorrow the next couple weeks so be sure to use this resource and if we need to extend beyond the next couple weeks in march uh we'll do so at a later date but for now i'd love to see you tomorrow or in the next couple weeks all that out of the way david haw as always our fearless mobile leader will kick us off on today's session thanks for that intro charlie hello everyone and welcome back to another mobile app academy my name is david hawk and i will be your host for today we also have a handful of folks representing our mobile team today we have charity cats uh david murch in keener and uh maybe a couple other groups who might roll in uh throughout the session but they're all here to help answer your questions along the way so don't be afraid to ask your questions in the chat or the q a panel okay but to kick off today's academy we're going to show you how you can apply ui policies to your cards and input form screens using mobile ui rules uh in last week's session we showed you how to configure actions using input form screens so we're going to take another step further on how you can apply your policies to those as well as to your cards okay and also show you all the different ways that you can use mobile ui rules as well this is our part three in a four part series um in our next week's session we're going to be covering our very last session on mobile classic okay so stay tuned um just to quickly review for today's schedule this will be about a 40-minute session um we'll start off with a quick 10-minute overview on our goals for today what we will implement and how to get started and then we'll jump into the exercise we'll cover the basics on what it's like to build a mobile ui from scratch or the asian app and then show you some tips and tricks along the way and then we'll open up to some open q a afterwards okay uh oh before i jump to that actually um if you are looking for more hands-on training as charlie has mentioned um i recommend that you check out some of our earlier mobile app academies we actually covered a couple videos called mobile ui rule mobile ui rules for policies in quebec as well as a video on applying styling conditions on mobile cards using mobile ui rules and those videos explain why we introduced the concept of mobile ui rules and while we had to migrate away from using ui styles and ui policies so definitely check those out if you haven't already and then charlie can also throw a link in the chat okay but with all that said let's jump into our overview for mobile ui rules and if you're not already familiar mobile ui roles is what we use to modify the appearance or the behaviors of your mobile cards and input form screens right the mobile cards are you know that's like your mobile view on that screen it's like the header and then the input form screens it's that action window that pops up for the user to input whatever you want right and some examples of this include you know being able to hide fields make fields mandatory or read only or maybe even applying your ui styling conditions um on platform or mobile classic you might be familiar with using you know mobile ui policies to do these sort of things but for mobile um we use completely different tables so you're gonna need to recreate any policies that you might already have on the platform by using mobile ui rules they don't auto just automatically migrate over your admin will need to configure each policy that they want to be able to apply it to their asian or now mobile experience okay and then for the folks who have some experience already developing on our mobile platform mobile ui roles is a new concept that we introduced with mobile card builder starting in quebec and the important thing to understand here is that our investment in tmobi rules will allow us to expand into further use cases that our old legacy tables could not support in the past for ui styles and mobile ui policies and just to highlight some of these as a brown we're now able to support on load and on change triggers so you have more control on how you want to apply your policies using mobile ui rules um we also support read-only inputs on your input form screens and that will give you control on you know what that what your users can see and what they can update on their actions um and we also support things like field value calculations uh date time calculations and the ability to disable the buttons on your mobile cards and if you want to learn about uh any one of those all those details can be found on our product docs we've um updated uh quite a bit if you check out either the rome or san diego docs okay in today's session uh i want to focus on how you can build a couple mobile ui roles from scratch this is just a quick screenshot to show you how your classic ui policies are going to be different from our new mobile apps policies um all of your pre-existing ui policies will not migrate over right um you'll need to create uh a mobile ui role for each policy that you want to apply to your agent or now mobile client but i do want to emphasize that on the bright side um likely when you're deploying one of our apps you're likely leveraging one of our outbox experiences such as field service mobile app and thankfully those view teams have created dozens of different ui policies that you might want to leverage as a starting point so it's just a matter of exploring what's available out of the box and then figuring out what other policies you want to migrate over to your existing experience um and then you know building out the rest using mobile app builder or mobile card google okay uh there has been some enhancements that we've introduced recently um something i want to highlight we recently introduced a new update through the servicenow store that will drastically improve your mobile ui configurations for cards um if you you know have some experience configuring mobile ui roles in quebec you might be familiar with you know how tricky it was to map fields to text elements uh to the rules that you want to apply to those you know the experience wasn't you know very intuitive with that first release but once you've updated your mobile card builder plug-in to version 19.3 you'll find that there's going to be a new visual interface inside of more card builder that will allow you to quickly build your rules and then point them to the fields or components that you want on your card the fields that you see on that card you can just point and click and then apply the rules directly to them right so it's it's a much easier experience okay for input form screens the configuration experience is pretty much the same as it was in quebec we'll be using the platform ui to configure policies uh to get those applied to your input form screens uh but thankfully we won't have to map any text elements to rules so it's not as confusing as uh it was to configure it for cards it's just a matter of defining the conditions and the role role actions that you want and i'll show you what it looks like during our exercise for today so it'll make more sense okay but with that said let's go ahead and jump into our three common use cases that i want to cover for today our first priority is being able to create a mobile ui role that allows me to highlight records depending on the condition that i want okay so that that's basically a ui style second is being able to create mobile ui rules that are applied to my mobile cards so i can do things like hide a field on the card if the conditions met okay and then lastly is being able to create ui rules that control the behavior of our input form streams for those actions right so we're going to create a role that makes our you know short discussion input read only when a work order task is assigned to each or whatever that condition that i want it to be okay so let's go ahead and jump into instance now and i'll start um with this first use case so um we'll go back to the home uh just a quick reminder when we want to build policies or roles that apply to our mobile cards then we use mobile card builder but if we're building it for our input form screens then we'll be using the platform ui okay for our first use case we're going to build a ui rule that applies ui styling to our cards so if you look at my mobile device on the left hand now let's say that you know if um the priority for any of these tasks are high or critical i want you know one of these fields highlighted up so that it indicates to my agent that this record isn't born okay um and to do this i'm gonna first jump into mobile card builder and i'll show you this new experience let me zoom in a little bit okay so the first thing that i want to do i think this assumes should be okay is i need to find which card that i want to configure okay um and if you're not quite sure what the name of your card is i would recommend going into platform ui and look up their screens [Music] and then i know that the screen lives on my home tab for my work um but i believe if i click on see all it gives me some kind of indication i think this screen because i looked it up earlier it's called work order task and i know that this is coming from the field service scope so it's probably going to be one of these two um [Music] i want the list screen so i'm gonna open up this first one here and i'm gonna show you where you can find the name of your card just to confirm you're configuring the right thing okay i'm going to go into the list item config and then there's going to be a card name work order tasking card and this is the card that i want to configure if they're uh if i want to be able to apply this policy here okay or ui role sorry so now that i know the name of it i'm just going to type in work order task um and notice that you know you also have filters over here if you want to find it through mobile card builder you can define the scope as well as the screen as well um so i think this is it right here order taskmate i don't see any other main card or main let me confirm it's gonna be main card okay so we'll open this up and here you're going to start seeing something new here so i've updated my mobile card plug-in to the latest 19.3 from the servicenow store and you're going to start seeing this new tab called ui rules um you're also going to see some of these yellow indicators here um but basically essentially what you can do now is you can actually just click one of these fields or text elements and then add a ui role directly to it so it's much it's a much faster experience before you had to jump into the platform ui figure out what is the text element name and then you know find what target it was and it was kind of a jumbled experience but now it's it's a lot more intuitive and you can see that with these yellow indicators that there's already some polish rules that are being applied you can see that you know out of the box i think filters built like these 12 ui rules ignore these test ones these are the ones i've created to for testing earlier for my sake um but you can see that there is a rule here for value um and if you look at the ones highlighted uh if you click on this little yellow trigger it shows you what is being done to that um to that element so i don't see it doing anything here um maybe it's just the wrong condition but i don't really care about that what i want to do is i want to be able to highlight this number field anytime that the priority is let's say critical so i'm going to make this workload task highlighted in red just to make sure it pops out a bit to let my agent know that it's important task okay so i'm going to create a new role um and i'll start by clicking on this text element and create add rule okay and i can name this uh you know highlight a number when uh priority is critical and then for the condition this gives you uh some condition syntax examples um and some you know best practices on how to define them uh what i like to do is uh i'll go into my into the platform ui i'm gonna duplicate a tab here and i'm just going to go into a work order task and then open up one of these and in my filter um i'm going to apply my filter there uh the filter i wanted was priority is critical right and if i run this filter i'm able to right click this right here this query condition and then just copy the query if i go back to mobile card builder i can just copy and paste okay but the important thing is you can't um in order for the mobile card builder to know where this condition is being applied you actually need to pick um which element uh it is applying to so i want the condition to apply to this number field here and if you look at our left hand nav it's highlighting um the number text element it's indicating to me that the number of this element is called row underscore one underscore right okay so all i have to do is um uh write out one row one right equals one uh i know that party is one because i used that query condition earlier right copy query paste and that gives me an idea what that query is uh let's rename this again highlights number one okay and then we'll go and add this now that just defines uh the condition now you actually want to trigger or you want to define what is happening when that condition's met so um i have this new uh ui rule here uh i'm going to click this little apply actions to selected element and i think i need to zoom out a little bit but here are the options that you can do you can hide this field you can change the text color change the background color um let's change the text color to red okay and then we'll save this um so whenever there is a task where priority is one i expect that this number is going to be um the text of this is going to be highlighted red okay so let's save and then i'm going to refresh my apps and i should be able to see it um [Music] let's see did i miss anything um the condition is when oh whoops um so here's my mistake so i set this condition on the the number element i actually want the priority element right because we want priority to be one not number equals one so i just have to alter this a little bit um the priority is called row one left two so let's just update this row one left two we'll update and then save and now like that should trigger it hey david when you when you updated that you took out your equals one part of the condition oops equals one hit that and then we'll give it another refresh and there it is okay so i was able to you know highlight this number field just by applying these ui rules inside of mobile card builder it's a much faster experience now if you want to apply ui ui styling or apply any policies okay so that was our first use case um the second thing i want to show you is how do i create a policy to you know let's let's hide a field on our card when uh you know the state of this is uh assigned or accepted so let's say uh on my work order task for the screen um let's say that this location field isn't relevant to me as soon as it's accepted or assigned because i can see that field in my detail screen okay it's just cluttering up my app and i just want to see the fields that i actually need to see okay so i'm going to hide this location field anytime that the state is accepted or assigned okay so i'm going to create a new ui rule um [Music] here and we'll call this high location when state is accepted or assigned okay uh and then to build this condition let's use this query uh we'll change this to states is one of uh assigned and accepted we'll run this we'll copy the query and then let's see what this looks like so all i'm going to do is i'm going to copy this in 16 and 17. i don't need that state i just want this right here um and then i need to select which text element is this condition being applied to i want state and if you look at our left hand nav it says state is row one left one okay so let's do row one left one equals that query condition and then we'll name this again hide location when state uh is or accepted and then we'll save okay um and now we need to define what uh what is the action that's being applied to it right the roll action so we'll open up this apply actions to select element gonna zoom out a little bit um and then i want to be able to hide this element okay oh this isn't uh so notice that by uh you know i i'm clicking on the state field right now and i'm clicking hide so it's gonna hide that state element i don't wanna hide state i wanna hide location and then i'll click on this apply actions to select element and then click hide element and that you'll see this little yellow trigger to um see that it's being applied to this uh text element here and it actually gives you a preview you can see that you don't see the location field so i know that it's working correctly okay so let's go ahead and save this um and i if i refresh my screen i should be able to see it um let's see so it's not showing up let's see what's going on mention that you have an equal sign um to take out the equal sign that should just be row one left good catch so if i update this without the equal sign that should work and then if we refresh there it is so you can see that the location field's now hidden okay um and the reason why the location on the work in progress isn't hiding it's because we didn't define that in any condition okay so it's working as expected so that was our second use case um so i showed you how to use ui mobile card builders to apply ui styling as well as policies to your cards okay but what if i wanted to apply policies to my input form screens so when an agent goes into the work order task and they wanted to you know update this record for a short description or priority how do i apply policies to those inputs right so let's say um i don't want to give the my agents the ability to be able to go in and update the short description i want it to be a read only um input right because really they should be working in the activity stream um they shouldn't update the short description so how would i go about doing that um i'm gonna have to do this on platform ui okay um and uh we're gonna build the mobile ui role um with this ui 16 interface uh so i'm going to look up uh mobile ui rules i'm going to zoom in a little bit just to make it easier to see and i'm going to create a new mobile ui role and we'll call this let's say hide short oh no sorry make short description read only okay um and then i'm going to go down to this parent here i'm going to go to this parent table and go to parameter screen primer screen is these are uh the input form screen and mobile views is for your mobile cards uh and then i'm gonna select the parents which is asking you know what it which screen which uh input form screen do you want to apply this mobile ui role to and i know that this input form screen is called update work order task so we'll find this and then we'll select that it's going to trigger on load and then we'll let's submit this for now and then we'll modify our condition i'm not going to apply any conditions yet let's create a mobile ui role action just to confirm that this works okay so it's going to ask for a target as well as the operation and the value okay so i'll start by filling in the operation just to see what are all the available policies that i can apply to this input form screen and you can see that you know i can do uh field calculations i can do date calculations make the field mandatory or make it read only i want to read only okay and it knows that it's going to target um one of these two fields uh i want the short description to be read only and then the value is going to be true okay to make this work um and if you're not sure you know what the value is supposed to be you can also always go into product docs uh look up mobile ui rules and then scroll down to creating um mobile ui role actions and it'll tell you for each one of those policies you know what is the expected value and you know what is the definition of them uh if i go down to read only you can see that you know you just have to set the value true okay so i'm going to go ahead and submit this now and now if uh i believe this should work um i'm gonna test this just make sure it works i'm gonna refresh and i'm gonna go into a work order task and i'm gonna try to update one of these and you can see that this agent no longer has the capability to edit this field okay if i go next i can still update the priority okay oops i don't know why that failed but um okay uh so you can also apply conditions to these mobile ui rules as well what let's say that um you know if the [Music] um let's say if the priority is one uh or two uh actually no let's let's set it so that any time the priority is one the short description will be read only that way i can uh determine whether it works just for this record or uh if it's broken so i want to go back into my work order task i'm going to create a new query condition and i'm going to set my priority to vertical we'll run this copy the query condition um and it's one so all i have to do is uh i'll copy this exact query and then paste that and now if i save this it should work so if i refresh my screen um what i'm currently expecting is the agent should still be able to uh update the short description for these tasks where the the priority is to but if they try to update this one um it should be read only so let's test this record for hi if i update this i can still update the short description okay but if i go into critical and update this it's currently reloaded so that's a huge value added to you know being able to apply your policies and set your conditions using mobile ui rules there's quite a few limitations uh using the old mobile ui policies but with this new concept and new new tables you're able to do so much more okay um but that kind of wraps up the the main use cases that i want to cover for today are there any questions in the chat um david were there any questions or ian were there any questions that we want to highlight from the chat hi uh yes i i see a question first from mohit around can ui rules be used to add or remove field choice values just like we can do in client scripting and um so we currently um you know david correct me if i'm wrong here but currently we cannot um modify the choice list in terms of client scripting we don't have the same capability in mobile right now i'm trying to think of some workarounds i know you could create multiple fields with different choice values and show or hide but it's not probably not a sustainable approach for this use case uh correct i i don't think we have that ability to so whatever choice values that's available on the platform um those are the values that's going to be pulled over um i don't think we have that supported to be able to do that today and then david is that correct are you aware of that now that that is my understanding as well okay uh but uh with that said uh please open up an idea on the idea portal um just so that you know it is on our backlog and our internal teams can kind of talk more about that uh we have a question from sarah how are we able to pull up the mobile view when working on it like david's screen on the left um how are we able to pull the mold view oh um all i'm doing is i'm using a mac laptop if you're asking how to pull up this mobile device i'm just using quick times which is built in with the mac and uh if you do uh movie recording um that allows me to share my screen um i think if you're looking for an emulator we don't officially support any emulators for our mobile apps we recommend that you're always using our mobile apps for uh to be able to test um but with that said um looking through the mobile community i have seen some uh you know external organizations use uh emulators like uh p cloudy or something else but just know that we don't officially support those you can also use um if you don't have a a mac in a basically if you don't have quicktime there's um for android there's one called screen screen stream over http i think it just goes through your browser you put in http and it shows whatever's on your uh phone so you can use that for like android with a windows if you don't have um mac uh that's not on iphone but there's another one on iphone if you're using a windows machine that is um it starts with an r i'll have to look it up but there are some other uh apps that you can download that are free um that just show that either you add the app also to your computer or you use it through your browser and it will emulate or show essentially whatever you're doing on your on your phone reflector thank you yes reflector that's it so reflector will work with both iphone and android um so if you have if you don't have quick time but you have an iphone you can use reflector as well and it looks like ken uses lights view as well so lots of options uh so just you know take a look um any other questions uh can you set the label on the card element label from a script uh david do you would you know the answer to that uh on top of your head uh so i i'd like to ask a little clarity what we mean when we say card element label are we talking the the actual um uh id that david was referencing from the the content tree uh can i allow you to talk so just on me and feel free to help clarify can you hear me yep we can hear you how's it going so uh i'm getting the values from a table and i want to set the labels to those values that i'm getting from the table and i can do that on text elements but i was wondering if i could configure button labels yeah and yeah just to clarify you're you're talking dave can you go back to do yourself mobile car builder open yep um [Music] so are you are you referring to the like the in the content tree there you have like view group text group one um row one left two what david was using in the condition builder yes but yeah so those those values are in the json itself so if you have a script that is editing the json uh based on the table values that should work exactly the same even with i i don't know that technical functionality there but if you already have something that is editing the the card template json this would work exactly the same way and it wouldn't uh matter whether it was a button element i mean a you know a function or or a a text element it it should not so those values come from the actual template json and they correspond to the uh the cell id and the id that's in the json so if you change those in the json and then open it up in car builder card will recognize those ids and update the necessary background records for like slots and slot attributes and um card element attributes accordingly i have one other question on uh um can you do like um dynamic choices like uh say for like assignment group and the user changes the assignment group it changes the value in the assigned twos that are related to that assignment group uh ian isn't he referring to uh reference qualifiers or advanced results yes yes um i know that advanced reference qualifiers are supported for input form screen starting san diego so that's that's on the roadmap it's coming in san diego yes san diego so it should be available if you ask me upgrade okay thank you very much cool awesome uh so it looks like that's all of our questions um thanks everyone for uh for joining in today and the gurus for helping out um let's go and wrap up uh again it's uh a great way to share feedback with us is to let us know in our post session survey so you have a couple minutes just let us know if these topics are relevant to you or if they're helpful um and then you know there's also you have the the ability to share what kind of topics you want to see in the future as well okay so definitely let us know in our post session surveys um also if you're new to our academy series just a reminder that we do upload these um onto youtube which you can find on our mobile community site so make sure you subscribe to our community forum registered to our app academy series and you'll get the notifications on our latest updates um again mobile classic migration office hours we host those every wednesday at 9 30 am pst so if you have more questions that we couldn't answer today join us tomorrow morning this is an open forum where you can come and ask any question related to your mobile classic migration so if you're facing any issues have any questions or need general migration guidance um definitely join us tomorrow morning by registering on our mobile community site with all that said thank you everyone for joining in today and we hope to see you at our next academy thanks everyone