[Music] hello and welcome to creator toolbox this is your video series where we bring you the tools you need to be an effective developer we are currently rolling through actually we're near the end of the san diego season show them earl bug in the corner it means it's part of the san diego season so you know in about six months you'll be seeing the tokyo tag up there and we really appreciate it if you missed anything since we are nearing the end of our quarter long series if you missed anything you can go to devlink.sn san diego earl the link [Laughter] that's the one we have a blog out on the developer portal that has all of the links if you want to go back and look at flow designer or integrations or aes or anything it's all there catalog for you between creator toolbox live coding happy hour breakpoint podcast tech now it's grand but i don't want to deluge you with a bunch of commercials i just want to remind you where you can find anything if you went hey where was that master link or if you're joining us for the first time thank you very much for joining us let's go around to some quick introductions then we'll get into our topic today so first this man to my left hey everybody my name is brad tilton i am a senior developer advocate with a developer program here at servicenow i've been developing on the platform for a while and uh am excited to see what's new in mobile today hi everyone i am earl duque i am a developer advocate with the team here at servicenow been with the team about six months but before that i was in a lot of higher ed customers in california hannah hi y'all my name is hannah basana i'm a product manager on the mobile team working on the builder products such as mobile app builder mobile card builder which you'll see today and mobile publishing as well and i have a great teammate david hello everyone my name is david merch i'm also a product manager on the mobile platform like hannah also sitting on the mobile builders mobile builder mobile car builder and those today thank you for joining us david and hannah they are the rock stars of today's show the three clowns up here on top are just like for the peanut gallery this time around so we've got commentary we may even have enough knowledge to make us dangerous but we want to see what david and hannah can show us that's new in mobile in san diego since this is the san diego release that makes sense so without further delay i'm turning it over to you david thanks chuck and appreciate you having us back today it's been a little bit since we've on create a toolbox uh especially for black builder it's been sent october november possible show you are live and in the store and then i can touch on a little bit of what we're going to be adding going forward in our future releases so first off i'd like to start with mobile app builder and what we've what we did in the in the past time frame for mobile app builders are really focused on adding that feature parity between mobile app builder and what mobile platform can do again i've mentioned it i think in the first installment of creative toolbox for mobile app builder some of the problems with our older developer tools for mobile is they couldn't actually do everything that the mobile platform can do you you could go into like a tool like mobile studio and only get like 50 60 percent of your work done because it just supporting thing so our core goal for lab builder phase one has been to get to the full feature parity between what mobile app builder can configure and what mobile platforms can do and in our in our recent releases we've moved that parity gap um from like we had like 60 to 70 percent of all features covered in the first uh iteration of black builder now we're up to like 90 so we're we're getting real close to having everything working in in mobile app builder which just makes it more efficient to stay in mobile app builder you don't keep jumping to the platform to do this odd exception actually it's not the odd exception it didn't used to be but it's uh okay so faster development love it yep exactly exactly where our goal there is to get everything into one tool so you don't have to jump around so i'll touch on on the new features that we added in in a little bit the first thing i want to do is touch on some help that we have that we've added to the product and uh the first thing you'll see here is when we log in if i'm a user coming in my first time we're going to get a pop over tool modal and unfortunately as live demos often can this is this is not showing me everything i would like to show looks like our graphic is broken and i apologize for that um what what this modal gives us though is a guided tour of mobile app builder so when you come in it gives you some information about what the tool is what you can use it for and you can you can move through the tour and unfortunately our graphics are are not working and again i apologize for that but the steps the text that you see at the bottom there are going to give you some information about what mobile app builder is and what you can use it for and you can go through the tour i'm going to move through this quickly since we don't have our our nice graphics and at the end you have an option to get started and you also can close this window so that you don't see it again in the future once that is closed we have a little pop-up that points you to our new enhanced help menu and previously in mobile app builder the question mark up at the top all it did was have a link to our documentation website just took you right to documentation now we've expanded that help menu you can relaunch that help overview if you need to if you want to go back and look at it again you can run that tour modal again you can open a modal that will help you find our mobile applications you can choose the the app you want even on mobile agent and you can choose the platform ios or android and we'll give you a qr code that you can scan and go right to the the specific app store and download the link we also have we still have that link to our product documentation so if you want to get out to our mobile documentation easily you can go right to it and lastly we are listing our mobile app builder version number so that if you're ever on the phone with support and you're trying to ask some questions it's much easier to know what version you're on rather than having to go to the plugins page and search for it and find the version well that's nice because the plugins page takes about two minutes to come up i could you know it's a good old help about screen that every other application has it's nice to see that starting to uh become a thing within our platform yep yeah we're trying to we're trying to expose more information easier to the user so they don't have to go manually dig for somewhere next week into the configuration experience itself we've got a couple new um navigation helpers along the way so i'm going to go ahead and open up a screen and you'll see here again this is my first time logging in we're gonna get these tour pop overs that help you understand how the navigation works um so you can come in you can hit your next button this will tell you that the left hand navigation here is where your configuration tree lives and you can navigate through it then a little blurb about what the center config panel is um we'll explain to you what the ui preview panel is and again i cannot explain why my graphics aren't aren't working i was using this earlier today and they were so i've we've had some sort of hiccup on my instance in the last hour or two it only happened of course of course so this this is just walking you through what how this config panels put out and what all the different sections are and yes that's for that first time user and to give them a little bit of guidance as they're moving through uh this this particular model once you go through it the first time it'll automatically we're automatically saving that you've seen it and we're not gonna we're not gonna bother you with it every time you come in also that help menu is we still have that expanded help menu here on the record configuration panel and you can relaunch that record configuration tour if you want to as well so if you need a little bit of refresh you can go back and relaunch that some other improvements we've made to mobile app builder specifically around the navigation in the first version of mobile app builder the our content tree on the left hand side was completely static you could not expand or collapse any of the content tree you couldn't resize anything so we've improved that experience to make it a little bit easier to navigate in the content tree make it a little bit more consumable so all of these content tree nodes can now be collapsed and expanded so if you want to clean up your view and just look at a certain level of the content tree get things out of the way to make it a little easier to look at you can do that you can drag the panel wider or narrower if you want to give yourself more space in the center config panel and then for both the preview panel and the content tree we also have the option to just completely hide them so again if if those aren't helpful for you you want to dedicate more space to that center config panel we now have that option as well so those navigation and helper improvements that we've added to mobile app builder are some of the main noticeable things that you can do in app builder between our last two releases we've also as i mentioned added support for more of what mobile platform can do so we've added support for things like the calendar screen the the map screen um content sections uh all the other full we have full support now for all apple launcher sections and their their configuration points and the only things we don't support at this point are the the custom map screen that was added in rome and then some like small little niche configuration points like badge count on a apple launcher function or we also don't have like deep linking and push notifications those are all things that we are adding for our august release and as well as all the new san diego features that are being released that have been released we will have support for those in our august release as well and that specifically is changes around what cards can do mobile cards and how they can be configured on a record section so when we hit that august release we will have 100 feature parity with mobile platform as of the san diego release that is a huge milestone for the mobile builders because as i mentioned before in mobile in the mobile studio days we never got north of 65 or 70 feature parity at any point so that's that's going to be a really big milestone for us coming in our august release so that's that's everything i've got for mobile app builder today i'll i can pause for a quick second to see if there's any questions before i move on over to what's new in mobile card builder yeah we had a question um from a viewer asking about uh if the example interface on the right side will be more will ever be more of a simulator or an emulator for the mobile app yeah yeah that is absolutely our long-term goal we don't have a timeline on it yet but the mobile interface example on the right-hand side that you can't see right now is it's just a static example of like what each record represents long term we want that to be a full-blown emulator so that as you're configuring things you'll see exactly what they look like right inside mobile app builder you won't need to go to your mobile phone or you won't need to have your own emulator sitting on your on your desktop awesome any other questions nope okay so now i'm going to move on over to mobile card builder and for mobile card builder again we've made some more enhancements um you know just around navigation and function or record management things like that but the big improvement that we've added to mobile car builder for this february release is the ability to configure ui rules um on a mobile card and i don't want to spend too much time on the platform ui configuration of mobile ui rules but i do want to show it just so we can you know we can kind of highlight the the drastic improvement we've made in the configuration experience so in just regular platform lists and forms if i wanted to configure a ui rule there's a several different steps that i've got to take to just prep myself for doing that configuration first i need to know the card that i want to edit so for example i'm going to later on i'm going to edit this card here in my mobile app so this is the my tasks card so the first thing that i've got to do is identify that card so i'd have to go in and go sys sg view config and then find the card in my list of items here i know that's my tasks card so i'll search for it testless card so then i have to go into that record and i need to identify the template because i need to pull some some items from the template json so i'm going to go ahead and open up that template and then i have to read this json to identify the cells that i want to figure i want to edit so for example if i want to change the background color of my priority field i somehow have to understand how to come into this json and extrapolate that that priority field is actually text text elements text underscore 04 and text underscore 05 so let's not do that so if i go control find text underscore 04 like i have to identify that this maps to this now is one of one of the really big challenges with ui rules in this experience so once i've identified that i then have to go to sys sgui rule don't want to save that and create a ui rule and a ui rule action so to do so um to do that i'll open up one that's that we've got that's already existing you have to come in to find your ui rule and then for the ui real actions let's say i wanted to make that priority field have a yellow background i've got to come in here i have to know to set my ui rule operation is set ui style and then i've got to as i mentioned i had to have known that i'm targeting text underscore 04 select it from this very pretty drop down and now i have to write some json to change my background color i i know a little bit about json i don't know very much and i don't enjoy trying to figure json out so rather than going through that long process to make my background color here a different color i'd rather just go into mobile card builder all right billy mays show us how much better it is now exactly now we're going to show you the the improved experience so now we come in i'm going to open up that same card in mobile card builder as we've seen before in card builder you get a nice visual layout of what you're looking at no no messy json and again i know that i want to do something with my priority fields here so if i click on the priority field we highlight that field in the in the content tree and you can see we're telling you right here in the content tree what the the json element id of that record is so you don't have to hunt for it you don't have to translate we're just going to tell you that priority field is mapped to text underscore 05 this priority field is mapped to text underscore 004 and where that is super helpful is in the creation of the ui rule itself so if i come over to my new ui rules tab you can see that it'll show me any existing ui rules and i have the option to create a new one and again the ui rule record structure is a two-part structure there's the parent where you are defining the condition you want to have met and then you have children the ui role actions where you actually define what you want to do if the condition is met so in this situation i want to i've already got a ui rule for when priority is critical and i want to set a different ui rule for when priority is really low we'll go one priority is planning so i'm going to come in here i'm going to add that ui rule give it a name and then we're still living in a world where we have to type out a condition uh we're working on a condition builder for this but that's probably going to be early late this year early next year when we'll have that available but again this is where knowing text underscore 05 and not having to dig for it because i can just come right in here text underscore 05 because we're going to reference this priority field and then just go equals five for planning and again you can get that off of your information here priority five is planning so i add that and now i've got my new ui rule for priority is planning but how do i go about making um making the particular elements do what i want them to do or show what i want to show i'm not going to do a json i'll tell you that instead i'm going to come in here i'm going to click the element i want to impact and then you see these little little icons that we have here next to the trash cans if i click that i'm going to get a little pop over which gives me all of the options i have for that particular element type so since this is a text element i have the option to hide the element i have the option to change the text color and i have the option to change the background color well in this situation um because priority is planning is pretty low you know like we're not that doesn't really get me worked up that i have to focus on my planning level uh priority items what i'm going to do is i'm actually going to take the entire container that those two are in and when priority is planning i'm going to hide the element and you can see when i make when i check that box you get a preview of what's going to happen when that ui rule is executed once i click out of it that comes back so the preview is when you're in the pop-over so priority is planning i wanna you can actually connect so you're controlling um a larger container from a smaller roll correct nice yep and and i want to show you the the variety we can do here so again when priority is planning let's just hide those fields it's not not very important to me but when priority is critical i want to call attention to it so i've already got a priority is critical ui rule i'm going to open that one up and for the priority field on the left hand side i'm going to change that background color and i'm going to make it a you know kind of like a soft yellow that's going to draw attention to it and i am partially colorblind so i am not able to use the nice color pickers we have in the tool i actually have to go grab the hex color to make sure i'm getting the color i want so bear with me one second while i do that and then in future iterations of this color picker we're actually going to have the hex codes right next to it so you'll you'll be able to see it right off as well yeah and we we do have that today where like when you hover state you can see the hex code and i could have i could have spent a little bit of time searching for it but i'll just go ahead and type it in and again you're going to see that background um that's going to show you the preview and if i want to pop over to my actual value so that the left-hand priority field is your label the right-hand field is the value i want to make that value field a red so we're gonna make that one and again we'll get our little actually i didn't want background color that's my mistake i wanted to change the text color again you get your preview and now i'm going to go ahead and hit save and we'll show you that in action so once i refresh here you'll see now my priority field has the light the label has a little yellow behind it to go attention to it and the actual value is red if it's critical and for those planning ones we've hidden the priority information all together other options that we have again this is element specific so if i click on a button element for example i'm going to have different options in the ui rule configuration i can on buttons i can disable the button i can't hide it but i can disable it and again you'll see what that looks like i could change the background color i could change the text color if i wanted to and then on image elements which i don't have an image element on my card you can hide those as well just like we did with the text elements so we'll go ahead and show you that real quick what the disabled button looks like now you can see on my critical items the button is disabled and you can set um you can set ui rules that have no condition you can leave the condition box empty and that's how you could do something that like changes um you know makes a button disabled all the time if you wanted to for some reason if you had a use case where you wanted something to be always always enabled so that's a that's an overview of how you can configure ui rules in mobile car builder and as you can see it's a much faster process uh much you have you don't have to know all the background structure you don't have to understand any json you just come in you define your condition you click on your on your element type and we give you the options you have to configure the ui rule for that element type the final thing i i haven't mentioned you'll notice that as i did all the that ui rule configuration we get these little icon indicators and that's just to let you know that you've got you know that element is affected by a ui rule if you click on the element you'll also get the matching indicator up here to let you know which ui rule is affecting that element you know for example um you know for the priority fields we did it under critical but for the container we did it not just under planning so that's the last item that we had as far as ui rules any questions there before i touch on just a couple other minor ux updates for mobile card builder are there any other kind of actions that are going to be added to [Music] the ui rules that are on your roadmap so there are two more actions that we will be adding planning for our august release one is the it's called time ago formatting which allows you if you have a date field on your card rather than showing the actual date it it'll convert it to like two weeks ago three months ago four four years from now that sort of thing and then there is a what's called a text decorator ui rule which allows you to choose a text element and conditionally add an icon to it and um traditionally those have been used by our business units to put like a little indicator next to a piece of text if it meets a specific condition just like a little you know it's a decorator it's a little hey pay attention to me piece of text so for example i could come in and if it's priorities critical i could instead of making it red i could put a little circle next to it that's red something like that um also for the august release we're going to be adding in the new element types that were introduced in san diego so there's a new video element that was introduced you can play vimeo or youtube videos on your card there's updates to the container element where you can set an image as a background uh currently you have the ability to do a color as a background but we're updating it to image and then we're also updating the image elements so that you can set a static image rather than you know you can wrap it to an image off the attachments table rather than having to map it to a field on a different table like the task table or incidence table and the last element update that we're adding in for that august release is the ability to configure an icon an icon element so you could come in if you want a static icon to display you can show that or you can configure that in mobile cart builder great stuff like uh it just makes everything so much easier i love it yeah yeah we've been we've been looking forward to getting ui rules put in there because ui rules was added in quebec i think in mobile platform and very quickly we were we received feedback that it was it was a rather complex configuration and so we've been very very eager to get into the card builder it took a little longer than we wanted to because we've been putting so much effort into mobile app builder and the and um that's the the same team same dev team manages both products so it had to wait a little bit longer but now that we've got it in there it's it's been a big ux improvement um a couple other things just that we've added little little ux enhancements in mobile card builder here you'll notice here on the card we're actually showing the table that is a tied to this card that's not something we did we had in the mobile car builder ux before and the reason we're doing that is because it helps us better configure mobile empty state experiences um the orig the first versions of mobile car builder you basically had to have a table tied to your card but now if i want to i can come in i can change the table record through our drop down menu i can choose a different table if i wanted to point this card to a different table or i could select none and again that is um that is valuable for empty state record configuration so we're one step closer to having full empty state configuration to mobile car builder really the only thing we're missing for that configuration is the static image element which we're again we're adding in the august release i was just about to ask what would be the use case for having a card not attached to a record it would it's purely for if you want to show um like if you've got a list that doesn't have any records you know just because you're running right so and i think i have an example no i don't have an example configured in my um in my current mobile app but it's yeah like if you've got a if you've got a data query that's returning all my open tasks and you've closed out all your tasks rather than getting an empty screen you get a nice little graphic that says good job you've done all your work or nothing to see here move along yeah we've made those configurable now rather than just having a default empty state nice and that aligns to the regular interface too yep precisely yeah and the way you configure those is you basically configure a card that has no table attached to it and you stick a static image and maybe a couple buttons on it to give the user something something to do if they want to like create a new task or something along those lines so any other i think it covers everything that i wanted to touch on for card builder any other questions on on card builder or mobile app builder uh there's no questions in the audience more all just compliments about good unification of different form builders and stuff i'm glad to hear glad to hear it and uh one person also said that as a visual person it's way better now i i'm i'm happy to hear that that is that is always the goal with our builders is to make them easier to use and and more visual every step of the way hannah's been pretty quiet any thoughts from you no i uh i'm also a visual person so i think these ui rules are really great a great feature in cart builder and generally the build process in our builder products is low code no code and really does help the user see like each step of the way what it is they're configuring instead of having a reference back to uh to their app and just like helps with one less point of failure which i really like because in the platform when you're configuring you don't really know where or why your data item's not coming up sometimes or why your ui role isn't applying and here in the builders you can see each step of the way absolutely good stuff thank you for all the hard work looking forward to seeing what you've got coming up in tokyo too or the august release i forget this is now through the store yeah store release pro products and the the august release especially for card builders going to have a lot of a lot more visually noticeable stuff the the main work we're doing for app builder is more just that mobile platform feature parity and so more more config panels more records that we support um you know but a lot of it a lot of it will have a very similar look feel to the current tool the car builder with those new elements and the new configuration points that we're adding and that'll be a lot of fun fun stuff we can do there for all those people who like editing json you can still do that if you really want yes you can nothing stops you from going to platform and writing your own json i have a hammer you can hit your thumb with it too well and i mean it's we joke about that but if i haven't mentioned it before one nice thing about mobile car builder is it's actually it's smart enough where if you do want to write your own json but you don't want to you know spend the time like mapping the the view template slot records to the json car cell ids and the view config attribute records to the view template slot records um you just write the json open it up in in mobile cart builder and mobile cargo will create all those for you in the background so that might not be a common use case but again if you like writing json you want to write your own json and let card builder do the rest for you once you open the template that works too excellent thank you very much to both of you for joining us today do we have any announcements gentlemen uh this no no life code this friday uh in return we're gonna do a live code our our season finale live code happy hour is happening next week instead and we're going to have a uh some fun games and stuff for people to participate in so don't miss that uh what else register for creatorcon yes yes knowledge.servicenow.com check that little box that says i want to go to creatorcon new york the hague 11th and 12th of may sydney las vegas 25th 26th of may hopefully you can get to one of those if you need some sort of information ping one of us we'll be happy to uh to get you the information get you any inside scoop there's great discussion it's happening great discussions happening over on the slack channel sndebs.com you can find a lot of information they've even subdivided new channels just for the location discussions getting very close and very interesting and uh i had to use the fire extinguisher this morning because i think my hair was on fire for some of the activities we are rushing around like crazy people trying to get this all wrapped up for you in time so standard fare for an april look forward to seeing everybody there yes if i may uh hannah and i may be in sydney uh so we're hoping to we're hoping to be in sydney and if there's anybody out there using that builder a car builder you know look for us and maybe we can answer some questions for you live and in person thank you put that on your mobile device so you can walk around and go are you david [Laughter] those are some of my trade secrets for how to spot faces it's hard to catfish on a video so we promise we look like this thank you very much once again and we will everybody stay safe we'll see you real soon hopefully really really soon in person take care [Music]