[Music] this [Music] so [Music] hello and welcome to live coding happy hour i'm your host andrew barnes delighted to be here with you today uh for knowledge knowledge2021 let's jump right into introductions brad say hello to the folks and tell them who you are hey everybody my name is brad tilton and i am a developer advocate with a developer program here at servicenow i've been developing on the platform since about 2008 and this is my 12th knowledge conference which is really exciting and i'm excited to talk about ui builder today oh fantastic and i'm andrew barnes also developer advocate here in the developer program that brings you things like developer.servicenow.com and which is where we have our blog and post events and oh it's right there brad's pointing to it developer.servicenow.com it's hard to point when you're looking at yourself on the camera sorry keep going i've been on the platform for a little over seven years i've been with servicenow for two and a half years uh doing this role and i just love building uh custom applications and integrations on the platform this is knowledge number eight for me number eight knowledge 14 was my first one which was in san francisco yeah san francisco let's do that let's go with that yeah we're going with that and brad so uh what we do on the show uh is we do uh live coding so this is completely unscripted but the first thing that we do before we even get into what we're going to be doing today is we introduce our sidekicks because this is live coding happy hour and what beverage did you bring to be happy with brad my sidekick today is the dragon's milk barrel age stout uh and it's gonna be a good that's a good one oh i love that one and i have got a let's see there is pujala i think is what i'm going to call that and this is a chocolate vanilla oak aged imperial porter that i'm going to be sporting today in my handy-dandy service now cozy that's fancy that is fancy so today we are going to be doing uh unscripted uh so we haven't practiced this we haven't prepared this this isn't a polished demo and this is something that the advocacy team does every week so every friday you'll find us on youtube.com servicenowdev program for a live stream of an hour of doing unscripted servicenow development where we show off new features in the platform uh but we're doing it in a the same way that any other developer will do um and so it's typically myself brad and chuck tomasi which combined we have over 30 years of service now experience and you will see us because it's completely unscripted run into problems and issues just like every other developer does we'll be googling things we'll be asking questions the chat will help us out so it's a great time to be had but today brad we're going to be looking at working in ui builder so we've started a hackathon management app and tell us a little bit about what we're going to add to that application today using ui builder yeah so we started a hackathon management app on our live stream that we did during the hackathon so that was that was fun to do and we started a ui builder page where people that are that are doing the hackathon uh a place where they can go get help um so so we're gonna continue that page and try to kind of build it out here where i can find out more information about the hackathon i can check the rules i should be able to ask a question um i have some info about my team and my instance so we have kind of a starter page that we're going to start with and then we're going to build it out and i have an idea of what we want to do i have not tried it yet i i can 90 guarantee we're going to run into a problem yeah we'll see how it goes nice well do you want to go ahead and start your screen share or do we have anything else we want to talk about before we move to the screen share let's go ahead and start our screen share also i will do that by clicking share screens and that should be the right monitor um so we're going to start in app engine studio which is how we created this app so let's take a look at our hackathon app in app engine studio we have a few different things going on here in app engine studio i've got 12 tables that we've created so far where we have our event table which is the main one we're going to be working with and then we have all sorts of app teams people instance operations all sorts of things in that that relate to that table so we've got that we've got let's get back to oh what else do we have so we have some catalog items that i've created so submitting an app reporting an issue we're going to surface these in ui builder we've got the the dev instances and instance operation forms and then our hackathon portal which is where we're going to be today so i can click on edit there and get into ui builder since i'm way zoomed in this this screen real estate is something that i'm going to need so i'm going to open ui builder a different way and we'll get more real estate there so let's open up the portal so ui builder um is greatly enhanced in the quebec version of servicenow right brad yeah we have a lot going on in the quebec version so it originally came out in orlando and it was primarily used for customizing and adding things to workspace landing pages which was really nice for workspaces but in quebec it you know it's basically an entirely new product in in quebec and it allows you to both work with the csm configurable workspace and then create and modify your own workspaces and portals that you create through app engine studio awesome so thanks for that extra detail yeah so i'm going to open up this event page that we have started and let's get rid of this here um so let's go ahead and open up this event page and we'll see what it looks like so i've got this event page uh it has uh some info about the hackathon uh and then it's got some knowledge on the left and then it's got a spot on the right to put things uh i will show you guys uh i mocked up this really impressive mock-up using my uh my tablet and pencil so this is what we're going for by the end of today's episode i know everyone's really impressed uh with how good this is uh but we're gonna kind of go with some links on the left uh with uh some kb then info about the hackathon that we're uh running against in the middle and then some links on the right uh so that's uh that's where we're going i want my design to look exactly like that when you're done all right all right so that's magical we've started with i have these three different uh areas on the on the screen so uh we're we're waiting we're most of the way there you just need some squibbles on that right hand side and you're done so let's look at what we have so far so i do have some things that are dynamic on the screen right now uh so we've got this we've got a few data resources going on where we are looking up the participant record for the person that's logged in uh so my uh my event record is kind of the main record that we're going to be looking at and i'll show what that record looks like in a minute on the back end but we are looking up uh that this event participant record which is where like my person record relates to the event record because we're so we're trying to find uh the active event and then we've got the event record itself where we're grabbing uh some info about the event record and exposing it so this is where we're pulling like this title and then the start time and end time and you'll notice this is the information from the creatorcon hackathon that we ran recently uh and you can uh if you're watching this through the knowledge site you can take a look at the hackathon finale where we showed uh all sorts of things that went on at the hackathon it was a it was a fun 24 hours and you know a tiring 24 hours for some people it was a fun 24 hours and the apps that were created were really really quite good and i believe we've got a short code but i'll definitely make sure that the link is in the youtube um but i believe it's sn what what's our it's dev devlin there you go devlink.sn k21 hackwin well done there's no way i remember the thing brad i remember the thing all right so let's take a look at our events table here we have one event it is the creatorcon hackathon it's got some metadata it has this description that we're going to want to show on the page and then it's got some related teams and people and so we're gonna show a lot of this info uh but we're gonna start with uh grabbing this description and showing it in the middle pane if you remember from uh my incredible mock-up we had this details word that represents everything that i want to put here so on my left here we've got this container i don't think i wanted this to be nested like this uh that's gonna be all right all right so we have this uh we have this container that's got my four components in it where we've got some static words and then we have some dynamic values if i were to click on this and show you know where we're referencing that data resource so what i want to do is i want to add another thing and i'm going to add it here sidebar is this one okay we'll add it here so i'm going to add a component after there's a couple of ways to add components you can do it from the the content tree on the left here or you can come in and click on the little plus signs i pretty much always use the content tree because i can you know i know exactly where i'm at you know for sure which one because the bottom of the one you're at right now versus the bottom of the container holding that one the little plus signs are gonna be in the same spot on the screen yeah and if you look at like so this is five components and one of them is this little tiny one there's all these little plus signs that's hard to use so i i pretty much always go on the left here and so i can tell it exactly where i want it to be so we're going to add a component after i think i'm going to make it a container and then in that container 8 is what just got created i can rename these containers which is probably a good practice uh especially if you are you know if this is going to be a big page that you're going to use a lot i'm not going to do that now because i if i do one i'm going to want to do all of them and it seems pretty tedious but that's uh that's something that i probably should it was my expectation that i could rename those brad but i don't know that i knew for sure that i could rename those so thank you for that most of the things you can rename and it is generally a good idea i think to name something uh so that it makes sense to you and uh like if we look at these data resources they all have these names by default like lookup event record or look up oh no i renamed these good for me i think these were like look up records one look up records two which once you get a lot of data resources it's pretty difficult to know what you're referring to with those uh so it's a good idea to rename them if you're watching on the knowledge site give the page a refresh because the chat wasn't working earlier so if your chat's not working on the knowledge site give the page a refresh the chat is working now and we'd love to have you engaged in the chat sorry about that brad let's go i was wondering why nobody was in the chat there we go let us uh get our new container rolling or yeah let's do it rolling so i think what i want to do is i want to put a horizontal line here and separate it from the body and i actually don't know what our options are there let's see if there is a no there's not a so i think we'll probably add a component and then just put a border at the top uh seems like the most that seems like a reasonable way to draw a line where's my html component that's how i draw lines oh it's called rich text is what i want it's it has an html on it you just can't search html all right so let's minimize this and then we'll come over here and what i'm going to want to do is i have a bunch of html in this field and so i want to take this data and i want to make it show up in this component so i am going to start by taking a look at my data resource so we're grabbing some event data and i am telling this data resource exactly what data i want to grab and i am not grabbing that description field so i think we want to add that so i added that and then my preview refreshed and you noticed that this got a whole lot longer wow that's quite a bit longer so this is all of the html and i just really love working with the data resources and that i can really easily see what i am getting back here so i know that i've got description and then value and then that's going to be some html here so let's go and we are going to bind that to this component so i know i want data i want lookup event record and i think that was the result it was and then we want description and then i want the value let's see what happens hey that looks like html all right so we have this very long html going in there so i'm going to save and let's test that so let's hit open [Music] all right so i have my name i've got the start time and end time and i've got a bunch of html here wow that's why that's all a link but that's great brad from a rendered site into that description no that's task number one and then what we want to do is i want to give it a border as well so let's see if i remember how to make borders happen border top border i think we want uh we do want border top there's a way you can do it all in one let's say one pixel i don't know does that do anything somebody give me the right to well let's say order top here we go uh line width line style and color one pixel solid and then let's say uh black is zero right yes so the css uh styling here uh is pretty nice uh because it just helped me do that and gave me the syntax and then it also uh will will show you colors there too so let's save and let's see if that even worked i like that the color showing there oh that was nice all right hey it did work this is what i wanted here i wanted a line is exactly what you wanted all right handy dandy we are really trucking along here all right so that was uh task number one uh so i have i have more things that i want to do one of the things that i want to do is i uh so we have this button here uh where if you keep doing it so well brad they're not gonna believe that you didn't practice this i really did not i'm i'm sure we will uh we're gonna get into something that's a little more complicated a little bit so we've got this report issue where if i click on it it's going to take me to a record producer and this is nice but i think i want a submit app button uh then i'm gonna put let's i'll probably put it like over here somewhere and uh i think i want that to pop open a catalog item in a modal uh which i just decided i want to do so let's see if we can make that happen that's how i would do it so i love it let's do that all right so i think i may want to do something with this container which is nope uh it's this one and can i make that can i break that into oh i can only do that uh let's do this then so i'm going to make this be a row instead of a column and that did not work because let's change it back to a column so what i what i actually want to do is i want to i want another container here and then i want to move that stylized text into the container so let's okay let's add a container and then i want to take this and i'm going to pull it into that container there we go and now this is so you can add the button to the right of it you know yes all right now i can change it to work like a row and not mess up everything else um so i can you know i can do all sorts of uh all sorts of things with this uh the css styling but i think this is how i'm going to want to do this so let's add a component after and i want to add a button and then let's give us some room here oh we got a little a little wonky there uh and i want my button to say submit app um let's give it what's a good submit icon where'd you go i don't know no i can't let's just leave the button i am going to make it a primary uh what happens if we make it large whoa let's do that for now so i've got this giant submit app button and we are going to want it to pop open a modal but i have to create the modal first okay so let's go back here and i'm going to go add modal and then i think what i want is a modal viewport i have not ever created a modal viewport so let's uh let's see if this is the right thing to do strap in here we go um i think this is the one viewport contents uh route fields uh yes so the route is going to be oh here so i'm going to want this button to work a lot like this report issue button except open in a viewport so i'm already passing a route and a field from this one so let's uh let's go see uh where i am doing that and maybe we can just copy something because that's always i think i love looking at what that pass me did or even better developer did and and learning from that and and to that end uh if you're trying to get going in ui builder um and you've already done things like uh brad and lisa's two labs from knowledge um the next tier step that you can do after that to get examples and look through things is fire up app engine studio if you're in quebec and using ui builder and uh generate an app from one of the templates and take a look at how those were built and done and what they're doing and you can get insights from working examples i love a good working example absolutely uh so this uh this chrome menu actions is where i configured this report issue button and uh we have that it is on uh video during the hackathon i think it took us about 20 minutes to figure out where to do this to change the name and where that button goes um but we did figure it out and i actually remembered some of it so i'm just going to copy all of this so that we can use it again here in ui builder so these json fields like this it looks like you can type in them but if you mouse over you get an edit button and it actually gives you this this thing here so let's copy that in and the route is going to be catalog and fields is this society and nice get rid of this and then ooh can i do uh kind of let's just leave it it'll it'll yell at me if it's invalid and it did where are we well it's just you need a second closing yes all right okay so i think that worked let's save it uh use event binding to pass content in uh okay so now we need to pop this modal open with that button okay uh which i can do by adding an event handler to the button clicked event and i think i have a modal opened event and then modal instance id well looking for here so that's modal opened don't you want to open a modal where's that oh open or close modal dialog that's what i want there you go choose a modal dialogue is this not what i want um click the toggle next to open modal dialog what's that do no um oh you're right you know if you toggle it the other way it actually closes the modal dialog maybe i need to uh maybe i need to save and refresh and then lise lisa i just said uh did you say but i think she said that okay before it got to her video i think i had saved um but let's see so we've got our event uh open or close modal dialogue and it's still not there okay um and what's the uh the we've got some um choices when you are mousing over that open modal dialogue area toggle there's the pickers for uh down one this one yeah what's this yeah so this is uh why don't we get the uh i could bind this true or false to something else on the but that's not like that's not what we're looking for okay now i understand sorry uh did we try turning it turning it off and on again we did not try that um yeah i don't know if i need to i've done a modal before and there's a youtube video to prove it medium disable dismiss is there not a is there a name on this thing at all my modal viewpoint one yeah it's got an id i don't think so let's let's add another modal uh that is very is the simplest one we can and see if we can launch this one that that seems reasonable this this works it's more like a question mark for me but no we have to have confidence i like it all right so so i can launch that one okay it looks something in that one is not let's test it and make sure so that launches this works okay so uh let's take a look at those two modals in ui builder and see what's different between them and see how to make them happy they are different types of modals okay so i i wonder if the viewport modals don't they can't be launched that way or something yeah maybe a few more comments content let's see helpful uh where's the uh [Music] what's the documentation icon what's that visibility one do uh this one at the top near the edit button what's the visibility oh i think uh i can uh i can make it uh okay like dynamic whether it shows or not hiding for some users or not okay um troublesome some we we've got uh looks like maria gabriella is is looking yeah because she had the same issues so we'll give her a second to look at that um is there something hopefully she can actually help and what else can we look at is do we need something so i know you just put in the catalog and fields part and those were stubbed in already can we can we open a new modal viewport and just take a look at the empty one before we edit it and and see if they we potentially missed something absolutely i don't think we did that looks that looks exactly like what we have okay [Music] it was worth a shot but it it looks exactly like what we have so she said she had to name it before it showed up uh i don't know let's try renaming it uh so this is well this is just the label is it gonna change the name it's uh app submission does our modal have anything inside of it by chance um you use event binding to pass the content in i wonder if uh i'm i maybe the viewport um i don't know maybe i have to do something different to make that page work like a viewport uh i am not sure are there any other do we know of any that our ship that work like that that we could flip to i don't know off the top of my head [Music] come on chad i am yeah i'm not doing uh we're just kind of hard coding this i think ideally you'd probably want the society to be dynamic so that you can you know use the same modal for any catalog item that you wanted to show but i we're not even trying to do that um so we can't see that one uh did it give us any sort of error so let's look at one more thing and then we'll uh then we'll move on to something else okay i'll remind anyone watching this is unscripted this because this is how development works uh in the real world and even uh you know experts at servicenow run into issues all day long every day because that's the life of a developer is it's either uh super easy or it's impossible this is this is the life is until you know exactly what to do for a given thing it's impossible uh and then it's super easy yeah we had some people so we actually did not rename that viewport or that modal we just changed the label the name is not editable once it gets initially created it looks like so yeah i'm not sure what we would do um are there any other uh scroll down to the other handlers or or just type modal in the search and just see what's what's in there yeah it's just okay it is just those three yeah so we could uh we could create a custom modal and just call the catalog component from inside of it okay um so that's it is an option that's the thing um yeah so so just to just to rehash the the name the id of it is not editable we can only change the label um all right the events on the modal uh is uh basically you can fire things once uh once the content is loaded right yeah i mean sure let's uh well that's handy-dandy all right we're gonna come back to this uh i will uh we'll post something on how to do it or maybe we'll do a ui builder bytes video on it since it seems to be more complex than i thought it would be okay sounds great so there is uh failure number one take a drink brad i have a partake more than you have you've been carrying a lot of the talking [Laughter] uh so something else that i want to do is uh during the hackathon uh it's nice to like remember what your instance and teammates and all that stuff is or be able to log in and see that uh so we want to show some info about our teams and instances in the sidebar at the top on the right here so that's great so we have to first grab that data so if we want to go look at the data model for my for my event i have a teams related list and if we look at one of the team names we've got some team members and is there an instance field somewhere uh the their team should have an instance right it should have an instance but maybe we did we decided to m2m that doesn't seem like that would no that's not yeah that doesn't sound right i'm adding an instance except we're not going to do it on all caps uh dev ends it looks like we just haven't added that yet all right chuck says he didn't add it yet oh let's blame chuck he's not on he blamed himself i love it it's great i think i put this in the wrong spot and we'll see oh i i don't love that but that's where it is now all right so in the hackathon uh teams have an instance that we give them and uh that's the thing that we want to see on this form as well as who our our team members are absolutely i'd love to be able to see that all in one yeah so i want to see my instance name and then my team members or maybe my instance name and uh well we'll start with the instance name which is just going to be so i need uh i need data from this record and then i need data from these records this is going to be one of those things where we're going to make multiple data resource calls where we could write our own like graphql data resource and get it all at once and maybe we'll come back and do that afterwards but right now i have some info about my participant record so the participant record is this guy so this is me um so i know what this record is and then i can use that to get this team record by looking at this related list i guess of this m2m event participant oh do i already have team in there can we get team yes all right so i have the team all right so let's add another data resource that grabs team data because i can't get related data from here right yeah okay so i want new data resource we're going to call it lookup record we're going to scroll down and hit add i'm going to rename this to look up team so this is going to be the team table and then the record is going to be from the participant record i think dot that sounds right dot value that looks right so let's see if we get anything back we definitely want instance i think i want the name of my team team name sounds reasonable so we're not getting anything in here do i need to let's save that's one of the things we like about that area is it really shows us when we're doing the right thing uh so how did we do the last one so i looked up the participant record and then i looked up the event record based on we do that based on the participant record state event id uh well let's make sure did we get a team name team team it does have a value here it does have a value and a team name even do we think there's some like race conditions uh no results found what just happened yeah that's the right oh no there we go all right so let's save huh so we're doing it all immediate i'm not calling a data resource from another data resource which is i think what i thought i was going to have to do when i first did this um when do we write the event id to the do we have all right so one of the things we do is we take a value from one data resource and then we write it to a client state parameter and then use it in another data resource so maybe we need to do that with this okay maybe the data resources don't like um sharing yeah without you explicitly telling them to so let's try that here data lookup participant results one hmm getting stuck over the side yeah i like getting stuff on the side all right team id has a value so i think we may have solved this so we actually want so now we want team id and this is a state instead of a data or is it this is uh [Music] because i'm in the wrong state there we go there we go oh it's uh it's a context dot state state there we go state dot look at that i think i i had the pencil icon selected so it wasn't let me do it and there we go we have a team name and we have an instance display name which i think is good enough just to put something there okay so let's save so we have we have about 10 minutes of development time left so let's race against the clock here so my sidebar i'm going to add a container and then in that container let's add a stylized text component we do make the world of work work better for people with modern digital workflows but we're going to change what that says [Laughter] we do but also goodbye text we're going to change that to [Music] team information or team information uh yeah because i think that fits so i don't quite want it to be that big let's make it an h3 and then let's add another one and i don't know for now we're we'll just say uh no i'm going to want to put it in the container everything goes in containers everything goes in a container [Laughter] it's containers all the way down so there we'll add the component that was hard to click on at the bottom of the screen yeah and again uh you know brad's got a slightly con compressed uh screen going on because we want to make it look good for you viewing this uh but when you're developing uh obviously you won't be quite zoomed in the way we are uh in this setup and then we're gonna make this uh be a row instead of a column uh and then we're gonna add one more component and we'll get the instance name in here yes chase i do work for the container store i get a cut every time i say container and when i say containers all the way down i get three eggs uh team result dot instance oh i have to hit enter and then hit dot display value all right we're working in andrew's instance it looks like and let's see what we got there team information we have an instance name um oh actually let's uh come on brad i need that to be a link that needs to be a link um let's let's make that a link i like it um let's go here so let's use a script instead we're writing some code all right uh so uh instance name is we just got phil right when we're starting to write some code there's one of our hackathon finalists who solo did his hackathon and stream live streamed his whole building of his app uh two two of our teams that won uh prizes live streamed all of their buildings so 15 plus hours of of streaming it was really impressive all right so data lookup team [Music] i think that's what we need and then chuck says linking is out of scope i'll have to wait to the next release but i want my link now link it now so that's gonna be uh style we should make that a rich text and then well i guess for now we'll just write out the whole name and we'll go yeah i'm fine if it's the whole name without uh you gonna throw a https in there or no um well it's not going to be linkable at this point okay but we did get a hole you know what we have five minutes let's uh let's do this so i want to make that a clickable link so we i think we need we can't do html in a stylized text so okay rich text rich text so i'm gonna add it let's make it rich none of this poor text uh nope we want to go i've legit never made that joke in my life before it's not a good one but i've never made it before so let's go uh brad breaking out the html i like it and then i think this will work nope if i was really feeling good i would do this in es6 but i i can't quite remember the [Laughter] all right does that look like it's gonna work that actually does look like it'll work all right so let's apply it does look clickable uh and i think we need to do one more thing to make it show up right is whiz floyd also says hmm can't wait for es6 and literals uh oh we didn't take that other one away but if i click on this do we get andrew's employee instance oh we do looks like we do all right and kill that other uh component where we're coming here it's shippable say delete and uh i want to do one more thing because it's going to bother me if i don't do it and i'm gonna add a little bit of spacing there chuck i should have added a target blank you are correct yep jace has the the es6 all right so we'll get this modal figured out uh and uh i'm pretty sure that'll be next week's ui builder bytes um will be me figuring out how that modal is supposed to work with the viewport uh and uh yeah is there anything else we want to try to do in the next two minutes um can can you get my team members in in three minutes i don't think i can do that in three minutes oh okay can you get the team name in three minutes oh yeah we can do the team name we already have that that's a good one all right stylized text um i think we are going to have to do something similar because i wanted to say team such and such so let's make this the chat's got faith in you brad thanks chad uh did i copy the whole thing i think this is name [Music] so we'll say uh gly that worked nice there we go winning her team is the name of the team name so well chuck had created a winning team and so i felt like i needed to winning your team yeah [Laughter] awesome well that that was a lot of fun brad um i think we're let's see is there anything else that i want to look at before you close your screen share before i close out yeah so uh ui builder is so much fun you've got to play with it more than i have over the past uh few months i'm excited to to dive in and i know you have uh some really great content uh and we'll talk about that when we start the screen share um but let's see one other th hmm i've i've got a bone to pick with your primary button submit app you might i thought why'd you make that a primary button because i want to call it out i want it to be really important um but i i honestly i think when we actually roll this out the submit app button is is probably not going to be live until towards the end we'll probably have a time where then it becomes live and you can submit your app because it does create some confusion when people can actually submit an app two weeks before the hackathon starts so uh the thing i will suggest is folks go to developer.servicenow.com and take a look at the component playground area for especially components like the button and and take a look at uh when to use uh the components and how to use them so i know we've got some details on using uh primary uh oh is that is that link right there going to take me right where i want to go yeah so if you click on the icon on any of these components it'll pop open this thing and then you hit learn more and it will take you to that component's documentation on the developer portal and it'll tell you things like like i love this usage tab because it does tell you a lot about like hey this is how you should use this and hey you probably should not do such and such let's see if we have anything on the button yeah so here's a don't uh avoid mixing button styles in the same group and use consistent button types you know same thing with don't use multiple primary buttons for repeated actions which i think is where andrew was going uh with that primary button well i'd just like to i like to to call it out that you should be intentional and you should look at this usage guidance and if you need to deviate do so knowingly and with good reason uh and with that brad i think we're good to stop the screen share all right and i will say one more thing when i created this button it actually has a default of secondary which should tell you something that if you have to change a thing you know there's a reason something is the default um so i yeah all right well i will stop sharing here fantastic so thank you so much for that brad that was a lot of fun um i i learned a couple of things and i continue to learn things from you watching you uh build things in ui builder and uh but where can where can the where can the people find more things about ui builder um not necessarily from brad but but also stuff from brad good question uh so there are a couple of ui builder specific knowledge labs which are ccl 1047 which is building a killer workspace with ui builder lisa holdstein wrote that one it's great and then i wrote one called building a killer portal experience with ui builder which is ccl 1088 those are good good labs just to go through and it gives you an instance if you haven't done any knowledge labs yet so that is a great resource we also have a series on the developer blog called ui builder bytes and so if you go down to the the categories section uh but they're not tags the tag section you can find that one and then there are some other good resources out in the community people have been writing about ui builder and now experience and we have like a ui builder resources blog post that links out to a whole lot of the community resources so there's there is uh more and more available uh if you want to learn about ui builder in our last few seconds brad um i want to thank everyone but we have to rate our beers uh before the the the time ends because we're we're we got to be on time today how was your beverage today out of a rating of five dragons milk was uh 4.5 noice and mine uh my poo holla uh was a four 4-2-5 so it it was fantastic to have everyone here today um thank you for joining us and with that the knowledge stream is gone uh so you youtubers get to see a little bit more uh thank you for staying along with us uh we really appreciate everyone who drops by the stream especially those of you that participate in the chat uh thank you so much for that it really does make these a lot more interactive and a lot more fun for us and yes we'd still do this if it was less fun for us but we like it to be fun for us too we like it to be fun for you so please continue uh you know hit that subscribe button it really is actually useful for you i think uh so uh thank thanks for joining us uh thank you brad for this uh lovely session you did for knowledge um i really appreciate it and uh with that we'll say have a great day everyone all right yeah thanks everybody bye-bye you