[Music] oh [Laughter] got him that was a deer in the watching a replay on the other screen was just as fun it's been so long since I got to do that hello and welcome to the insanity we call live coding happy hour this is where we get around and show you some stuff on the platform I like to call this the end synthesis of a well polished demo as you can see right from the onset it is unscripted we are going into this with a little bit of knowledge and a goal and we'll see where we can go from there let's start with introductions starting with that man hi everyone I am Earl duk I am a senior developer Advocate I press buttons Brad uh Hey everybody uh my name is Brad Tilton I am on the outbound product management team for our next experienced products including UI Builder which is what we're going to talk about today and hello everybody my name is Maria Gabriella oo prector a lot of you may know me as mgw and I am on Brad's team and my name is Chuck tamasi I'm on Earl's team same title how about that okay it's live coding happy hour so we have to cover what our happy hour includes Earl same order what are you drinking so you know me I usually am drinking something hard or some random an actual drink this time I have to drink just a regular ginger ale right after the stream I am making the 8 hour drive to Southern California so I can't drink right now but I'll drink a ginger ale for now ouch feels like poor planning um I've been doing a lot of live streaming but not a lot of drinking while I live stream until today so uh I broke out this uh hazy IPA from Big Country it's very tall so we'll see how much of it I get get through what's the ABV on it uh I think like seven it's not terrible that's not bad okay traditional and life coding happy hour I break the mold by bringing in wine but I want to do something cool this time so I asked my husband to find me something awesome but he thought that yesterday was live coding happy hour so he rushed in the room halfway through a meeting trying to throw me a beer going instant time so I have a liy summer Yeah Yeah from Chipawa Falls that that's big stuff when I lived in Wisconsin any more lore you got for us Chuck about so my buddy and I as we were now living Phoenix we used to live about three blocks away from each other in Wisconsin and we got on this Southwest plane and I gave him a drink voucher and he says I'll have a linies and the flight attendant had no idea she thought it was a dirty word or something no the line in cougle sumers Shandy I have lots of useless facts in my head I am drinking water I'm not driving but I just need to stay sober tonight our guests are disappointed they showed up they're doing the work they deserve a drink so let's get started what are we working on today that's right who's driving oh it's me that's my screen why is it I started that impressive or did it there we go yeah this is my eighth live stream of the week I'm getting used to all the buttons yikes I think that's our record Brad I don't think anybody's done that before done what sorry eight live streams in a week oh I've only done this is my third so Earl's Earl's done all that twitch stuff right yep going nuts three on this channel five on the twitch Channel even when I was doing community live stream like every day wasn't this bad all right this is one of the last week this is the second to last week that we have content for the Washington DC calendar so we're going out with the bang it's right up there in the corner we're about to get in Q2 store release y'all ready for that going out a super bearded week all right sorry I'm pouring my beer I thought you said it was a super weird week that too either way You' been watching the twitch stream it's been getting kind of weird we had fun today okay I think we had a lot of fun today oh my goodness I'm still let me tell you what we're doing uh so I am writing a Creator con lab uh for my 10th Creator conon um I think I I have written a lab every year but one uh is what I realized in most years multiple Labs uh but this year uh we're going to do a lab it's from building a killer single page experience I think is what we we've called it um but this is going to be like a notetaking app uh and so what I wanted to do was do something that was not a workspace or a portal um so this is an app that you could put in uh your instance that lots of people could use uh and you know I think there's lots of opportunities for this um so what I what I did was I took one of the apps that we out of the box and I think it might have been so this looks like plug-in manager I don't think it was or app manager I don't think it was app manager that I copied U for various reasons but uh I was like you know it's probably not too hard to create an app that looks a lot like all of the different experiences we're shipping out of the box so that was the goal um so I have this uh thing that kind of works not sh all of my notes for some reason oh it's because I still have this in there um so anyway I've got this Notes app that on the back end it's just a fairly simple table uh and um what we're going to do is create a front end for this table and and make it something that uh somebody might actually want to use for note taking and if you want to uh Earl's gonna help me posting stuff in the chat if you want to see the start and beginning of this application check out the academy that Earl's going to link in the next experience Academy where we started this by copying like he said the template of the page from another page and then we've also done on the same channel on you and I Builder live we've been building this app over the past couple weeks and uh we worked on it some yesterday and now this is part two that's right and there's some links in the chat around uib being difficult and I do want to talk about that a little bit because I think the Washington version of uib is way different than the Quebec version that I learned on and easier to use and then also uib is also like it's just a page configuration Tool uh and so uh workspaces are a lot of the pages that you'll be working with but workspaces have a lot of their own um you know metadata and everything like actions and you know lists and things that are not really uib they're they're really part of workspaces um so if you're just looking to build like a custom UI experience I think uib is definitely worth taking a look at for something like this uh it's something you have to use to customize workspace Pages U but I think it is a good choice uh for you know building out custom apps like this um so just for more background uh the labs that I've done at at Creator con have always been some sort of UI are mostly been some sort of UI based thing my very first lab was before service portal came out there was a lot of Buzz that service portal was going to use angular so I was like I should use angular I was building a lot of CMS portals on Jelly at that point if anybody remembers those days uh and I was like I should learn angular and so I I built out like a to-do app on angular on UI Pages uh and so from there kind of built out lots of different service portal and angular and now UI Builder based things and I can say that UI Builder is is my most enjoyable uh front in building experience out of all of the different experiences I've used uh in service down so not not true for everybody but I do like it and if I can add to what Brad just said just my two pennies on top of the stack um I used to be a senior portal developer working at Partners before I joined service now January of 2023 I literally was so scared of UI Builder because it it was coming after my baby portals and I had never touched it before until this job so I came up with a great idea of how can I learn while helping others learn and we started the show you and I Builder live on the same channel on Thursdays at 4M where we go through and we try to do something in you I Builder and it's literally me asking Brad a whole bunch of questions until like eight months in when I finally start driving so if you're interested in learning and getting started with UI Builder and you want a fun casual experience like this show you should totally check out you and I Builder live we base it off of live coding happy hour but we just don't get to drink because it's a Thursday and it'll take you eight months to get comfortable with it and there's already 21 episodes yes we do every we do it two times a month on the second and fourth Thursday of each month at 4 pm Eastern and you should come over even next time it's we answer a bunch of questions it's very open very fun we succeed about 80% of the time so you really get to see how it really is just like this show yeah and that's my soap box thank you at some point we're gonna add descriptions to the episodes too so that'll be nice wow Brad yesterday you called me out on not reading documentation and today you call me out on not doing the descriptions yet I didn't say anyone's name I just said we are going to add descriptions one day I think I heard that the spreadsheet with all of the descriptions have already been made for you too I think someone just needs to um approve them I think that's where sorry I'm going under a tunnel I think Brad should start doing the dev stuff now I vaguely remember that anyway she went [Laughter] whoops we are going to do some development at some point uh so here's the app it's note taking so I've got a list of notes here that are pre-populated I can click on one it's going to create me a modist dialogue window I'm zoomed in too far oh that's something to note about modeless dialogue windows I guess we'll fix that in a minute uh but uh we've got our our notes Here I can save notes uh and then I can do other things we're going to have to refresh to get that off the screen uh and so I could create a new note if I do this it's going to let me create a new note here and I can add stuff here uh newest note because then we'll save it and it closes the modal we have our newest note here anyway this is a little note taking app um I wanted to kind of show some of the new features so what we're going to do is um we are going to add some extra filtering here uh so uh I'm I'm doing some filtering like I can search notes hold on I have to fix the thing it's I I did some category filtering here and I forgot to take it off before the show if you're wondering how I build Labs it's a lot of Randomness until I get serious about it all right so now we should see a lot of notes there we go and my pagination only kind of works um but it sort of works there um but I have a search here so I could say 20 and it would show us a note so it is a sort of working app at this point um but what I want to do is so we've got searching we have some sorting uh but I want to add some really Advanced filtering to this uh just in case you want to do some crazy filtering uh and it'll be really useful uh if you want to know how to use like our condition Builder component and things like that um so what we'll do is we will look at uh how this works and then look at how we can add a filter um so basically we we we do have a lot going on at this point um but for the most part we've got this lookup notes data resource uh and I one of the things I really like about the Washington release is how flexible the new modelist dialogues are um so again we've changed how this looks down in the corner here uh and this pops up in a modelist dialogue and sometimes I want this to take up the whole screen uh and so if we look at the conditions what I'm doing is uh I'm saying you know the logged in user we're only to pull their notes and then title contains the search term so whenever I search and then what we're also doing is I'm setting an A Sort field so I showed a [Music] [Music] now I can't handle it anymore makes me makes me sad all right um so this is uh the notes we've got a repeater there so what I'm going to do is I'm going to add let's so task one is we want to add a condition Builder and show and height it uh uh so we want to add a condition Builder and show and hide it and then task two is going to be I want to take that condition from the condition Builder and apply it to my data resource so that it works against all my notes so let's do task one first because I called it task one and we'll add a container in here um so generally when I'm adding containers and um components I'm usually doing that uh in the content tree here uh because it just allows me to be more precise uh I don't always know where I'm clicking when I move my mouse around in here um but yeah so let's add I think it's is it called condition Builder let's see oh it is look at me um so we get a full condition Builder here and so this is not a connected component oh it actually is sort of connected uh it is kind of a connected component but what it does is is you give a table name and then it knows what fields to expose and how to work with that table and but its outputs are just firing events and telling you okay this is the encoded query that somebody said and so we want to take that encoded query and then apply it to the data resource that builds out our list of notes here um so the first thing we need to do though is we just want to show and hide this condition Builder and so let's just leave it the way it is and we need a new client State parameter that we're going to call um let's say Builder visible uh let's just use the whole word why not uh so condition Builder visible who that we're going to do a Boolean Boolean booing and we'll say false is the default value all right so that's there and then now we're going to go into the condition Builder itself and then set its visibility um and I'm actually going to set the visibility on the container that holds it instead of the Builder itself because I think this will work out better for us uh and so and this is just I can set it true or false uh statically but I can also use uh Dynamic data binding and hit the little icon and so now I can use my client State parameter I can use data my dogs are barking it's great I don't see that option on the screen I'll add this up here if dogs barking condition Builder visible so we added that uh so this is the new Dynamic data binding that we got in the washingt release yeah so we can see that that's there this is so much better than the way it used to be but the cool thing is you can see the value that it's passing as well so it's passing false and I'm just now realizing uh that component visibility Works uh opposite so it's hiding or not hiding so this should really be we should let's do the other way condition Builder hidden you going to rename it I think we can rename it and I think it'll still work how Dynamic is it let's see let's go hidden I like that it didn't work the first time we learned more that way oh except we gota we have to be consistent there condition Builder hidden and no it didn't it didn't like it so that's fine let's change it out there we go shut out to uh the several of us in the chat encouraging each other for looking for careers and taking the CSA and all the different things cool the reason why a couple of us are quiet um on the stream right now is because it's a very Lively chat actually right now so that's awesome CSA is great take it we're having fun distracting people from the educational content just sending out hugs and uh loving each other on chat I'm riveted keep going Brad it's all right I've worked with Gabby for a while now I I get it I can't even deny it he's not wrong all right yesterday um I was chatting with the chatan on our show and I go hey for those of us who were totally paying attention what was the thing you just said asking for a friend it's it's good people people get lost it's fine something about funnels Fel right um paintbrush so uh yeah so we hid that let's so let's just save where we're at and and look at the page uh so you you absolutely can use the preview to look at things like this uh and so the preview actually gives you the page you're looking at in uib even without saving it it's going to show you what you have created there so we know that we've added the condition Builder component and it's not here so that's uh that's good because we hit it so now uh how do we want to show the condition we need a little funnel icon or something we could use a little funnel icon because we have a new feature with icons or something don't we we do have a new icon feature do I want to use let's use I think yeah we'll use an icon button I think we can make that work so let's put it here and we'll add it after this button three I would love to have a funnel with an X through it that's all right so let's go icon your own icons now too button iconic we can load our own icons I'm gonna use find out we're not gonna draw a funnel with a line uh so yeah the new feature is this interface is a little different we used to only show like five in a list and now we show more than five what is that stimes 49 yeah so uh and then you can add your own so uh all good so let's look at a funnel pgs svgs what are those you know outline I don't know I'm sure they're svgs uh but I think when you add you can add lots of different things animated gies because ear animation of course always um so we will use this button and we'll just toggle we'll just use the button to toggle it uh the button doesn't need to change so we're going to add an event handler to the button and all it is going to do is toggle that condition and so the way we're going to do that is we're going to do it dynamically um and I think no we're just going to do it like this I'm not typing there we go I think this will work but let's see that didn't work but let's see if this will just let us do the opposite of oh yeah there not that is a is that a formula is there really a knot oh there's not a knot nice there is a knot there's a knot okay yeah there we go my bow tie doesn't even have a knot I like that I tried to hack it I did I did get the joke though uh all right so what's what is this episode it's a lot of Tom Foolery that's the new one hadd move a little closer for that one if you could tie the bow tie doing that I think that may be a future challenge there we go everybody take a drink when we distract Brad that was great laughing too hard I can't do it without looking all right so when we hit this button we should get the condition Builder to show up hey it did show up nice y did and now it's there all right I hate this white part uh I missed it I'm G have to go back and rewatch all right the spacing is bad we need to fix that um we'll do it kind of a dirty way with the margin here so create note is your act okay and the that's for displaying it gotcha yeah so this just displays the icon our filter here yep all right professional number one completed ultimately I would like the label to change sure I don't know I don't know that there's a good icon somebody make us a filter with the l what does it do in the in the you know platform UI I don't think it changes or is itrow I think it's a down arrow in the platform if only we had a graphics person on our team what Jillian just said in the chat though really is what resonates with me about UI Builder like can you imagine trying to make such a clean looking pretty interface in a service portal that quickly like yeah it's possible or even worse in you know some full stack thing where this would be really hard and painful I best I can do is uh 48 billable hours and three mental breakdowns Chief right that was always my favorite it would take quite a while to do what we just did so and this is like you will get to this point in this lab within two hours in the lab um so this is all doable it's fairly straightforward um you know there are parts of uib and workspaces that are not that straightforward but something like this works pretty well all right so that was task one we got it to show up and hide uh and so gonna do you said when you when you it fires an event with the encoded query where does where does it fire the event or are you g to put in like a run button or execute or we're getting there okay it's one piece at a time yeah so so I I guess thinking about that uh uib is all event driven development so um we're not you know when you think about um maybe not service portal but like jQuery and things like that where you're really doing a lot of Dom manipul manipulation your your script is um like orchestrating everything that happens on the page so you're saying go into this thing and do this and then do this other thing and so with event driven development or reactive development uh as they call it uh what's happening is there's just lots of events firing all time and you're reacting to those events um and so that is what that's the kind of Paradigm that uib has built on just and trying to capture Gabby's mind being blown that's what we're doing here yeah is that why it's called react oh my God it's called react no it's not thing I've known for like a long time but we wanted to see your reaction nice um yeah so UI Builder so what we're going to do because we want to work with the condition Builder uh uib has this thing where you can say uh look I know that in real like in real life this is going to get hidden but when we want to work with it so we're going to say false for now even when I so when I look at the page it's not going to show up but now when we want to work with it it's there um so let's take a look at the condition Builder there's some stuff that I don't want in this condition Builder I don't think I need this action bar which is the thing at the top it also has a white background that's not like padded very well which kind of bugs me um and then we're doing sorting differently so we're not going to do sort by and then there's no related list here so let's hide the related list section oh cool um what's filter overview I don't know editor description oh I like it let's keep it super clean uh I I'm okay with dotw walking so let's save it and see how that looks in the runtime oh that looks pretty clean this looks like a normal service now experience uh which is one of the cool things about this you know we we mentioned it already but um you know this this really looks like something that we might actually ship out of the box and if if our designers heard me say that they would I'm I'm sure I've made about 10 different design uh you know bad design decisions already so like this probably doesn't pass I've got squared corners and rounded Corners anyway it thematically it looks okay you heard it here first Brad is shipping a product no I'm not um so yeah so what we want to do let's let's first uh make sure uh that what we do in the condition Builder we can get some sort of encoded query out of it so I have a client script called logging that I pretty much always have available to me oh but we're not going to use it right now all right we're we're going to use next experience Dev tools because they will also do this for us and we talked about them yesterday and so we should use the next experience Dev tools so let's see how this uh how this thing actually works so I'm going to fire up my Dev tools here it is a Chrome extension called Next experience Dev tools I'm sure someone can put the link in it's already description buddy nice uh let's go to the inspector we're going to go actions and I'm going to go to the very end and we'll give it 100 per page all right and so I am going to let's say I didn't give it a table name so first we're going to give it the right table which is notes this one all right so now we're going to do this some chat about the browser extension so the next experience Dev tools is an official service Now browser extension that we launched in August it's been updated a couple of times since then uh we did a whole show on it yesterday all the new stuff that that came out uh in the March time frame uh but if you're doing anything with workspaces or uib uh you absolutely should have this browser extension uh it has a lot of uh troubleshooting and and all sorts of things that are really helpful so what we're going to do is uh let's so if I click the label I should get some new actions that show up the actions uh so this is pretty chatty um so there's a lot going on here you can do some filtering um but we could probably find our button clicked event in here [Music] somewhere maybe maybe not all right so we're going to go ahead and say let's just say category is I think I have a personal right yeah personal all right so from there it should have generated a new something why don't you clear it uh I could clear it that is something I could do but I already did the thing so got it I like like Gabby said or I did it drink oh man I like that Maria Gabrielle said um why wouldn't you clear it and then Brad says I could it doesn't say I just want to do this the hard way all right so I think this is what we're looking so there's a couple of them here we had now condition Builder and coded query set and then encoded now condition Builder connected I think these are the same thing but the cool thing is I can see all of the stuff that's available to me from the event and its payload and so in the payload we can see that I have a value property that gives me the encoded query um so this is one of the best ways to know when you're working with a component you're not familiar with uh this is what's available to me when I work with that component I think I can also change this uh where's wolf when we need him I you have to click on the actual uh payload title like the right here yes see it turns into a that just collapsed it oh no let's see I'm double clicking so fast it's not working it's all right can you do it via your the regular Chrome extension uh Chrome developer tools uh those are dead to me I'm we're only using [Laughter] um what we did before was with the properties though so that that yeah not payload yeah so I guess it makes sense that I can't edit the payloads because it doesn't really matter that much all right so we can see that payload Dov value is going to get me uh the encoded query so it makes sense that I should be able to use that encoded query to then filter uh the list of results I get so this is where uh for my lab it's going to get complicated for me to figure out how this is going to work uh for the purposes of what we're doing here uh it won't get that complicated but right now uh we have um some more uh um I guess we're doing some more specific querying here where we're saying title contains user is uh but what we want to do is just take the output of that condition Builder and apply it uh whole hog I can't think of a better way to say that uh that's a southern thing uh to this conditions here um so I think we need a client State parameter to hold that um so when we talk about event- driven development uh we are holding lots of things in the pages state so if you've done reactive react development you know that all of their components and everything has State uh and the same thing with our page um so UI Builder page you can think about it as a big component we actually call it a macrop ponent uh and it has its own State and so the client State parameters are the State properties and this is how we kind of manage state so if you need a value from something uh that you're going to send to something else uh that is the place to hold that so we're going to call this uh note query so in a way it's sort of like a list of variables or yeah I mean it's it's not yeah it's not too different from like flow variables or workflow variables or um display what's the client variables what do we call the display business rule uh G scratch Pad scratchpad variables yes there we go okay um I I even said that word right before you ask the question and it reminds me um when I first became an administrator I uh was struggling with querying and a friend of mine taught me Andrew taught me that if you rightclick the breadcrumbs and get copy query you get a string that you can use in your Glide queries and I was like awesome and then for the next three years in interviews I proceeded to say that I had no idea what encoded queries were it's terms using them yeah and the whole time and and someone called me out on it on an interview when they sat me down to do the codee part of it and they're like that's an encoded query and I'm like oh so about that I do know about these turns out um so what we're GNA do is we're GNA take this this whole property on the data resource and we're just going to bind directly to it so in the end what I'm going to have to do is do a bunch of work probably with some sort of client script uh that builds out this uh this uh encoded query for me I have also noticed that double clicking and clicking on the little icon here doesn't always work to add the uh whatever you're doing up here sometimes you have to drag it uh so if that's not working for you try dragging it it's my like a known thing or a a bug uh is it is it a bug is it or is that just how it works who knows it sounds a error all right so I I think uh I think this should work let's see we're going to I'm doing a hard refresh so this was a command shift r that is uh the only way I refresh when working with uib uib does a ton of caching uh so it's always a good idea to do a hard refresh or clear your cach every now and then um but let's go ahead and let's see uh let's say let's do a kind of a crazier one so create it on today this is a thing that uh we're not populating the client State parameter I just realized but on today is a good um is a good thing to do uh this is you know date stuff is not easy to do from scratch so using the condition Builder and just applying it to your data is kind of nice um so it's a good thing to do but we do need to actually uh set our client State parameter so uh I think our component only has one event uh so if a component has more than one event you can click on add event mapping you'll get a bunch of different kinds of events if it only has one it's going to go ahead and add it here so query updated is the only event that this fires and so we are going to update a client State parameter we're going to update the Note query client State parameter and I'm going to switch into Data binding and come on I was gonna show a thing that isn't working with this component a uh so for most components uh they will you'll see a payload here and then you'll have access to everything in the components payload and I guess pulling back the curtain a little bit to service now development uh we have we're shipping like around 250 to 300 components and those components are owned by um I I would say 20 or 30 different development teams at service now and it is really up to the development team to expose the schema for their components events to uib and then let uib pick from it uh and so this team did not expose their schema so I'll I'll be looking that up afterwards but we can still use it uh you can always hardcode things in here so we're going to say that payload Dov value because we know uh that payload Dov value is what it's what it's giving us from when we looked at the extension hey Brad for the condition Builder can we set uh initial condition parameters like if you want it active to be true to be a default I'm almost positive yes so let's look at the props and so I think you can pass it in this encoded query I think this will preset your conditions um so thanks asking for a friend yeah we may we may end up using this for the lab but uh yeah so I think this will work now but let's see all right uh we'll go cat is personal oh it did work o my little personal nice drink done ship it ship it yes no testing that's all the Tes we needed that is personal done are you able on my computer can you alternate the tiles to be rounded corners and not rounded Corners I don't like I'm just kidding um no so this that that's actually a good question uh so for styling you can't do any Dynamic styling right now um so this is a good I would love to hear if you have like real world use cases where and and these absolutely exist um but if you have real world use cases of where you want to do Dynamic styling like this where you'd want data to drive the way that you're styling Works I'd love to hear like hard real world use case examples for that um so pay me on start now what you want me to start now or do you want me to message you after yeah let's do it after okay I got you but people in the chat please message I'll make sure he gets these I I I know there are lots of examples I'm just asking you if if I can come with 50 of them it's uh it's a good way to to go to the product teams I I could see the background or something being tweaked based on the data yeah I mean a big one is if you're building out your own list of things and you want to alternate like list background colors like gray and white or something like that that's pretty obvious um so that's that's kind of an accessibility thing I think SEMA and I had the same clients when I was a partner yes I did build a portal one time I've told the story before but I built a portal one time it was probably 12 years ago and uh their design guidelines said like the thing had to be 700 pixels wide and somebody was like hey this is only 699 pixels was why they measure like come on does that really matter it matters so much we fixed it we fixed it that was before I worked at service now with just testing you glad you caught it thanks yeah yeah that's right my favorite was when people would send figma designs to uh service portal Builders and it's just like there's no way we're going to recreate the exact same pixels that they have in figma my favorite is when my junior developers would copy the CSS straight out of figma and have hardcoded boxes in their portals and I'm like no stop every single widget or every single thing has its own hard-coded CSS values everywhere yeah so I'll I'll plug knowledge right now I think uh so we have a new there's like a new design thing happening at this knowledge I don't know if it's public so hopefully I didn't spill the beans on anything has Safe Harbor Safe Harbor one of the things doing uh is they're going to do some sort of session on taking a figma file and turning it into like a workspace or something so it's how to go from figma to uib and building a thing uh which I think is very practical and useful um because that's how you know as developers that's that's how we get things right it's like here's here's my design how how do I take this and actually make something usable out of it I think it's important to just quickly plug that UI Builders not react uh reactive yet asterisk Safe Harbor so we won't be able to recreate the figma designs completely before everybody's hopes gets up yeah it's not uh the new design system is not a Pixel Perfect Design at at this point yeah um this is what I wanted to accomplish today I have more work to do for my lab but but here I have a i while we're here I have a more conceptual thing for my lab so let's uh I have uh these so all of my notes have different categories so if we just reload the page right so these are all blank but they all have different categories I think I can I think this works if I go 100 per page yeah o right so we've got internal meetings personal customer meetings and then I have this category picker over here um and I think I I killed how this works but I'm trying to figure out how do I so each of these categories is a CIS ID how do I say um like if I wanted three categories how do I do that in a condition Builder does that make sense so if I were to I need some thing to where I can like bind data to it but I can't I can't like preset the condition builder for multiple categories I don't know if I you can't do is in uh is one of yeah is one of is not an option for me so let Let's uh take out the conditions is one of would show up for a choice list reference Fields I think you could do yeah in I mean the encod say in in could work um why do I oh is this a bug y'all I can't get back to the regular data [Music] binding so I clear that out and hit apply oh there we go that's not the greatest way to do that right so we got cat it's a reference field yeah right and I've got so basically I could Supply here I could Supply like an array a list of sis IDs but I I'm not sure how to do multiples right without can you build your own I I'm trying to do as little scripting as possible so ultimately I think I'm going to have to write a script that kind of builds multiple conditions here for each of the CIS IDs so that can be your challenge exercise it could be the challenge exercise I wanted it to work I wanted it to work earlier than that but yes I think I'm going to have to end up scripting this condition anyway if I want to use that condition Builder so we'll probably have to do that either way oh let's do this though I have one more thing question I want to completely derail the segment I do have a question if we can't do conditional styling how did you do the per category Colors oh what a good question I'm uh do you want to ignore and do the thing you wanted to do anyway I'm just doing this uh so how did I do that that's a good question so I did it because there's this highlighted value component and it has a color property so this isn't a style right so anything in the configure tab uh is a property on that component itself so if you're looking at like an icon component uh which icon it's showing is a property on the component it's not a style on the component so it has a color property and an icon property so what I have on my category table I actually have a color field that I'm populating the component with ah you're just saying it's intentionally built that way yeah so the component's intentional so I couldn't do this if I wanted this component to have like a border I couldn't do that dynamic because that's just the component styling but that's a really good question so on this one yeah we're going we're kind of dot walking all the way down to the display value of the color field and that's how that works and is the color field like a string field or is there a Color Picker field so there is a Color Picker field type yep but I'm pretty sure it didn't quite work with uib so I think I have a string field with absolutely zero validation on it and I'm just typing in things like red green um yeah so so hex or normal not even just uh yeah plain colors color names I want to try to break that what instance are you in uh it's the it's your instance it's the live oh please don't zbo boot this instance in the next six weeks that's we haven't talked about this but there's your change management just verbal on a live stream this is the how our team's change management works yeah speedrun uh make Brad cry any percent I this isn't backed up at all it should be uh I don't even remember what I was going to do now I'm so sorry no it's I this was a good conversation I think the color thing so I I would say uh if you are trying to do something that requires some sort of conditional styling uh you might look at the overall set of components that are available to you and there may be a component that has a property that lets you do some styling that's not actual Styles which is what the highlighted value component does um somebody remind me what I said I was going to to do uh it was you didn't actually say what you you didn't say it you just started clicking you got halfway there it was just in my head it's totally gone no I I actually remembered it for the first time ever uh what I want to do is I want to embed the encoded query I don't think I'm G to be able to do this very easily actually I just rethought it all right I oh look at the time I think we're done I'm dar drinks all right oh we're we got out of order whoa I'm drinking a ginger ale it's a it's a 3.5 I guess what is it about Ginger Ale that it tastes better on airplanes seriously it's like the best place to drink him my it tastes like bald eagle teers up there it's really good and you get it back here it's like not so much it tastes like you know mom and dad had a party when I was six Brad like sprite from McDonald to I have I don't know that this is bald eagle TI uh level but it was my IPA I can't remember what I used to rate things but we're gonna say 425 with the quarter quarter point success factor we had a success factor I'll gr you success some 425 in Old School life coing happy hour is actually a pretty good score yeah what's the rating system again zero to five on quarter points zero oh okay it's the five I almost said seven so I'm not a beard drinker but I drink this that's not if you like that you should try Rattlers too oh yeah even a little more fruity yeah I will message that to my husband thank you very much now run into his room and throw it at him great idea I wonder how that will work out for my marriage I was introduced to rers a few years ago in Germany at a Dev Meetup oh these are good they go down way too easy it's like fruit punch of beers how was your water my water is fine uh it's in a recycled gatorade bottle and every time I look at this there's a little guy on the side who's got his bottle upended like this but if you look closely it kind of looks like he's singing karaoke so that's that's why I like it's a sign it's Friday night I'm singing anytime Chuck looks at somebody like that that person could be singing Cherry K he's already pulling out the QR code to the incense that's right we are working on a karaoke plan for knowledge St you have it on the last night so I don't lose my voice before my presentations please last night is the party party like the concert Party Pitbull party there's no Pitbull karaoke alternate location get up here and sing with pitbull that feels like a thing you should be able to swing Chuck some pit karaoke could possibly go wrong hey you guys ready for Sweet Caroline let's go no Living on a Prayer we got to reenact K22 that was one of life's poorer choices I oh half of us were in the ha and the half of us were in yeah New York for that one alrighty thanks Brad that was great I learn both of you Brad Maria gab so Maria Gabrielle is really great about being in the chat answering questions so thank you for answering all the questions that come through so and then Brad class perfect execution of coding while ignoring all the shenanigans that are happening around you so in a in a apocalyptic disaster scenario I would want you being the person that codes the this thing that will save us all in which the internet is still running and where using service now yep only minor dog barking this time that's just a little bit yeah and no construction all right 10 out of 10 does that officially round out our Washington DC content Earl we have one more Creator um toolbox for Creator Studio Monday April 1 on Monday and that will be the last one it's not an April Fool's joke either for Creator Studio W mhm it this was actually supposed to be the last episode of the Season it was actually but Creator Studio got uh pushed to next week so that I guess will be the last episode of the Season uh but we still have other streams happening we still have uh other content that we're going to be posting um we put blogs up for every episode that we have of this uh these shows and stuff like that so you can make sure to watch the blog uh Dev link. SN blog uh there's like eight links in the description now for next experience stuff so check those things out tune in next week for that Creator toolbox episode on Monday and the twitch stream is still going to be going on throughout uh time into the foreseeable future so check that out too uh but yeah that's all do you do either either of you have any announcements you want to make so since you allowed me so gracefully every Wednesday um every third Wednesday of the month we have our next experience Academy where we go over higher level topics not so much development topics like these but General next experience UI Builder workspaces we just did past two episodes that are going to be posted on Monday and they're going to be about what's new in UI Builder and next experience for Washington so you should totally check those out um we also are doing a lot of Labs at knowledge so you should check those out as always Brad's killer build a killer blank experience uh labs are awesome I'm doing one on theming and I'm doing one on getting started in workspaces for knowledge and then one last plug for you and I Builder live if you like like this kind of vibe if you like having fun come enjoy watching us sweat as we work in UI Builder and teach you something that hopefully we also knew before the episode but not always not always works sometimes it works sometimes it doesn't learn right along with us also uh at knowledge not only will we have you and I Builder live live uh with your usual cast and crew was that got to get the title right it's live you and I Builder live oh live important I'm mixing up show live you and I Builder live and there will be live coding happy hour live both shows are happening on stage live so if you want to Banter troll the speakers while you're watching uh we would love to have you there at knowledge if you're attending join us in the crowd I gotta I'm coming up with ways to troll uh Maria Gabriel and Brad while they do the episode just like how I do in the normal show uh we're coming up with fun different ways for y'all to interact so wait did I misread that I thought it was live coding happy hour live I am scared or or rather haha I'm in danger I'm in danger we're out of time one last announcement uh Maria Gabriella and I are going to be in Denver on April 18th doing an in-person you and I Builder live at the Denver developer meet up so cool thank you guys for having us and letting us just plug Happ Easter everybody bye [Music] everybody [Music] w [Music] oh