[Music] so [Music] hello and welcome to live coding happy hour for february 26 2021 we've got a wonderful show lined up for you today my name is chuck tomasi senior developer advocate at servicenow and joining me let's bring in our uber extra special guest mr chris johnson give yourself an introduction hi thank you my name is chris johnson and i am the design lead for the ui builder thank you very much for joining us and last but not least is definitely our own fred tilton go ahead it could be at least there's only three of us uh my name is brad tilton i'm a developer advocate with the developer program here at servicenow and i'm excited to be here today i've been developing on servicenow for uh quite a while and uh i'm excited about uh the ui builder topic for today's show this is probably one of our biggest live audiences we've had on this thing this is a popular topic all right we've done our personal introductions and you know the the game plan we do our intros this is live coding happy hour so let's go around and do our beer intros real quick i stole one from my wife's stock i went into the fridge because she's normally the one who hoards the sours but because andrew is working the camera background we gotta represent our showers i've got a beauregard blueberry sour ale that is showing up very silvery on the light so that is my drink tonight this afternoon this morning wherever you happen to be chris what have you got well i'm coming in from chicago in the midwest and my wife is from wisconsin so i've got a beer that you can only buy in wisconsin i've got a new glarus spotted cow and uh just kind of my my go-to beer because it's delicious and we're up in wisconsin quite a bit i'll vouch for the spotted cow nice well i have today a it's a sugar shack diaries maple mocha stout so uh it's it's uh we'll see how it is brad i don't know where you shop for beer but i want to go there i think i got this one online for like a monthly thing all right then without further delay chris is here for a reason if you saw on social media or just glanced at the title we're gonna be covering ui builder are you getting tired of ui builder yet you've been pouring out the content on this stuff i'm not uh it's uh the more i've used it the more i'm excited about it uh you know the the power in the tool and all the things you can do with it uh you know i think i have a fairly good understanding of how it works now uh but yeah i've really enjoyed it i have done a lot of ui builder stuff this week we you know we did some uh some presentations earlier in the week and so uh you know i think uh so i have something for today's show that um you know is something i haven't tried yet uh so hopefully hopefully we can get something working uh today but uh yeah all right thank you for all the content the blog articles dear viewer if you haven't already gone over to the developer portal at developer.servicenow.com ding i missed my bill uh check out the blog and there's more to come right there's more blog articles yeah we're gonna do uh we're trying to do one every wednesday i think i had a thursday in there because i didn't have power for a few days but we're going to try to do one about every wednesday for the near future as long as we have you know topics to to hit on uh regarding ui builder so yeah we did did one this week around um i think it was client scripts client state parameters and events and kind of how they all work together and i i think we'll be hitting on all of those things on today's show as well excellent then without delay let's get tell us what we're going to be doing yeah thanks so um we have uh you know we we've used our artifact manager application on the show a lot so i'll i'll just go real quickly on what that is but for the developer advocates we manage all of the content that we put out whether it's a tech now webinar a blog a video live stream community blog now we have a lot of different channels where we release things and so we manage all of that through an app we call artifact manager there's a lot of automation built into it based on what it is you know like this live stream automatically publishes to youtube it sends out calendar invites um and so we manage all that through the app and uh one of the things that we do is the three of us uh check andrew and me sit down you know every about once a week and take a look at what we have going on what we did the previous week what we have going on the next week when it comes to content and so the goal for today's show is to take a really a really vanilla version of an artifact manager workspace and add some functionality to it to where you know it's a really functional thing uh that is more functional than the platform list view which is what we generally look at on those meetings i can see this being easily applicable i mean yeah we're using it for artifacts but you could use this for changes you could use this for any process where you've got some sort of review board right yeah yeah so any process and we'll i'll share my screen here in a minute and we'll kind of look at what we have so far and then what we want to do but we have a lot of people in the chat now we're going to try to do some monitoring of the chat and answer some questions i see andrew in there already a little bit but go ahead and ask your questions we'll monitor it if we don't get to your question we will try to get through that after the stream and and get it posted when we post it to youtube all right so i'm going to go ahead and share my screen here and i'm going to share this one and that should work so we have this artifact manager planning board and uh can we see all of this yeah it looks good all right so uh we've got this artifact manager planning board let me show if we preview it how it currently works it's pretty straightforward at this point but what we like to do is we like to look at what did we do over the last 10 days and then what are we doing over the next almost or maybe a little more than two weeks and then uh you know anything else so what i've done with this uh with this planning board is if you click two weeks it changes the filter on this list to the next two weeks uh and then both gives you a bigger range and these are you know this is functionality you could come in and use the list filter to do uh but if you have something like we have with our with our planning where we're always looking at this specific you know time period uh this is a little bit easier to use than if i were to save a bunch of favorites or you know i have to filter the list every time so that's how that works uh and i'll show a little bit of how you know how i did this but i have this uh drop down component and when we look at components there is this first tab here i think these are all the component properties so this is what you put into the component uh and then on the right here which i think we can see these are all the events that the component has and this is kind of how that component can communicate with the rest of the page and i thought we had oh there we go and so i've got an event handler on uh my drop down here that updates a client state parameter uh with the right value so my my values in my drop down are encoded queries uh and so i am updating uh this client state parameter with that encoded query and then we've got a client script that's uh setting that on the list there does that make sense did i explain that to okay with what we have so far i'm going to ask this question and pause and open my ear i was answering questions but what i heard made sense yes all right chris did it make sense it did it did it was very eloquently put okay chris is our auditor [Laughter] all right so what we want to do here is uh is we want to add a button uh so i want a button to pop up a modal uh that has a quick add functionality so in these meetings we generally you know we'll say hey we we need to put something out for this and all we usually need generally is uh the title of it um the type of artifact it is so blog webinar and then the plan publish date those are kind of our three big fields uh where we do everything from so i think what i want to do is i want a button here i want that button to pop up in a modal and i think i want to add some stuff to the modal and then have a button on the modal that that creates the record uh and i think i can do all of that from within ui builder here with such confidence such confidence i'm pretty sure i can uh so i played around with modals for like five minutes the other day just to like make sure that you know that we could at least get started here and they look pretty straightforward so i think probably the first thing to do is create a modal um and i don't do we have any questions in the chat so far that we have one from phil it says how best to carry data effectively around in an experience that's a that's a good question um i would think within a page probably client state parameters uh is the way that you're sharing data around uh or you know through an event payload uh somewhere and then between pages you're generally passing uh like page parameters that's that's my shot at that uh answer well chris does that sound right yeah if you if you don't want to write data to the back end then oh yeah you know passing parameters like that makes a lot of sense i think in some cases you you may not you know you'll hit limits on what that can do and so you end up wanting to to write something somewhere um that you can go and reference yeah that's a great point yeah putting putting a putting it in the server so writing a record to a table all right so let's uh let's add a modal uh and i have a modal button here nice uh so we've got some different kinds of modal i i think i'm going to want a custom modal uh because i believe so alert confirm and confirm and destroy seem like they will give me a modal where i just add a message to it maybe and the buttons are preset and this modal you know we want to add some some components to with just like a you know create create record button and then iframe uh seems like a good way to port in you know something from the platform or um i assume you could bring in something from service portal and then i think the viewport is is that you can take another page and put it in the modal another page or a page fragment it's it's okay similar in some ways to an iframe except um it can also you can pass content into it from plugins or other third-party content that maybe you don't even know about yet um and so it's very handy for those sorts of things but also more complicated all right okay so i clicked custom and it looks like my uh my modal has some a few different uh drop zones what do we do what do we call these drop zones is a cms term uh containers my uh my old days so the places in the ui where components go um we refer to those as slots and so if you have a container it has one or more slots and the way that you know it's a slot is if you look in the content tree on the left hand side the slots are indicated with the kind of the dotted outline square and so depending on your layout you can have any number of slots so this is this is a modal with the default layout which is sort of a header main body and footer but um you could go in and define a custom layout or change the layout sort of to your heart's um desire and and and kind of lay out your modal however you'd like all right so i could change the layout of the modal through here you could you could also nest um layouts within layouts as well so you could take that header and sort of split it into and those things depending on what you're what you're trying to achieve nice all right so i think we were i want to stay pretty simple with this for now let's start tempo let's add so i think i want to stylize text because we just want to add a title here um so i think we will call this new let's say quick add that's the term that we typically use so one thing to think about as you're thinking about text is um the stylized text is is very flexible so if you really love comic sans and pink you can you can you know control it to your heart's content um the heading component actually is is a little bit more restricted but it also ties into the theming engine and so if you're changing your theming engine and you're changing your headings the heading component will actually inherit those things and so depending on the situation and the context and what you're trying to do you may want to use a heading component because you inherit the theming you may want to use a stylized text component because you want comic sans in pink yeah let's use a heading component that's a that's a really good point i i had not thought about that but i probably do want the heading on this modal to match whatever else you know whatever i style this as so let's uh what do we think that's what you go for most of the time i just love the fact that chris said comic sans and pink it's like that's the basement from the designer that's that's like an insult you can't injure him more than doing that comic sans has a purpose [Laughter] nice uh all right so i think i want to start this with just uh let's just create a short description uh and see if we can get that to work before we add more fields to it so um or what do we call that title we do call that title the label is title yeah the field is short description i get caught by that at least once or twice a day i i know chuck you know all about that now with now integration that checks who i go to with with field names and everything now well now i'm starting to do a a podcast integration with the service that we outsource to so i've got the spoke being built and the data coming in and oh it's a lovely time nice for uh break point quick plus yes yeah i don't think we need anything else here i guess i don't think we need a placeholder um i'm going to save because i like to save a lot can custom built components have slots in ui builder ooh that's a great question i would have said that's your answer yes from the man he says yes there's some nuance there but yes the answer is the answer is yes and actually you you can illustrate this in in sort of a way by if you click on your input here um you'll notice that in the um in the content tree we actually have two slots there an end and a start and those are named slots the component is actually giving you and so for example if you wanted to add like a an icon component at the end of your field you could do that and so the component author has said hey i i want to give a little bit of flexibility with my component so i'm going to go ahead and open up these slots to other people and and they can go ahead and do it i like that let's add an icon uh there's [Laughter] i've i can't i can't use uh fun awesome icons huh let's go oh they're just a good input icon oh a smiley face i don't know you could do like diamond i think there's a diamond diamond or something like that that'll work i think there was a diamond there's always a hallmark oh yeah i like it all right so we do have a question i just saw it uh which is uh is there a way to repeat uh objects like list items uh like you can do with ng repeat in angularjs and i'm gonna i'm going to take this question and and twist it a little bit because there's something i i kind of want to do for a different project but you know we have you've got evam for like data row and data set components and then you have these lists uh but is there another way at this point that you know of chris to like you know if i wanted to set uh you know create a component that had like some text and a button and then repeat that a bunch of times based on uh you know something i bring in through data resource i don't think i don't know of a way to do that right now so i'm wondering is there a way to do that not in the quebec release okay that's it that's a good answer the ways that you you can achieve things like that would be through you know custom componentry that kind of handles that for you um and we have examples of teams that are that are doing that and then evam obviously also is that is another capability with with certain limits and realities that it brings along but but no not in quebec we don't have a repeat function okay good question but thank you for the feedback there there are i have a couple of use cases for that uh that we can talk about so the button uh for now i think we'll just call it uh submit how is how is internationalization or localization done good question so uh you'll notice that with that label field you've got a little world icon there yeah and so uh this hits like i don't really know translation that well because i'm a designer and not a developer but i know that we added that feature um to allow you to target these particular um strings for for translation and it's not on every field obviously but you see that it's on both the tooltip text and the label um and i'm assuming there's a help center article that explains you how to use it but there is i mean real quick i'm going to gonna go out on a limb and say it's done through the cis ui message table or uh what's the other one sys text translate is this translated there you go it sounds right and so if you're creating a custom component um that's an attribute of that particular config prop and so um as you're creating a custom component tree you want to be thinking about which which things you want to enable translation for and which ones you don't okay and you would do that like in the now ui json file and your custom component yeah okay nice do it people just start doing it if you're building custom phones just put it in there for anything that's user facing labels help text put it in there you'll thank yourself later all right i'm pretty sure i probably need a client state parameter to hold uh what i have in the title here so that i can then send it to the server so let's add one um that looks right i don't think it needs an initial value and the way that i have done this in the past is just by binding the input values set i guess adding an event handler and updating the client state parameter and this would be the payload that value i like the way you said that brad the way i've done it in the past it's like maybe i'm not doing it the best way but this is the way that works we have we have an expert i i have noticed that there are multiple ways to do things uh most of the time in ui builder which is consistent with uh you know other ways to in the platform there's usually multiple ways to to get something done and i'm sure eventually i will know uh when to use each of those ways all right so i think we have this uh this modal we need to we need to do something with submit button uh i think we will need we'll probably need a data resource uh so i'm going to save this so i'm getting nervous it had been a little while um unselected here can we kill it there we go uh all right so let's add a data resource and we're going to want to create a record and i think there's whoa uh there's two alignment planner works so that's probably a plugin we have enabled that i don't have enabled in the last instance i did this on so i think we create a record and then we have to call this data resource from somewhere and it is expecting i think it's expecting a table and a template of fields which is i think an encoded query um and then like display fields yes no i can't remember how i how i know that it needs those things um oh so let's do that let's do that in a script here um so i didn't show this before this is the script i'm using to update the um our list here uh and then i have another uh script that is just a handy thing that i've been using because i don't know what all of the event payloads are and i sometimes for some components like this list component if we look at it it fires a lot of events and most of them i kind of know uh when it fires this event but not all of them so one of the things that i have been doing is adding an event handler that that calls my client script that logs the payload of the event to the console i'm sure there's a an easier way to figure that out but uh that's what i was doing there i like it nice little debug trick all right so let's add a new one uh this is gonna be uh quick add artifact uh so we need the first thing to do is we want that title and i think that is uh it's under the state and it is called quick add title uh so we're gonna need that and then we're going to say so we need to combine the actual title with and make it an encoded query and so i think um uh we can say artifact template uh is right this is an es6 thing right where i can uh i can do this um it's short description i'm creating the encoded query i i should go to the list and uh and have it do this for me but uh does that look right somebody in the chat tell me if i'm if i mess this up uh and then we want to take that and we want to create an artifact from it and so i believe i need to say i think we want to execute is that a api not happy with you i wish i could help [Laughter] so i want to call my data resource didn't it execute maybe it's something else is it what else do we have here i i mean i don't write javascript but i believe that that data thing at the top of the list is how you get access to your resources i think you are right that um yeah do we have more than the list no artifact template data all right i'm gonna cheat because i did this somewhere else recently that's the way you do it copy and paste your previous mistakes let's see let's bring up the instance so i know it's i know what it's called i'm pretty sure but i need to call it uh sorry it keeps it open no need to save where are the data resources oh yeah i know i can so i can click on data resources i know it's called create record one but i need to there's something before i call it i think it's execute but i am nervous because it did not show up uh under the autocomplete so that is why i am looking at a demo that i did recently where i did this except i pasted the script in oh except i have it in a onenote all right here we go because i had to paste the script in api data oh it's just the name of the data resource yeah so it was there um [Music] but wicked title no no what did we call that data resource all right this is what it's called why wasn't it in there i i don't know if you start typing it will it jump up yeah data yeah so that was it and then execute i think is what we need the fact that it's not auto completing uh scares me yes it does but i'm pretty sure this is how it's supposed to work nope all right so i think it's expecting table uh and uh chuck this is where you come in handy what's the name of the artifact table x underscore snc underscore artifact underscore mgr underscore artifact i can that's not the only way that's not the only way that you come in handy but i i know that you would know all right temple field i should have given you the constants just to see if it would have played uh artifact template is what we named that and then i think the other one is use at this point i'm just going to copy and paste oh now you've got phil questioning his own sanity uh i i think this is uh how this is supposed to work um wow something's hold on let me let me close some things my i hear my fan turning on on my macbook and it means you're doing it right i think i have too many ui builders open um so that looks right uh for me uh so let's go ahead and save things and i realize i'm saving way more often than i probably need to but especially when my mouth starts getting laggy i i need to start doing that um so we need to tie i think my button to and i i do like how when i clicked on the button the modal popped up and i didn't have to like pop the model up first popped up and selected it it's just a nice little detail that i wouldn't necessarily expect thanks chris yeah whether you did that or not thanks you're welcome i'll take credit you're the you're the only representative here so take credit all right and then i think the last thing we need to do is we need to pop the modal from a button so i'm going to put my button on the right here your quick ad yeah that's not working so let's add it here uh it's this one right yeah so we got a button um so i i always like my buttons to show up in the middle so i have found myself doing this pretty much any time i add a button to a container i make the button go to the middle of the container that's definitely not a best practice or maybe it is a best practice that's just a that's a my practice because it i like the way that it looks all right so let's say quick add uh i don't think we need an icon or circle plus yeah uh what's the rest of my page look like that'll work and if you wanted to make it look a little bit different i mean you could change the the variant property as well to turn it into like a primary button or a secondary button or uh i think there's also up like a positive and a negative button in there too oh nice so that would be uh like if it was negative it would probably be red that's correct yeah nice let's positive primary let's make it a primary um and then we will call my client script from the button did i do that already now so i think this may work if i miss anything anybody we got time to still fix it you can't have everything work in the first first half hour all right so let's test it is there a property on the modal i think there may be like a property on that modal right andrew's giving you grief two primary buttons on the same screen don't do i knew andrew was going to say something about the primary buttons go with destructive uh my modal pink comic sans is there uh that's right defer modal content loading so why why did my modal pop up right away oh yeah when you reloaded the page you don't want to open the fire up right away you need to unclick on load oh yeah did you actually do it to the click event of the button i believe i did that i think the button only has one event right um let's see yeah button clicked quick add artifact client script does that client scroll oh no it does not good call we actually want the open or closed modal dialog right yeah yeah and then i should name this modal i don't know do we think that we'll fix it popped up anyway well let's see if and then that doesn't pop it up um anything in the log that might be barking at us so i think do we have to set this to yes you do yeah so what's the use case where you wouldn't want it to open in certain cases you actually want to have an event close a nodal oh of course okay so this does either and this is how you control open or close hey there we go all right so maybe that fixes that why why does my moodle maybe that fixes that you are full of good sound bites but i don't want to be too confident um all right so let's let's uh let's see if what we have done works so far and then we'll troubleshoot why the modal is i i did not need to do that so let's say quick add okay all right so that works um still popping open at the beginning hey um check this building to fix this modal that's not happening in 2021 uh so i hit submit and i didn't do anything i this might be where i used that uh that same event handler to close this modal when i hit submit oh yeah yeah yeah yeah so i don't i think it's gonna show up in this list let's see uh if it showed up here in the artifact list so let's see if that worked first uh yeah it did work okay created created the record that's good with the title so we know that that's good script is running so most of what we have done works um but we want the submit button to close the modal i think we just add another event handler right yep yep all right that almost seems too easy and then we gotta figure out why it's popping up at the page load all right well let's see let's see if it uh uh another artifact uh i think i may be able to say all but i don't think at all refresh or search up here oh well it's in order of planned publish date oh that's true that's true we didn't actually order as the order is the type for some reason um yeah let's we'll just refresh this one all right so it it still working yeah uh and it closed the modal so that was good uh we just want to figure out why the modal is popping up at the beginning i just realized you're on andrew's employee instance so be nice this is a this is a clone of uh of the deaf program does the page itself have an event that's firing that is opening the modal on page load um so how does it have this event did we we didn't add this did we or am i going crazy i don't remember i don't remember you adding this now so that was you correctly you could delete that yeah so that was it uh i do want to i do want to talk about page events a little bit so let's see we're refreshing that was it so i'll take a drink yay we have a quick ad yeah so that works um so that was nice uh that works page events uh are are something that um you know they they are pretty powerful i think um because you can define you know you can define this handled event on your page and then call it from multiple places uh which is uh something i did i think a couple weeks ago in one of my blogs or demos uh and it was pretty handy and then i like the page ready uh event uh so you know i i used to do a lot of uh cms portals and and ui pages and you're always using the prototype downloaded uh functionality so that's that's what this reminds me of uh being able to do something you know once once the page loads is nice so so that worked we got everything going do we want to add more fields to our modal or so i have two more things that i that i would like to do we can't do them both uh we probably have 10 minutes left of development time so we can either add more fields to the modal and make it functional uh or uh we can add uh you know i think the other one's probably too much for the time we have left but the other thing that i want to do is so this list of artifacts has a lot of different kinds of artifacts and sometimes we only want to look at one one type of artifact and so what i have thought about doing uh is either some toggles or maybe like a multi-select drop-down where i can tell it these are the ones i want uh so i only want to look at blogs or i want to look at blogs and live streams which i think i think maybe too much i think there's just going to be too many parts for that andrew wants to see it do a list refresh on submit when you get your new record in there yeah let's do that oh like a shell notification saying that your record has been created successfully too oh that would be a nice bit of feedback yeah with no idea how to do that notification can you talk us through that chris oh great um you volunteered it it i it's a it's an event that uh it's an event handler that you can use all right um see this is a live show i know be careful what i suggest that's right uh it was this button so let's say what do we have add alert notifications i believe it's that so so these are things like the the setup loading state um you can actually add like a loading bar you know one of those horizontal loading bars across the top of the application or other you know loading types of states that the workspace supports um and then you can add alert notifications now i believe this is a big old blob of json and i don't know what the but the blob of json is um but uh you can pass in notification objects here and actually you know have them display at the top level of the app array of notification objects let's see i don't know how this is formatted so let's just try uh name oh boy that's not an object oh yeah it's an object's gonna have a try name or title i don't know all right subject we can spend the next 10 minutes guessing uh this is definitely not going to work i bet we can find one of these somewhere that is is working but i gotta save it let's see you have to close the window every time or can you just refresh it i think i can refresh uh test message matthew is saying it's message we got the bar let's let's try a message he typed it very confidently he better i think he was on the team that built that feature well that's uh that's that's good to have all right let's see quick add another test oh oh matthew what unless we screwed up somewhere which is always possible that's a possibility uh message do you need the square brackets or is it just it says it's an array of objects so it did say array of objects but i think it'll uh i think it'll uh give me some feedback if it doesn't like the format of this so let's see okay oh yeah matthew didn't have square brackets on there so so much for the array part i'm just grasping at straws at this point didn't like that at all so it wasn't right okay all right heaven forbid we should try and get like the the record number in there so i think generally what what we'd probably do is bind this to a like a some sort of script that would also sort of say hey did the record submit successfully or did it fail and then make a determination about what to do next based on whether you know because sometimes obviously sometimes things don't get written to the to the back end for whatever reason and so then you know you would that script would be able to say hey you know what am i going to do in these particular cases and you can kind of decide how you want your ui to work but you know this also works with you assume that everything will always work and always say yeah i guess so one question i would have would be our client script uh if it has like some error handling in this um you know then i can right then i could call those events if it was successful and then i could you know show a different notification if it was not successful but that's probably something we can look into so let's uh you want to add a couple more fields um i don't know i did like andrew's idea of the list refresh of the list refresh because i saw a demo on how to do a list refresh and uh i don't quite remember it but i believe so i i i'm not sure we'll actually be able to get it done but i think the way that you do it is that you pass uh you pass something into the refresh requested on the component of like the current time uh here we go yeah you saw that one i saw the the type type and message okay one more try one more try for philemon uh all right so that was this one it's an array so put it back in the square there we go yeah i wanted to type right in that box too that does i i almost always try to type into the box and then i get the pop-up thank you for the feedback and if it's going to be in the box it'd be nice if it was you know formatted json too is it not type type info all right all right there is a json formatter at the top of that box too by the way that will make your json look pretty it's that little thing there it is ah there we go i have experiment in the client script so that's the the now code editor and it works against different like it does javascript oh it's formatted there too although it's off screen all right so save and refresh type info make sense this one [Laughter] [Applause] [Laughter] thanks chat all right uh so the list refresh is the other thing i don't know if we'll actually get to that uh but we can try it so the the way that i have seen people do this is uh the refresh requested uh so let's see what the tooltips is the info icon an object containing a timestamp that can be passed down to trigger a refresh uh so i think what i have seen is basically like a client script passing the current date time into that so that it refreshes lightly do i have that i don't know if i have that handy though let's see my other browser wondering no i i don't have that handy and i don't think we're going to get to in the next five minutes um so let's add let's add just a type to our modal um actually type as the do we want to add type or publish date and uh which sounds harder i mean daytime sounds fun that said no one all right [Laughter] uh what is the is there a date input or is it just an end calendar i don't know calendar this one looks promising i don't think that's what you're nope [Laughter] he tried to warn us he tried to warn us i don't think boom [Laughter] let's see i guess let's uh scroll through let's see somebody uh maybe somebody will tell us got like 100 components is it just an input that we then [Music] the input does have a type selector so if you just add the input there is a type box but i don't know what all the different types are up at the top oh uh email ip number text i don't think that's gonna be it so i'm i'm watching the chat waiting for one of y'all to uh give me the right answer mini calendar is that uh i'm not i'm not hopeful on this one either so this is a what happens it's friday what does this calendar do uh on okay click on cancel on value change you can't get a date picker as input outside of the form oh i think i remember i think i remember this from uh another thing so i think disappointed we probably so from a from a process owner perspective if i'm thinking about uh how we will work with this i think a workaround could just be to set it like a day in the future and then and then rename it or redo it in the list but i could also i could also just use like a drop down to say like how far out do we want this because we generally yeah it's like we're either going to publish something next week or we want we want to publish something at some point but we're going to set it to two months from now so that could work um but i think oh look at the time we're about out of the time for that um we did somebody says reveal the name servicenow dev program is andrew guess i will pull back the curtain he's uh he's in the background all right so i think uh i think i'm going to stop sharing and maybe we can do a little bit of q a and then rate our drinks can you easily add our regex on inputs crossing the line to custom component question mark i'm going to stop sharing i don't think you can give slack points in the uh in the youtube chat phil let's go nor will i give the bow tie emoji when you mention me um all right so if you have any questions at this point we've had a lot of a lot of chatter and i think we answered some of the some of it but we've got a few minutes if anybody has some uh some uh questions so input type equals date so i do think uh tai i do think there is uh a limit and i do remember uh at some point hearing that uh you know the the date input uh is not available at this point but i think i i think it's safe to say that future releases we will see more components available uh to be you know for you to build things with and you know there'll just be more functionality which is generally the case with any you know product that we have but i would expect that specifically with components and in this case i think i mean you could also just create a small form view and embed that in your modal and then get all the the form controls that you're used to now there are probably some pros and cons to that as well but um you would get all the expressiveness of the forms that we support so yeah that's a good point because there is a there are some form fields type components uh that would let you input into them and you know i'm guessing there is a way to take the output from that and then you know put it in a format that they're expecting on the server um scrolling back looking for some other questions that we may have missed so there's a will there be a service portal built in ui builder soon so i have i have an a sort of official answer for this because i asked this question recently but but i think for the quebec release the focus was really on um you know workspaces and and portals for apps so probably smaller portals this is not this is not the time where you can take your fully fledged service portal and then just port it over to ui builder and rebuild it there's still some functionality that that we'll need to build in the future and then i think there's a csm configure a work configurable workspace is another you know thing that you can work with in ui builder in quebec all right should we rate our beers yeah i think uh i think we're ready for that i know i went out order at the beginning the host should not go first but force of habit so i'm gonna give my uh my beauregard blueberry sour ale i'm really liking this i did not i was not a sour person once upon a time but it's really growing on me uh i'm gonna give this a 4.0 not bad how did you do well i mean like i this is my this is my everyday beer so uh i i like it a lot i think i'll probably give it a 4.5 all right nice i've got uh my sugar shack diaries maple mocha stout with maple syrup vanilla beans cocoa cocoa nibs cocoa nibs and coffee beans uh it was very good it typically things like that one of them kind of overpowers everything else and that's all you taste this was really well balanced so i'm going to give it a 4.5 it it sounds like a very smooth beer it's very smooth it it feels real thick so yeah it's also very appropriate for quebec given the maple syrup oh there we go yeah let's let's pretend i planned that well called you should be in marketing [Laughter] and with that thank you very much chris for joining us you're extremely helpful in some of those tight spots and even some of the lucky spots happy to be here it was fun hope you can join us again sometime brad awesome job learned a lot and uh showing just how much more there is to learn so thank you very much wonderful viewer we are going to sign off now thank you andrew for doing all the back end work everything looked like it was working fine much better job than i do i still have my trainee badge hiding around here somewhere so kudos to you and thank you dear viewer for watching whether you're watching live with us today or some point in the future hope to see you again right back here don't forget to check out the developer portal and the blog developer.servicenow.com till next time take care stay safe everybody [Music] foreign [Music]