[Music] okay oh wait a minute you're on you you're a beauty it's freaking me out hello and welcome to live coding happy hour for this thursday february 11 2020. it's all going according to plan it is all going according to plan um i'm your host andrew barnes let's jump right in with introductions and we'll start with brad say hello brad hello everybody my name is brad tilton and i am a developer advocate with a developer program here at servicenow all right chuck schumache senior developer advocate at servicenow and i'll be your bartender today give you one of those isaac from the love boat things and i'm andrew barnes developer advocate here at servicenow sporting my madrid shirt it's a little out of date it's not not quite quebec but but i'm feeling the family release love on my shirt today um so glad everyone is here let us introduce our beverages of choice for this lovely thursday i have a fun one today it's a shiner uh it's their bach but it's barrel aged which i have never seen before so that makes sense it sounds good that does sound good i have yet to make it to the liquor store for some beer or the grocery store for some beer or even out my front door for some beer so i went to the liquor cabinet and mixed me up a nice bloody mary and i have um a sour cranberry lime uh from edmund's host which is already good and uh it's 20 21 thank you casey i think uh i must have done it wrong uh but that's just how we're rolling today because it's thursday we're and we're 15 minutes off normal start time it's all good we're we're delighted that you're joining us here today um and we are in our early release for quebec not madrid um and uh so what we're gonna do today is we're going to visit one of our uh you know apps that we work on uh along the way um and brad and i both love uh smoking uh meat and well whatever but mostly it's meat and uh so he's got a cooking app that he has been working on and you know periodically on the show and today what we're gonna do is and brad will tell us a little bit more but we're going to be looking at what quebec features we can bring into that app in the context of mobile so we've been doing a little mobile theme this week and we're ending it uh here on this thursday with mobile in quebec on our cooking app do you have any more detail to share on on what we're going to get into or do you want to dive right in sir sure let's uh let me share a little more uh we have this cooking app and it keeps track of our long cooks so you might smoke a pork butt or a brisket it might take 18 hours and you don't remember everything that you did over that 18 hours when you added things and wrapped things up and all that so it's uh generally like pit masters keep a log book and this is our uh digital uh log book that keeps track of that so what we want to do today is we we have a pretty simple little mobile app and what we want to do is uh add make it easier to add log entries to our cook from that mobile app and there is a quebec feature called parameter screens uh the zoom window is covering up the docs article uh i think that's what it's called it's parameter something get out of the way he's clearly reading and that's that's what we're going to do so we're going to configure a parameter screen i played around with this a little bit earlier this week and it is really a nicer way to configure an input into mobile so it used to take a few different steps and it was a lot of different records that you had to link together and it didn't it was it wasn't real obvious and this one once you get the hang of it i think it'll be a lot easier to configure inputs into your mobile app and if we um you know we had a video earlier this week in our new show creator toolbox that we launched this week and that was focused specifically just on the mobile ui builder that is available here in quebec as well uh so you can go check that out in the channel it's probably the most recent video in the channel right now uh so you you can see brad and chuck work with two of the product managers um from mobile walk through uh that uh ui builder um video so with that let's let's dive in on the screen share and get rolling in building because there's there's building which is more fun than talking all right let's go ahead and share my whole desktop here which is always scary that's risky risky um but i've got a i have a i have to bring in a mobile window all right how do we look here um that doesn't look bad all right so this is uh my docs article here for configure a mobile screen if you're going to do this this is the place to start which just a parameter screen just search parameter screen and you'll end up here but uh what we're gonna do is we're gonna configure this parameter screen uh then we're gonna hook it up to our action item and then we're gonna hook that action item up to an action and then we're gonna hook that action up to an applet um let's uh let me show what the app looks like here uh this is my mobile device um and so you can see we've got my let me make that a little smaller so you not not to uh sidetrack you but uh for the other developers who need to do a screen share like this why don't you tell them how you got your mobile device on your screen so they can they can do similar things internally when they're presenting so i am on a mac with an iphone uh which makes it fairly easy although maybe not if i had to pick any way to do this it might not be quick time or that that doesn't seem like the way but you just open up quicktime and then you go to new screen recording and then one of the inputs for your screen recording can be uh my iphone uh so you're connected with your lightning cable is the i am connected with my lightning cable oh and i don't think you guys can see that uh anyway there you go and and when you do that there's this little weird artifact that the time always says 941 so if you've ever seen a demo that says 941 you're looking at a recording if you're an android user if you're an android user you can use an app that i did on creator toolbox on tuesday called airdroid cast which is free and it has an app it does run over wi-fi so danger if you're on a remote location or a customer site or whatever um but that should work as well awesome thanks for that sidetrack brad yeah it gave me a chance to try this beer it's pretty good um yeah so let's go ahead and get going here um i'm gonna click into my instance and i'm gonna log in uh so one of the you know right off the bat here there's something that we need from the docs and we're gonna have to navigate directly to this table uh it's not available in mobile studio yet so we're going to navigate to this table and then i'm also going to open my app up in studio and one of the reasons i'm doing this is because i'm going to make sure that i'm in the right scope and this will put me in the right scope it's clearly not one of my instances because if you type cok you're going to get cookies at some point nice all right so let's see what we have for mobile in here so we've got a few different things for mobile i think what we're going to be doing is we're going to take that active cooks applet and once you click into a cook we're going to be able to add a log entry to that cook and you know it might be nice to see let's just show real quick i'm going to put this back up here and we'll click into what that looks like so i created a cook for today uh this is my uh live coating happy hour pork butt and then if i click into that pork butt we have some details like uh what kind of fuel i'm using uh what what thermometer i'm using and then if i go into the related list this is where i have this log of there's going to be an entry every time i do something so that's my goal when i start the fire when i put the meat on when i add a log i can have it check temps for me so all of those are going to be in my cook log and then i can go back and look at it and see you know what uh what happened and what went wrong most of the time but sometimes you know what i did right awesome all right so let's look we've got this parameter screen here and i'm going to hit new and we're going to get a new record so i'm going to name it oh and lock entry this seems like a good name uh let's not give it a description pagination i'm going to turn off for now but i think maybe if we get this working we can play around with this a little bit okay uh and then our buttons uh so when we do this there's gonna be uh for submit and cancel are gonna be at the top um so those are pretty straightforward but we can change the label of those buttons which is a kind of a nice little feature and then if we're using pagination we can uh label you know the next page in the previous page here i'm also so let's look at some of these other things uh fetch type i haven't messed around with this a little bit but i think it does kind of what you think it would do here uh so when when is it getting data i'm assuming it seems like reasonable types of fetching options yeah and then if it's active or not uh header view config so when we look at the input screen we'll kind of show what this could look like but you can basically you know you can add more to the top of this input screen so it's not you know immediately an input box or something like that um so yeah let's start there so there's a let's go ahead and save it there's a couple of different concepts um there's a cup we seem to be getting a very limited amount of the screen and i am trying to change that but i uh okay i i just wanted to add my depth know that you were on it well i keep playing around oh yeah let me grab any more of the region is that under the problem the screen chair i think you can pull that box down and give more of the it's just stretching though it's just stretching what i got uh if you use the arrow keys you should be able to move it down arrow just slides it around like if i grab it and drag it um i tried i don't know click i i'm i'm out of my depth on obs okay so i don't think we need the instance header is the yeah but if i do that we're just going to have the same thing bigger okay well i'll uh hopefully we get a little bit more i'll keep working on it on this end um so can you see the inputs here let's do this then and then we can scroll up there we go all right so with this parameter screen there's a couple of different things that i'm going to define so i can define the inputs here so this is you know pretty self-explanatory that's what you're going to see on this on the screen that's what you're going to have to fill out and then the other thing are these variables and you can use these variables for a couple of different things we're going to use one of these variables to pass the sys id of the cook record to my cook log record so that they're associated with each other so let's go ahead and create one of these inputs so the the main thing that we want to fill out is on my cook log record uh the main thing that we have there is a category field and it's things like start of the fire out of the log you know basically the action that you're taking so we're going to uh we're going to do that let's and then input type is going to be a choice and then i guess let's give it an order and i do want this to be mandatory and then i think for now let's uh let's just stop at the category that's all we want to put in most of the other values i think are going to autofill but we can test that out then i think the other thing we're going to need is the variable so this is going to be let's just call it cook id and this is going to be one of these variable types so we've got some different variable types and these variables are used again to populate a data or you can use them to pre-fill the inputs so we're going to use database field because i want the sys id from the cook record to be populated here but you could use things like the gps coordinates from the phone information about the user or just you know a constant so this would be just you know some something you put in there probably a string we're going to use database field so i'm going to save and then there's uh there is kind of a [Music] there there's a bit of uh configuring you have to do here so this is the category and uh we have to give it uh we have to give it some choices and we can do this like a typical choice field where we can define the choices or i can just tell it to look at my table where the choices live already and pull them from there and so that's what we're going to do but to do that we are going to have to use where are those so it gives us some attributes that we're going to need to manually add here so we what's where's our choice choice inputs so we're going to need to give it a render type and it can be checklist or image and we may play around with an image render type and then we're going to need to give it a table like still working do you want me to take it over yeah if you would i just cannot get that image stretched no problem this feels a little bit like our hotel room recording how much the live code happy hour that never happened that never happened um we are back uh so uh sorry about that uh so we should be should be good and we're done no i'm just saying and we're done excellent work all right so i am in a different window grabbing the name of my table it is snc cook management log that's a good table name and then the last one was field and that field is also called category all right so what we have done here is we've told it hey we want you to render as a checklist uh we want to run want you to render as a list instead of a uh series of images uh and then we've pointed it at a table in a field i expect that you know future releases i have you know no inside knowledge other than having been around a while and i expect in future releases uh these types of things will be drop downs and easier to add so we have set up the category and then the one other thing we're going to do is for the cook id i'm trying to remember what this is called all right so now we're gonna cheat because i made sure i know how this works and i have another one here but i didn't do it here i'm pretty sure our attribute is called field here and we want the sys id all right i believe this is now usable um a minimum viable product so we've got this screen it's got an input field and then i think this may be the right um the input we use there if not i have a i have a powerpoint deck somewhere that's going to be able to tell me what the name of it is um so let's go into studio and let's hook this thing up to an action item and an action so let's uh create a new action item and we're going to call this ad log entry and it's going to create a new record on the table not cookies not cookies our cook log table and then give yourself a little more screen if you need brad so you go all the way to the halfway mark on those circles oh nice all right so for parameter screen we've got add log entry and then i need to save it and let's come in a little bit and so i want to set the category field we're going to use the martini olive to my input category and you'll notice i have my variable available here too and then i want to set my cook field to the cook id so that was my action item now i need an action and we'll add a gentry and we'll associate this with an action item which was also add log entry and then for this one the table is going to be the table that it's running on and this is important because this sets the context for my parameter screen so that variable in my parameter screen is going to look at this table uh that it's running on in order to grab that sysid field which is nice because i don't have to this is this should be all i have to do to get that um to get that hooked up i don't need any ui parameters or anything like that oh nice assuming this works that that is the case famous last words assuming should all right and the last thing we do is we add it to our applet so i'm in my active cooks applet i'm going to the form screen so after i click into an individual cook i'm going to add a function what kind of function would you like and then i want this one an add-in log entry nice it was right there at the top entry and then i think it's saved but i don't like that i have a green dot yeah the green dot button is grayed out yeah i've seen that a number of all screen dot what i like to do is something my i don't have a form to nope there we go yeah move one up and down and then hit then yeah let's just change these there we go [Laughter] i just really like to save so it bugs me that i can't save there i really like to save too and i like the green dot being away like all right so i i think this should work though now you get to use the cycle yeah so now i'm going to pull down and i should have refreshed my configuration right that's the theory all right so let's go into my cook here and oh we have an ad log entry sweet i'm gonna click on it so because i only have one input field it's just going to give me that input i don't have to click into the category which i think is really nice um and and i did not specify a header so the only thing it's going to show me is that that input field so let's go ahead let's say i added some fuel and now i have the submit button and please don't tell me it failed oh oh darn i hate that red error message so so i suspect that the reason i have failed is because this variable uh i don't think this is actually named field i think it's called something else oh and i think that is what did it so you two talk amongst yourselves oh i can talk just a minute so um a thing i didn't want to get distracted with earlier was um a couple of weeks ago chuck we were looking at flow designer and we've got the new ui uh refresh for flow designer in quebec and i noted that they changed our little uh all of martini but then we looked at uh this today and it's still using this one i'm guessing atm is still legacy as well and uh i was i was you know i wanted to denote that i was like is that not a is that a ui or a flow designer specific pill pill picker i hope not i hope that maybe that just gets adopted by everything uh maybe in rome uh but uh that's gonna be something that i that i look into because i don't want the same button to do to be different icons on different screens yeah it turns out this attribute name was field name name versus so close the name for it should be field name all right so that may have fixed it [Music] but it might have all right i've got 14 pounds of pork butt to cook tomorrow that's a lot of meat no failed message let's see if oh i think we got another quick log added fuel is that right now it is that looks like right now so it worked guys i love that it picks the uh it gives you the categories right there like just bam [Applause] so that is uh that is really nice one of the other things i really like about this is that i didn't really have to like all of the parameters and everything i configured were in that they were in that screen i didn't have to go up and and build these ui parameters separately which i think is the old way to do that i always had trouble passing values between different screens and in the mobile yeah it always was a struggle for me as well so this is it too it was if i had eight fields that i wanted to put on the form which is probably a lot for a mobile application but you would have to do the ui parameters eight times you'd have to go back and do the input parameters eight times they needed to map them together eight times it made for very boring labs at knowledge yeah it felt uh like it programmatically could have been easier i agree 100 so just as an fyi we had an internal meeting this morning and uh one of the one of the comments was do we have it on the roadmap to make the mobile configuration a bit easier for no code low code people and andrew and i both applauded silently to ourselves i think brad you saw that too yeah yeah i saw that uh so we have a couple of things that we can try here uh we have some time so we can add some more inputs and to see if we can so one of the things that we can do is set a time stamp it automatically sets it to the current time uh but sometimes you know i may not remember to do this until five minutes later but i want it to reflect when i actually did it so we can do that and then the other thing that we can do is the choice field uh should be able to be rendered uh as a regular choice field or images oh images wow if we do images i think we can do some uh some audience participation i want images let's do images do that absolutely all right so the time stamp change is is more useful but i want images let's see if it tells me i kind of know how to do these images so we're going to need some help from the audience because i'm going to need some urls of images uh for like let's just do a few we need uh start let's do started a fire added wood to the fire and uh what's another ad how about added food so like food on a on a grill and then how do i so this is no longer a checklist uh choice inputs right so it is yeah it felt a little weird as a checklist because you only wanted one of them anyway though yeah for well that's just the name of that's just the name of what they say for a choice list uh so images two different terms between mobile and the standard platform shock and awe uh oh we need our own table for this uh no no no that's all right so render type needs to be image i wonder if we change that if we get a different choices here and we'll take those out ah there we go so let's say uh started fire uh we're gonna need to know you need to get those values from the yeah actual field i have this up on another screen and they are the same say one and we'll just do added food all right so we need some image urls here i haven't gotten any yet i'm really disappointed come on chuck are you looking for any i i tried to solicit some help but i haven't gotten any yet so all right you want image images of start fire add wood and add food to grill i'm gonna i'm grabbing one of firewood and we'll see yeah okay icon add food to i'm gonna grab it from my the place i get my firewood [Laughter] all right maybe how does he have his website here copy link address uh copy him address let's do this one send it over in the zoom chat holy long urls whoa they're going with bitly on that one oh it's it's got a google wrapper around it that's why it's so long all right which one was this uh add food to grill okay oh i did the firewood for you need another one you need a third one yeah we need one of uh just a fire yeah start fire here i got one here picture of drew barrymore sorry that was a really far-off reference all right i grabbed some uh so one of the cool things about this is there's a selected image url uh so you can have it change uh if you've selected oh yeah like okay yeah so like you could you could change the color on it or something like that so that somebody knows it's selected uh that's way too fancy for live code so we're not gonna mvp buddy mvp so let's uh broadcasting the stream is apparently uh too fancy uh let's come down a little all right so active cooks and eventually i would like to have less clicks sure oh no look at that two out of three check yeah yeah started fire so let's see if it actually works except that's not the one i want let's add some more fuel can you grab them the not googled yeah that's what i'm working on right now awesome uh and it looked like that one worked too bam this might no this might be somebody's catalog that i'm clicking into i'll try a different one so again that was the uh that was the log entry so let's do let's see what it looks like if we add another um another choice we add another choice uh well can we go back oh we were already there uh so let's add a timestamp i know is one of the this is going to be date time i think so i don't have access to all of the choices but i do have a good number of types here so the good ones the good ones only a select few get to come to this area uh and i'm not gonna make this mandatory i wonder can i do uh let's try it like a a now time in the placeholder i yeah i uh i mean if i i think if i leave it blank the platform's gonna give me a now time anyway so then we need to map this to the action item and yeah to the field in the action item so i have a timestamp field and i need to refresh this all right here's my timestamp field and there it is uh and while we're here we might as well uh update that yeah i sent you a different food on grill url hopefully that works i gotta be able to contribute something to this show today all right so let's see if that worked so our expectation is we get the new image and a choice for timestamp all right so now we have two fields so we don't automatically get all the categories ooh i like that let's pretend we added food and now so when i hit the time stamp it's going to give me the current time so that sounds that seems reasonable let's submit and did that work for that looks right i still wonder if the placeholder might not be able to put the time there and only if i click it do i want to change it like give it a default value yeah i i don't know if that i mean that seems like what the placeholder should do uh but yeah just not sure if it can do daytime placeholders let's do one uh let's do one thing and add pagination [Music] so i think we hit all and i think it's gonna do that for us imagination for the related list or where are we gonna see this uh this should show up uh so basically each of our um each of that turn the inputs into yes two separate screens yes so it helps especially if you have a lot of inputs it'll help somebody kind of walk through and this is actually yeah because it's like a stepper at that point right yeah yeah here's your category this is the technology that they're using for um the surveys awesome okay i'm i'm glad that it was what my expectation was [Laughter] so it does you can't put multiples on one page and then go to the next page i don't think so i think that's correct i think just one per page so submit and we got it in the cook log well and it gives you that auto interaction piece like the category was unfurled like it was when there was only one thing because you're only on one page it unfurls them already for you and and makes it easier to select these so you don't have to click then click then click then click you just you know get to choose your thing and then go i wonder double click like makes it just double click double click delete oh yeah that's better that's better oh actually it's a single click does that too oh it's sweet see i love it i don't want to hit next yeah so right so i think if you can tell your choice list if you want it to be multi-select so i guess if we told it multi-select then then you would need the network next yeah all right yeah i i love that thank you thank you mobile people for doing it that way it is it is nice i i am both you know critical of our platform and thankful when when appropriate and right now i'm thankful for that [Laughter] uh what else do we have so this uh this doc's article is definitely your friend i think that's a fine uh feature uh stopping point like unless you just are excited to do something else i i think no we did all of the nailed extra stuff we got it uh so we'll put this in the notes but it's parameter screen action item action hook it up to an applet great way to round out the mobile week it really was that that is looking slick and was not painful um the the having to know which table to go to is a little uh but you know once you know that that's a the thing then you know and it seems well documented so um i i like it we have a mobile and mobile impersonation demo question i don't think i have the right plugin installed for that let's see see this is how we do things as well yeah that's true uh as an administrator enable or disable it on the mobile apps settings oh do i settings yeah i don't think i have it enabled i guess because i don't i don't have that in the settings where did my screen go ah let's check real quick i think you're supposed to be able to click on your name i wonder if it's a plug-in smells like it nick said he couldn't get it to work either and post it to the community so you were setting us up for uh not success thanks i am guessing uh there is a plug-in somewhere or there you know maybe there's some settings somewhere that we don't know about but all right i am going to stop the share it might be something like the bookmarks too because bookmarks are not available on now mobile by default but if you add it to your nav bar than they are well that was just just delightful brad thank you so much for walking us through that nicely i thoroughly enjoyed it because i've not seen any of that yet uh so that was that was fantastic for me at least so hopefully it was good for everybody else too our topic for next week oh we've got we've got two um things we've got a theme for next week so it's uh now intelligence week so i'm gonna be highlighting some of the new capabilities and now intelligence um on tuesday and on the live code on friday i uh we've got a lot of cool new things in the now intelligence area i'm not going to reveal what all of the shows are going to be about but you're going to enjoy them and they're going to be useful things for you as a servicenow developer to leverage in your organization um i will let one of them sneak which is ai search will definitely be highlighted next week for sure it is so good um the uh we've rolled out uh the ai search um in was it high i think it's high that sounds right hi support hi support support support uh rolled out ai search i believe last week uh so and they have said that it's five times faster on high wow that's impressive search search something right now so it is it is it is purported to be uh the bee's knees search for cooking search for cookies and uh and so i'm excited about uh highlighting those capabilities next week um chuck uh for you it wasn't your fault it was my fault on the uh the technical difficulties you had today they were completely mine and i it's because i did an unauthorized change right before the show yeah upside down andrew gave you grief about that who made this author unauthorized change so emergency that was me did not have the right approvals i didn't i didn't uh no problem glad we were able to get the right the right thing uh done so uh that was great brad i really uh yeah that was that was so cool like i i want to go build a mobile app now like that was i was like oh yeah that was not painful let's do it i want to want to add new features but let us wrap up thank you everyone for joining us we will take a look at some more features next week but for now let us rate our beverages so we can move into friday my barrel aged shiner buck uh was pretty good i'm gonna give it a four two five oh a four two five yeah i really have never heard of the barrel age shiner had neither like that's sounds new or uh you know newly expanded market uh penetration there chuck how was your tasty uh cocktail bread were you able to finish your your um oh i have a lot of left still bread never finishes not when i'm driving like yeah that's always the tough part is taking a drink when you're when you're doing the presentation mine's gone and i must say i make a pretty decent bloody mary uh i give that a four five nice nailed it uh so my oh that's got a little glare on it sour cranberry lime and i'm not a fan of cranberries so i am i want one of those this is delicious this is this is just my kind of speed on a sour um we got some victory and failure so that they're going to cancel out a little bit uh so we'll just nail it at four or five a-plus work there um would drink again uh so good i wish i didn't have to like have people find these and bring them to me because we can't get them they're brewed in charleston but they sell out so fast uh they don't make it all the way to my part in north carolina before they go run between his house and charlotte um so that was a ton of fun uh thank you for joining us everyone uh we love having you on the show and thank you for your the participation and we will see you next time have a great weekend take care stay safe everybody [Music] you