hello again and welcome to creator toolbox my name is chuck tobasi senior developer advocate and i am really glad you're here because we've got our first returning guests to show us more about mobile card builder let us do our introductions first then uh go ahead david hello my name is david merch i'm a product manager on the mobile platform team here at servicenow and i'm my primary responsibility are mobile builders such as mobile car builder which we'll be covering today and raeanne hi my name is ray ann i'm also a i'm a ux designer here at servicenow also for the mobile platform team focusing on the designs for mobile app builder and mobile card builder go ahead brad you know the drill hey everybody my name is brad tilton and i am a developer advocate with the developer program here at servicenow excellent and we brought these two gentlemen in because they're the experts we were going through uh i i've done a couple of developer meetups and there's a couple of slides in there a couple of features that still stick out in my mind and go we have to get back to that we have to get back to that and mobile card actions was one of them wasn't available earlier in early access if i remember correct david but it is now it is now and we want to show that to you because it's built onto the mobile card builder and now it's uh well we'll show you all the cool stuff and get started so do we have a any announcements brad that you can think of that are coming up oh we we are coming up on knowledge so stay tuned for you know announcements around when you can register and see sessions and and all of those things so i know i think most of uh most of the people at servicenow that i know are are gearing up for knowledge in some form or fashion whether it's creating sessions or editing we're excited about this year so so yeah yeah we are we are shoveling hard because there is a big pile of stuff that needs to be moved it is coming up quickly i believe the registration is going to be opening soon the catalog will be available so watch for those emails watch for those announcements creatorcon lots of great stuff we'll have a podcast on that on breakpoint coming up in mid-april uh we'll be dropping another break point tomorrow with ashley snyder so lots of great content coming up we had a tech now last week on the 23rd about app engine studio so if you missed that good stuff that's that's where creatorcon goes excuse me that's where creator toolbox goes when tech now is on stage so we we miss a week every month for tech now so let's get started david what have you got to share with us about the mobile card actions well as you mentioned chuck we launched mobile card builder with quebec early access and at that point our main focus was to handle the new item view to mobile view change so in in platform prior to quebec all the card views on our mobile devices were managed with files called item views we updated that to two sets of records called view configs and view templates to expand the capabilities of the cards and also to help with improving system performance and management of those card views we got the basic functionality put in in the the first version of mobile card builder but we did not have the new card actions capability and this is this is the ability to execute a function or a button directly from the card without having to go to a top menu or a swipe function or something along those lines so today i wanted to show how those are configured and what they look like on the mobile device once they're set up let's good and what do you say we jump right in so i'll bring up my screen share just want to make sure everyone can see my browser and what we have here is just your your standard servicenow instance landing page i wanted to start with a little bit of a refresh as to how you get to mobile card builder it's available in our left-hand menu so you can search for mobile card builder if it's installed and it'll be underneath the system mobile menu also you can access mobile card builder from mobile studio so when you're looking at an applet in mobile studio there'll be a big old button that says customize your card view in mobile cart builder nice i'm going to go i'm going to go straight into mobile car builder today because there's some specific things i want to show i'm also going to pull up my mobile so you can see the the use cases that i'm i'm doing today what i've got here is an apple launcher that has a card view of a list and then three icon views of lists and these are all task lists just three different flavors of a task list and i want to kind of go through uh the use case for not just the card actions but mobile views in general and how you can leverage templates to to be more flexible and have more power on um managing all of your cards so all of these applets use the same card it's this layout now if i click into any of these lists you're going to see the fields are all set up the same because they all reference the same base template which means if i go and edit that template i'm going to edit all of these all in one fell swoop i don't need to worry about going to three different applets and six different item views to make the same change on every card so i want to show you how we're going to do that to begin with i'm going to find the template actually i need to go to my template filter i have this these all using my dvm task list template and i'm going to load that template into mobile card builder and you'll see that the general layout matches what we have on the card and i'm going to make my changes here in the template level so that it applies to all of those applets all at one time now just for for clarification david we if if anybody missed this we had an episode on this i think it was our very first creator toolbox in early february so less than a couple of months ago if you want to go back and see more about the mobile card builder that'd be a great refresher uh so we're not going to cover everything there is to do about this templating in cards and the builder we've got a more in-depth description there so just wanted to give that quick refresher in case anybody missed it there is a companion to this and we'll put a link in the description of course very good thanks chuck so what i want to do in our session today is show how to configure the the new card actions that we have and again just to explain what that is i want to add some buttons to this card so that you don't have to go into the list and swipe to get to your functions or you don't have to go up to your top menu to get your functions it puts them right here on the card so i can just press that button right on the card so for the use case that i have here i'm going to go ahead and i'm going to update this i've got two swipe functions here i'd rather see those on the card rather than having to drill in and and access them that way so i'm going to take my template and adding these actions to the template are exactly the same as adding any other element type so again we have containers we have text elements and we have image elements that we covered in that previous video so now i'm going to show how to do the button elements so i'm going to start by adding a couple more containers to my template just to be the house for those buttons i'm going to add two containers here because i want these buttons to be in line with my my priority text element here and i want them right justified so it's like this top row where i have one field left justified and one field right justified so to do that in the template i'm going to add two containers and i'm going to do that a little bit of a pro tip here to create that justification and make it nice and clean and work across all devices it helps if you put kind of two sets of containers together a vertical and a horizontal container both justified the same and that makes sure you got the space you get the spacing you're looking for so i'm going to put the first container in i'm going to set it to vertical i'm going to right justify it i'm going to add a second container keep that one horizontal and i'm going to right justify that as well and this is where i'm going to put my button elements so this is these are the new pieces again just like the rest of the elements you hit the plus button and you'll see i've got this button option in our selection menu so i'm going to select button and once it's added to the stage again it's very similar to all the other elements it's going to have its particular configuration properties on the right hand side you have display options such as height and width and corner radius margins things of that nature we also have a border width option which i'll show you how that works and then you have the button function the the actual properties of the function you want to execute you can set the button to be three different formats we have label which is what you see here which is just a text label on the button we have icon which lets you select from a preset group of icons and it would just show an icon on the device or you can choose label and icon which would let you put in text and an icon for this example i'm going to stick with icon and this is going to end up being an edit button so i'm going to i know there's an edit icon in here i'm going to go ahead and use that and then we have two different types we have single and malta and i'll get into those a little bit after i kind of walk through the full configuration of a single button elements david do you have any tips on unlike the length of that label i i'm assuming it should be pretty short like edit or user or call yeah the shorter the better just because there's not a lot of room on these cards but it does depend on the way you're configuring it if i wanted to configure a a button that took up the entire width of the card kind of put that at the bottom and let it take up the entire width obviously i would have more room for for text there but in this case i'm going to try and put two buttons side by side and put them next to some fields so that's going to be a pretty tight space and that's why i'm going to go with just an icon for these because that's kind of the most compact you can get with these options so put on your designer hat everybody and then again i'll remind everyone we have the preview mode which will give you a real quick uh idea of what this is going to look like on the device now all devices are going to render differently depending on its ios or android depending on the screen size and resolution of the device so to get that final confirmation you still want to go look at it on the device you're going to be using but our preview mode is going to get you most of the way there and you'll get a good feel for how the layout's working so getting back to the button configuration i've got i've got my physical button now i'm going to i'm gonna play a little bit with this i like i like rounded corners so i'm gonna give it a corner radius a 10 and um i know i know just from my own experience i'm gonna want some margin around it especially because i'm planning on putting one to the left of it eventually so i'm going to put some margin on the left hand side now that that gives you the actual physical properties of the button i will also add a border width there because i again i want it to look like a button and with that now you'll see in the preview mode i have my border width that looks a little bit a little bit heavy so i'm going to drop it down to one that one is one pixel so now i've got kind of a physical layout of my button but i need to know what this is going to do so that's where we have our function picker and this is going to give you a search list of all the functions that you have available to you again it's always good to name things in a way that you're familiar with i always put my initials at the beginning of them to make them easy to find but now i can search for my edit button i can assign it to the function and then i've got i've got other options here i can change the background color of the button we've added a color picker i think i touched on that or we touched on that in the last video so if you wanted to set a background color you could i'm going to leave this without a background color for now so i'll just clear that out and right and for now i've done the basic configuration of the button so if i press save and then i come back to my my mobile device we're going to see that button show up on the card so you can see my icon there and not only just that on the first one but it's it should be showing up on all these other ones so i've got to double check maybe i don't have all of the same template cards on these or the same templates i do need to double check my configuration there but and those are just to go back to the function those are the same functions you're using for your top menu for your swipe actions correct correct correct so i selected the redefine we this is where functions actually come in really cool and like you said name them clearly if you just name it edit and you've got five edits you're not gonna know which one you're actually using so having that label naming consistency it it's not even the label that's on the button it's what it's called behind the scenes let's you see that this is edit incident edit user edit you you come up with your own nomenclature and taxonomy but it's really going to pay off here yeah you want to definitely keep those labels simple and then utilize color where it makes the most sense but more importantly just keep it simple that would give me a give me a for instance on the coloring so if we're talking about let's say approval or um or uh not decline but uh let's say rejected rejected yes um so approval could be just the color green because it's just something that's universal it's usually the color for go if you want to relate it to like a stoplight and then um for for discarding or dismissing or just rejecting you would want to use the color red so um really trying to use whatever is known really internationally and just widely recognized is pretty much the best practice to to go forward do we have the ability you mentioned rejection and obviously these card actions are going to be right up front on the card and you could accidentally hit them do we have some way to do a confirmation before somebody deletes a record or rejects an approval or something yeah that would be baked into the function itself having having that type of of check uh so the card actions themselves don't have any extra layers of okay of confirmation but you could build that into the the base function you're consuming makes sense because if you had it as a swipe action to reject it's going to have that same functionality gee that's probably why they're called functions right exactly and then just to drive home chuck your your original question there the the function that i've configured here that i've chosen here is the exact same edit function that is here so i didn't i didn't have to define that function twice i'm just consuming it in two different locations but now that we have this all configured if i hit my my little edit button there now i go straight to that edit form that already existed so again that's the power of these card actions is being able to draw this right up front let me get right into editing this particular card not having to drill all the way into the to the record level and hit a top menu to get to it well you just saved your users two or three clicks which is very important when you're dealing with a mobile experience you want them to get in do what they need to do and get out that's the happiest user don't flood the thing with 10 000 fields don't bury these things down deep but if you can expose them mobile card actions is really going to be a huge thing so we we do have a question around uh can you add custom icons uh so we added this icon from a library can we add stuff to that so that is possible in an advanced configuration if you go into uh platform ui it is not possible from mobile card builder that's that's going to be capabilities that we're looking at adding down the road uh but we don't have it in this in this version right now today there are i think it's 38 preset icons or pre-built icons that come out of our standard icon set and you can choose any of those and you can edit the color of the icon by using the the text color input so if i again if i change the text color here on this icon let's make it blue and if i save that we're not showing the color changes in our preview mode yet you see the border color and if it was text you would see it but and then if you refresh again that might not have been the best color to pick because it's a little tough to see there maybe maybe we'll do this let's let's show some more of the power of what we can do let's let's make that icon bigger right let's let's set the height and width let's not have it right so now when we update that that's that's my mistake the um the icon itself doesn't grow it's the button that the icon is sitting in so you know if for some reason my text code or my border width isn't showing up on the device let me try making that a little bit bigger and then making it bigger for accessibility right exactly exactly so i've gotta i'll have to look into this like why the why the border isn't showing up here uh that's there's something i think with my emulator because i've not seen that problem before you know the age-old i i've not seen that before but the border color you're seeing here and the thickness you're seeing here should be on the device and you see how that button size grew if i one way i know i can show you this if we change that back that background color and and even though this is my product and i know it better than anybody else i can still make mistakes the reason that my border cut my border isn't showing up is because i have not set a border color little simple little things like that i'm going to set that border color now when i save it now you'll see it we've all done that yeah so now you got the border color and you can see that physical size of the button so that is the area that you can click on to execute your your your button i will say that's far less frustrating than tweaking css yes yeah yeah the the again that's the best part of mobile car builder is you can do all this visually and you and you know right away hey that doesn't look right and i know what i just i just edited so rather than having to go into css or json code and and know all that stuff so that is the basics of configuring a button for a single function we do have the option of configuring a uh button as well for multiple functions so i'd like to show that now if we go back into these circuits i i love these so we go back into our button configure i'm going to make this a little smaller just to better fit but now you notice we have these single or multi actions and so i'm going to switch this over to multi and what that does is it allows me to configure multiple functions underneath this button and then they would execute from an action drawer similar to what we have for quick actions so i'm going to select multi and then you see this option for add menu item i still have the same format icon label or both i can still select my icon but when it comes to the actual functions we can execute now we have a second layer a second menu of options so i'm going to come in here and i'm going to select that same edit task i'm going to select i'm going to give it a label that says edit and i'm going to just for redundancy sake i'm going to select that same edit icon icon consistency is good if edit associates with a pencil do that everywhere right right so but i want to do more than edit when i hit that button i want to have some other options so i'm going to add a second menu item and i'm going to use my escalate task one here this is set to basically just set the task to critical if i want to so i'm going to give it a label of escalate and let's go with let's go with a megaphone for that one because generally it's a loud thing when you have to do that so now i've got these two these two functions and if i save that and come back to the to the mobile device and again i made it smaller that's why it shrank when i hit this button now i get this action drawer that lets me choose from the two functions so if i do want to escalate that i can hit the escalate button or again i can hit that edit button and i'm right back to that same location nice if i want to change the order that these show up in i can come back into my configuration here and these elements are can be drag and drop to change the order so if i drag escalate to the top and save that's going to reset my order refresh and now you see escalade on top so those are those are the the basic the basic configurations for the for the buttons i'll just run through them again real quick you've got your your size of the physical button that on the screen height width corner radius margins to give padding things of that nature you have the appearance of the the button on the card so if it's label or icon or both and then the colors are down at the bottom and then if it's single or multi i want to switch this guy back to a single button because i'm going to also show how these can be overridden at the view config the card level so i'm just going to get this back to my my edit and save that and then i am i do want to show that override capability at the card level i guess before that do we do we have any other questions that have come in before i move on no no other questions but yeah i mean i i i think that's the multi-action uh thing there is is really cool that what's interesting about it is that in general that's not an easy thing to do in the platform like if you're in the platform ui you're probably going to end up having to make a modal if you want to be able to click on something and have something pop up so the the ease with which you could show multiple options there was was pretty neat yeah and that's that's supposed to be one of the one of the stronger features here so uh what i want to do is i'm going to add a second button because i want to show how both of these work at the card level and rather than having to pop back and forth to the to the template i just want to kind of get it preset for us so give me one second here to do that and this one's just going to be super generic i want to have this one be that single function or actually i want to make this one the multi-function i already have the single function so again we'll go with the edit there get our pencil and then add that second one i'm going to use a closed task for that one and i don't know i think star sounds good for a closed task make sure we have a border color again this time don't want to make that same mistake twice save that and then just real fast make sure we're looking good here now we have our two buttons side by side because i'm going to use those in the next session now i'll check these again i'm not i do have a little bit of troubleshooting because i don't understand why only one of the buttons is showing up here might be i think that is an emulator issue but again what i want to do now is let's say again the power of the templates is those changes are applying across the board but let's say for this one card i want those button configurations to be different so if i go back to mobile car builder and if i find the the card the view config for this which is it's my overdue tasks applet so if i come in and i find my application and i search for my overdue tasks applet i have the list view and the form view so i'm going to open up the form view i'm sorry the list view my mistake and you'll see that those buttons are coming through from the template level those now are showing up on my on my view config because i'm referencing that template that we're just working on and i can override how these work here so if i don't want for this particular card if i don't want this to be the edit button i can come in here and because it's a single function on the template i can modify that single function on the view config as well for the multi-function same thing it's got that pulls it through from the template i can edit those two functions that i had on the multi-function so i want to show how to do that so for here again the format can't be changed that comes through from the template that's that lives at the template level the sizing of the button can't be changed that lives at the template level it's baked into the template json itself but i can change my icon so if i want to change this over to that escalate function that i have i'm going to choose my megaphone if i want to make it bright red which i shouldn't do that i am red green color blind so i can never actually use the color picker for bright red i believe it is i believe it is um zero zero zero zero thank you very much rayanne i i put myself new we brought him for something yeah r g b yeah so we're gonna make that one red and this is this is where the magic comes in right if i update my my app now so now i've got the bright red megaphone here on this card but if i come back to this guy and my refresh is finally caught up it's still the blue edit pencil and not just the color of it i can change the actual function that it goes to so if i want that escalate and save that so now for example if i pick this guy it's high but i want to escalate that so i hit that button i i need to refresh gotta refresh your app hit that button and now on a refresh we're critical so we've executed that function right from the card but back here on my regular tasks applet that location that function is still just the edit button so that's that's where the power of the the view config and the view template really come into play i can have three different applets that all use the same are based off the same template and all look exactly the same and if i make a change to one of them then that change applies across the board but i still have the ability to customize individual elements on individual cards if i want to you can do that at the single function level and at the multi-function level again i can come in i can edit these it's the same edit that we had back at the template level i just is applying it to this specific card so that really covers the overview of card actions and how they're configured in mobile card builder that's really the the presentation i've got today if i'm happy to answer any other questions that have come in i don't see any other questions but i've got one just curious what's what's on the road map for beyond quebec we won't hold you to any releases but what are the what's the vision that we've got for the mobile card builder very powerful stuff yeah so there's a couple there's a couple big rock features that we want to get in in the not too distant future one of them is along with the card actions in quebec we released ui rules which is a new feature that really replaces the old ui style capability where you could pick a an element on a card and depending on conditions right you could change its color somehow so for example if you had the priority field you could say if priority is critical make it a red background color or if state is if like due date is overdue make that you know put a border around that to draw attention to it so that used to be done with ui styles but that only works on the old item view record types so for the new mobile view record types we're replacing that functionality with ui rules we want to bring that into mobile car builder so that it is all configurable in this type of environment where you click on an element make your visual configuration and you're done we also have on the roadmap again we're dealing with two different record paradigms here we've got the old item views and the new the new mobile views we want to build a tool in mobile card builder which will allow you to convert those old item views into the new mobile views so that you don't have to do that manually let the system do it automatically basically upgrades you to the new mobile view paradigm and then start being able to take advantage of all of these new features like the card actions because you can't do card actions on item views the ui rules which are going to end up being more powerful than ui styles make it easier for for users to get into those new record types and leverage their capabilities without having to manually copy over json and manually build template slots and view config elements and attributes and so on ran anything to add i mean nothing to add i mean this is just really just the fundamental building blocks of building cards in mobile car builder and um you know as as david mentioned there's just so much more that you're going to be able to do with this tool and we're really excited to see where it's going to go later on this year we do have one more question from the chat how many buttons can be added on a card is there any limit there there is no limit it's really just a matter of the the physical space you're going to take up on the phone so you could make a card that's nothing but buttons you could you really and you know what there's that would be a fun use case to explore uh yeah good right sorry she's going to say i can see ryan uh cringing uh the designer in him yeah our design friends don't always like how creative the the product folks can get like we could do this and we could do this and they're like yeah that's not going to be the best user experience so we got to get ray on a t-shirt that says with great power comes great response exactly that's exactly what i was going to say with great power comes great responsibility here it was just hanging out there all right i think we're going to the screen share correct thank you very much that was very important information and i look forward to using this going forward i'm already starting to spin ideas in my head where we can apply mobile card actions to applications i've done in the past okay it's time to finally give a mobile experience to this application that i couldn't or shouldn't have before because it's a whole bunch of new capabilities have opened up to us in quebec with the mobile card builder with the mobile card actions just to make that experience so much better so much more powerful it's it's a lot like you know i always equate something that's easy to understand and relatable to everybody is that uber experience or when i'm when i get off the plane and i check a few things my travel app has a button for uber it's like you can just jump right to that other app and start doing your thing so it's think in terms of how to get somebody in and out of these applications quickly get their function done the the the whole point of mobile is not to emulate the desktop experience if you're trying to do that you're doing it wrong and you need to rethink it's get in what did uh what did josh used to call micro moments i think is what is determining microsoft experiences micro experiences something like that 30 seconds or less yeah yeah so that should be your goal when developing a mobile experience and this this is just going to add to that toolbox of what you can do for it so unless there's anything else gentlemen thank you once again for being on here i look forward to more of the toys that you've got to show us our tools this is the creator toolbox it's more of the tools thank you brad for keeping the video going looks like we we successfully pulled off another one without any technical glitches and and uh david and ryan thank you very much thank you very much for having us thank you play the outro music and wave goodbye and smile thanks everybody