foreign hello everybody Welcome to UNI Builder live where we don't have a logo yet and our tagline is missing so joining me here today is going to be my co-host Brad go ahead and introduce yourself hello my name is Brad Tilton and I am on the outbound product management team for all of our next experience products here at servicenow foreign a lot of you may know me as MGO PW and I am also on the outbound product management team for the next experience we're co-workers that's right we're on the same so Brad I'm so proud what are we doing here today yeah so so I guess this is the first episode of this new series that we're starting uh where we're gonna just live build things on UI Builder uh live coding happy hour style uh where we don't practice anything beforehand we just get in and build stuff with the UI Builder so our goal with this is just to kind of build more UI Builder content uh I really missed live streaming uh since my Dev program days and uh Gabby I know you miss it as well uh so that's what we're going to be doing uh and yeah today we're going to start uh probably a few episode long um use case uh it's a personal use case for me uh that uh that we'll get into I know do we just want to go ahead and get into it or yeah let's go ahead and get into it so like he said it's meant to be a fun little Adventure trying to build something in UI Builder the main difference though is everybody put your drinks away please this is a no drinking zone right now it is 4 P.M and earlier in the Left Coast exactly please have your work safe drinks available today I'm going to be drinking brisk um I normally like to drink brisk it's really good on the can bottle is the worst what are you drinking Brad I've got an HEB sparkling water crayon raspberry and I actually have a black cherry cued up because I basically just I drink so many Sparkling Waters every day I don't know if it's good for me or not delicious thank you so much okay intern next screen please wait not you and turn the other intern here let me switch things around so he uh there we go welcome everybody to you and I hungy so this is uh this is a little app I put together um the use case for this is uh I have uh we have a big family I have a lot of kids uh and we go through lots of groceries and uh I I never really know what we need more of without like looking through our pantry and and um and refrigerator and so I want to build a little app that lets my kids choose what we need more of on an iPad and basically add it to the shopping list so what we want to do is we want to build a front end that kind of lists all of their favorite things like ketchup and milk and cereal and stuff we run out of pretty quickly and then they'll hit a button and it adds to the shopping list and they know that it's on the shopping list so that's kind of our goal really useful okay yeah I hope it's useful I I hope they use it they probably won't but we'll see spent all this time making all these apps on uh UI Builder and servicenow and then nobody uses it that's right what would that be like nobody can identify with that I'm sure nope they're just gonna they're gonna go back to their spreadsheets [Laughter] so we have uh I I've created a little app already so we have a data model here uh we've got uh basically a list table um where the list is kind of our current shopping list it doesn't have a lot of data uh and then we have an item table which are all of the possible items we could be shopping for there's not a ton in there right now but there's a few things I think we could preview that and see what's on my list right now when it loads uh and then while we're waiting for that to load I also have a list item which is basically a many-to-many of the item in them and so this list table is basically all the things we could choose uh it has a favorites check box and so we're going to list all the favorites oh this one doesn't have any data in it that's all right okay chat time to populate data put in the chat the yummy things you want in your fridge I'm gonna do and then I have some crazy things on here like the aisles that they're on because it's very important that my uh my shopping list be ordered by uh the order that I'm gonna go in the grocery store so ketchup is a big one for us uh let's go cereal we got cherries we got Brad's beard let's go here we can do uh uh beard oil beard oil you know that's exactly what your kids need to order from the fridge they're always stealing the beard oil so that's a big deal strawberries I'm not gonna let my kids uh order a Yingling [Laughter] all right cherries that's wrong but that's all right cake that will always get pressed but let's let's stick it in here uh yogurt that'll work I put milk on here already I did I did ketchup ice cream that'll always get pressed as well what about Mayo it's your family a Mayo type family some of my I have enough kids to where everybody likes something and nobody likes all this the only hamburgers and maybe it's just hamburgers that everybody likes and eggs oh eggs that's one there we go we do do a lot of uh we do a lot of digiornos so let's go Pizza oh Paige had a good idea we can pass this app over to life live coding happy hour to build an automation from Alexa oh that is a good idea yeah I'm writing that one down and I'm gonna pretend that I thought of it next week so then we're gonna take some of these and we're not gonna make them favorites so some of the things they have to search for so let's do that let's put all the sweet stuffs that they have to search for and I think that's probably enough non-sweet I this is bugging me so we're gonna fix it all right so that's this list uh there's categories but we don't need to worry about that right now um minty Donuts is a good one minty Donuts that's a good one all right so for now I think this is enough for us to build something out of uh the other thing I want to do is create a list so let's just create a new list uh say we'll go to HEB that's a Texas is that an actual store HEB is the best grocery store ever it's it's a Texas thing though really yeah so is the plan for these lists to have one like each week or basically I'm not I'm not like a I'm not a good enough at uh shopping to where I can only go once during the week I usually go a few times or at least a couple of times and then we order We'll order instacarter ship or whatever um but I think we disagree Brad zoom in I can zoom in sorry sorry I disagree Earl it's not that we don't read the producer chats that it didn't make sense you wanted to assume just say to zoom blocked by the video she's right Earl that doesn't make sense it makes no sense better instructions please this is why you're an intern uh poor Earl all right Earl he's like the nicest after you I was just saying you were putting records on the screen but you're blocked by the video so we need you to either scroll down a little bit or resume oh it was behind my video got it got it well like something the producer should fix but anyways Brad please continue before we were so [Laughter] that's rough the producer is reflecting his uh his power there all right so we have I think we've established the data model here uh so we're we're gonna go ahead and open up UI Builder well we're opening up UI Builder on uni Builder live whoa whoa whoa so before we get into this uh what we're doing is we're building this uh as a portal experience so I created the portal experience already in UI Builder or in app engine Studio created the UI Builder portal experience uh partially so I could talk about portals uh because we have to talk about portals all the time because the big question is uh when is when am I going to be able to build service portals or edit service portals uh with UI Builder so the answer is probably not for a while um Safe Harbor applies uh and so you know there's a lot of questions on when do I use service portal when do I use UI Builder you may have noticed this tab that I have open um where there's this really incredible article that somebody wrote oh it was me uh and uh it basically Compares UI Builder and service portal and when to use each of them so UI Builder is really geared towards fulfiller experiences so workspaces things like that service portal is really geared towards requester experiences but there is kind of a middle ground there where you may have a portal or you may have some sort of custom experience that's not really a fulfiller experience it's not really a requester experience in this example kind of Falls in there so I have a very specific set of users which are my kids and I don't need a public-facing portal they don't have a lot of design standards so it doesn't have to be Pixel Perfect they don't have phones yet so it doesn't need to be responsive and we're not using any catalog so in this case and we don't need to test it because we we just do it all live in production um so all of these things that UI Builders not really great at doing right now responsive design Pixel Perfect Design catalog testing public Pages uh does not apply to this use case so I really get to use either either or so we're going to use UI builder for this example if you have to build some sort of portal that's uh that's a requester portal where you're using catalog where it needs to look exactly a certain way service portal is still your best bet for that with that out of the way let's open up this portal in UI Builder uh so if you've used UI builder in the past this probably looks a little different uh this is a Utah instance and we have changed some things about UI builder in Utah Brad I think our intern is asking us to zoom in all right not very clear he only typed it six times in the chat zoom zoom zoom zoom zoom zoom I like it I do I also have it open on my iPad but it was a big iPad so but uh all right so I zoomed in a little bit more I think we're at 125 now yeah that should be we can't go any farther UI Builder uh won't make sense all right so this is the new landing page for UI Builder uh once you get into an experience uh so before when you get into an experience it just takes you to whatever page is the home page but this is a new we're calling this experience View and it lists all of my pages that I have in the experience and then all of their variants so right now I only have one variant per page it also is going to tell me you know if I whichever page is the default page it's going to show me that there I can switch into settings and we're kind of stepping on what we're going to do in uh in live coding happy hour um next week but that's all right so I've got the settings here and then I can also switch experiences so these are all my experiences I can search experiences which is very nice um but uh yeah all right so let's uh let's create a new page I don't remember how to do that so there it is maybe the plus I was looking for a new button uh this is a new modal uh so I can create a new page or add a variant to a page from here uh which if you if you've worked a lot with variants uh it's kind of nice to be able to do that from this step it's going to give me some templates uh there is a new uh template which is the theming preview it's like it's sort of new um and then we have all the old templates down here uh I guess the error page is new as well but we're going to create a page from scratch ooh and we can search templates now that's also nice so let's call this this is the place I naming things the bridge view fridge oh that's right let's call it fridge View and then I don't think we want any parameters on this page this is going to be kind of the home page of the instance or of the experience yeah so for now we don't need any parameters so let's go ahead and start um the audiences we're just going to open it up to everyone and we will call this variant default what is uh all right so let's create it bridge view and there it is so let's go ahead what's the difference between all these settings duplicate very okay it just lets me do all that so let's click into it and you'll notice once we get into the page there are some more changes that Utah has so while it's loading one of the things that's different is the little URL thing is gone so we actually have uh we've got kind of a data Bill view here that you don't see right now because we don't have any parameters but all of the required and optional parameters show up and the little data pill I can also do a little bit better testing so I can you know if we had if we had that I forget what the fit button does but basically this lets you test a little better uh you know what what the experience is going to look like on different screen sizes from the preview pane here there we go so we have that uh what else has changed uh this thing is going to let you duplicate the variant and then that's where your menu is if you remember before there were some kind of odd places where the menus were so this is really kind of a quality of life Improvement in Utah where we're hoping things make a little more sense the open button is a little bigger uh we you can you can flip between the editor and the page settings [Music] um so and then you can change pages from up here and one of my favorite Parts about this is you can not only change pages but you can change into a specific variant so it saves you a click if you want to get into a variant um so there's still this little vertical three dots icon but the cool thing is we added some right clicking so everybody loves right clicking and uh it's not a super accessible feature and doesn't work on touch screens for the most part so it's something that we've kind of moved away from in large part but everybody likes right clicking apparently and so we added it back in for some use cases and this is one so we added the right clicking and then um there's a cool thing we'll we'll wait till the other to show the other cool thing on life cutting happy Arts I don't think we'll need it today but all right so what's our goal for today all right I think our goal for today is to um take all of the um all of those grocery items and put them on this page uh kind of in some sort of repeater list as buttons so I can click a button and it adds it to the list and then the button gets grayed out I think is probably the the right thing to do today awesome let's go we've got that's right 40-ish minutes all right I think we can do it so I did uh I did cheat a little bit where I have a data resource already uh that does all the hard stuff for me so let's go ahead and add that uh the other thing we did is once you open this panel uh it's a little more obvious uh you know where you're clicking and where things are uh so we'll go add data and then I think we may have fixed the issue where if you you don't have a lot of vertical screen real estate uh clicking the add button uh you get like this tiny little sliver of the pop-up and I think we have fixed that so that's another good thing uh oh we changed the name of this to you and I hungy uh uh where's my get grocery favorites that's what we want so one thing that we did not fix in this pop-up is there's a lot of scrolling that needs to happen so if you ever don't find if you think there should be a button somewhere in uib and you don't find it go ahead and scroll uh and so the add button is there so we're going to hit add and it works all right so this is a transform data recess recess resource uh I was I just saw Earl's comment about you and I hungy uh it's just weird to say but I do like the name so we get the list ID so this is the sis ID of that list record and then we're going to get all of the items uh that are favorites uh there's this ID their name and then we didn't add categories and then this added checks to see if they've already been added to the list or not so we have four things that we're getting back all right so the state of resource looks good so we've got a component uh let's add let's add a stylized text and just give it some sort of title and then let's go what are you hungry for [Laughter] let's add that and then we're going to add another container I think I always messed everything in containers uh it just makes it more flexible this is also new the add component below the ad component that's kind of nice oh you can add it on multiple levels nice yeah so before I would have had to come in and do like a ad component after oh that's that gave it away we added to component duplication uh to Utah it's probably the best feature we added um so this will duplicate a component or a container full of components and it grabs all of the properties and events with all of those components and duplicates everything so it's a pretty nice feature that we've got there all right so now we're going to add a repeater so we want to repeat a bunch of buttons so let's add a repeater and then I pretty much always enable styles for my repeater and what that does is it turns the repeater into a container which is pretty helpful because then you can use grid and things like that so let's start with like a two column grid here don't really matter here I thought I'd be helpful reading the chat uh getting you know interacting with Brad getting more explanations but he's such a pro that I'm just literally sitting here smiling jump in and yell at me I I no I got nothing to yell stuck every year like describing everything perfectly as you start like when you hit a new topic you elaborate like I got nothing I'm just gonna play some video games all right I'm gonna add a container in my grid uh actually oh yeah we're repeating already well we should repeat over something I missed that let's repeat over something so this is an important thing we're going to repeat over uh over the data resource so I switched to Dynamic data binding okay I thought the name of the component changed let's see if we fixed this thing uh uh here what was wrong with it before I don't want to say it if we didn't fix it oh we did okay so before if uh when that drop down came up and you just selected something if it needed the uh the add sign the at sign didn't actually show up so it didn't work so this is nice is there a situation where you don't want the repeater to have styles enabled Andrew would ask that question I think I think we there's probably a situation where the way that you're styling your page uh you don't want containers around each of the objects so I I can't think of a specific but I think that's probably a I I think that's probably a scenario where if you had some really specific styling uh you you know that the container inside of each repeater or inside of the repeater could throw things off I I pretty much always use the container though uh all right I think this is what we want there we go we have 10 items um another thing to call out with a repeater uh is the um in the content tree it'll tell you how many items you have but in the preview pane it's only going to show you the first one and so that's just a performance thing if you've got a hundred things in your repeater uh it's going to uh you know it's going to kind of mess with your page if you've got all of them displayed yeah so let's do that and then let's add a button and then this is going to be real ugly and and Gabby I think that's where you you come in and help out with making things look a lot nicer because I do not have that skill oh yeah we're just uh we're just buying time until I get some uh more experience with a UI Builder but we're gonna make this look like a fridge y'all I'm excited it's gonna be exciting all right so uh with the repeater once you're inside of a repeater uh the way to access the value is uh item so item refers to where you are in the repeater and then value uh is the value so in our we have an array of objects so value is an object at that point so if we hit the dot we get more stuff so we've got name here so our first one is live all right nobody's gonna click this button but that's fine uh so I wanna I wanna put that in the middle let's go ahead and do that where's my here it is it kind of hurts to see how um how easy that was to do when compared to a service portal widget like wow yes there are uh there are a few a few things that are a lot easier to do in UI Builder and then there's stuff that's a lot easier to do in service portals so they they all have their their place all right so we have the button that you want to align Center yeah I I did uh let's try it wait hmm and you've got it as a flex item did this one go all right that one's Justified oh alignment align item so that's vertical yeah you got justify here let's uh let's save the page since I haven't saved yet and then let's test it all right looks terrible but at least it works uh so one thing I want to do I think is uh I think I want to add let's add a maximum width of like do that to both of them and see if that helps bye Adam all right let's refresh I think my uh my resolution is to hi that makes sense well what's the yeah because I would want to line everything up near the top we won't worry about that yet let's just let's make it work so let's add some padding at least there we go and see this is why we make a great team because I get real caught up in making things look pretty first and uh I completely forget about the functionality until the night before uh what else we got here uh button config uh I think we can change the size yeah let's make them big and then let's make them primary so they pop a little more all right let's see how that looks all right that looks a little bit we haven't uh we don't have the width working but that's all right all right so the goal is uh the goal is to be able to hit a button it adds it to the shopping list and then it Grays the button out so it's still there and that that's kind of how we know that it's on the list so first we need to add a a create record data resource because we're going to be creating an M2M record and that's in global I agree Paige you know uh Lisa and Andrew over here talking about how you have to make it work before you make it pretty but I disagree fundamentally speaking anybody can make something work it takes art and it takes skill to make it pretty and that is what attracts people there's a reason why UI and ux is so important because if it's not pretty no one's going to use it I don't disagree but it also needs to work or nobody's going to use it would be Mike no you don't need it to work [Laughter] all right [Laughter] well played producer Earl [Laughter] all right uh so I renamed this it's always a good idea to rename your data resources so that they're more easily identifiable it may not seem like a big deal when you only have a couple but you might get to like 10 or 20 and not you know you may have like three create record data resources so it's good to rename them uh and uh there's Sarah bringing the heat there yep so Earl I was getting there so for those of you just tuning in we are currently [Laughter] Brad what are we doing we we are uh we are building uh a page in uib so the uh the goal is for people that have uh large families I guess you don't have to be a large family you just be busy uh but the goal specifically for me is I want my kids to be able to tell me when we're out of stuff so I can add it to the grocery list so this is a page that's going to have all of our favorite groceries they're gonna click on it it's going to add something to the grocery list and then uh gray out the button that's that's our our goal with this so we have the back end app created we're working in UI Builder right now and uh there we go that's the goal thanks Earl and just to know everything might look a little bit different because we're currently in Utah and this is going to be a part of a new series called uni Builder live and our first project is uni hungy that's right when I edit this I'm gonna go in and put a uni hungry like counter ticker at the end for every time we say at night yeah uh all right I did want to call out uh this is a uh so this is a data resource the create record data resource it's a mutate data resource so data resources should either query or mutate data so mutate data means we're writing data they should either do one or the other because they behave differently so a query data resource you'll get all these properties here and so you can bind data to the properties and they they run on page load they run when they're refreshed they run in all different scenarios because their goal is to keep the data on the page up to date a mutate data resource you want to you really want to know when it's running if it's if it's writing data so you don't want it to run on page load generally you don't want it to run willy-nilly all over the place and so it also has properties but you pass those properties when you execute it and so we will uh we'll do that right now so let's go ahead so we have we added it to the page and now we're going to make it run whenever I hit the button so we're going to go to the events tab on the button um the button only has one event it gets clicked that's the only thing that it does uh other components that have multiple events uh you'll have you'll be able to click this add event mapping and it'll show you all of the available events for the button there's just one so we want to uh where is it we want to execute our create MTM item event handler and so we didn't have all the properties when they were in the data resource but all of the properties are here so we have a table property this is uh if you're calling this via script this is an encoded query but it's really just a filter then we have whether we wanted to use display values and then when to trigger so we're just going to trigger it when we call it so the table is still loading because apparently we're going to load every table in the system here so I hope the spinning stops so we can actually do this but are there any interesting questions no just uh people with horrible suggestions in the chat um Sarah making uh arguments about how much she loves portal and how we're never going to be able to rip it from her hands um and also anurag I'll have you know that I am technical I am no longer an end user uh we're saving what's going on here throwback to when um Ashley and I figured out that you end up there we go when we overrode each other's changes in UI Builder because we both hit save Good times yes UI Builder does not support uh concurrent development at the moment all right the table thing is I saved the page and reloaded it uh there we go that did work good for me all right so we want to create a list item not an item there we go list item and then we want to write a few values here um so the first one is we want to write the list so we want to add it to a specific list we actually get that list back in our data resource output uh list ID so the data resource is grabbing the current active list there can only be one list active at a time uh let's pretend like I built that in um and then oh the other one we want to do is we want the you know the item so remember we had our list table and our item table and this is an M2M record so the way that we do this is we have that item um item.value I don't know why oh it's because I I do this a lot um because it's an autocomplete it's a reference I did not click on the data binding so there we go item value dot um ID so this is the sys ID of the specific item in the repeater that we're in and I know it's confusing because we have an item field and then we have item in the repeater they're totally different so apply we don't want display values because those are actual values so we'll click add and then the other thing that I want to do is I want this button to get disabled if we add something to the list so we need to do something else so after I um yeah yeah thanks Andrew after I uh after I create that record I want to refresh our get grocery favorites data resource so I've changed the data on the back end so I want to change I want to refresh the data that I'm getting back from the back end so we just add another event that's pretty easy and then the last thing that we're going to do is this is our button it has a disabled property uh so we want this disabled property to be remember we get back whether it's been added or not so if it has been added to the list uh then we want it to get disabled so let's save and maybe this will work maybe it'll work and then we can make things pretty all right so let's try adding something to the list let's go catch up all right well a grayed out so something happened something happened let's refresh and see if it's still grayed out still grayed out nice go back to app engine studio and check the data and make sure that so we have our list and then yes ketchup is added to the list all right can we get some sort of clapping clapping sound Earl please thanks great sound effects do you think we can put a list a display of the list itself on the right side of that page I think we can I think we can um we'll have to create a new data resource for that but we can do that so we should we uh should we try to make I really I really want these to be centered uh okay so let's try that then let's do let's do this let's make this a grid and then we'll add the list on the right so got that and then we're going to add another container after the repeater um and then I I can change the way the grid works right you should be able to change the direction yeah but why not Flex uh I guess we could do Flex I want the left side to be bigger than the right side I thought there was a oh you're talking about the I know exactly what you're talking about yeah um scroll down a little bit on the right there should be under oh we may get it be getting into an advanced layout that I need to should we learn CSS grid oh man so I could just remember that there was a little bit um where you could put in the ratios for it yeah I I thought that too I mean it looks like we should be able to do that so let's scroll down here grid Gap line content uh I think this is old oh there we go expanded the code editor edit layout code should we try that it seems Seems scary but we could try it where is that page configure well I guess let's uh we'll be clicking on body click the layout yeah we're on buddy all right so let's so one little uh one little trick uh if you click on the body container uh here on the content tree uh there's some things that uh that it can do uh that are a little different so it has all these events built in so if you want something to happen on page load you click on body and there is a page ready event uh page property has changed so if you have a I think that's I think that is for pages in a uh in a viewport actually but anyway events and then in in our config what were we clicking on there were three dots somewhere I'm going layout edit layout code what is this on Utah all right click on the no no so right now you're in this play now this is the body though um I I we're not going to be able to do it from here anyway because it's this grid container so yeah just mess with a grid container columns can we do it from here oh there it is there's the column size they moved it and I drag the phone so can you click on the three dots next to column one change that there it is put 2fr do we know what an FR is I nope but it worked there we go to fractals I don't know all right so that worked thanks Gabby so let's go background I'm going to change the background on this one just to just to make it different there's nothing in there but let's go let's do uh we have some time left so we need a data resource that's going to grab everything that's currently in my shopping list so I'm gonna get a uh I think it's a lookup records Paige says that it's a fractional unit but I don't know if I believe that that sounds right good Googling page I mean I'm sure you knew that sorry D is technical uh so we want uh the list items and then we want list items where a list is our data edit it again I'm going to change to there data dot uh get grocery favorites output dot list ID and again this is uh this is a portal experience that's all UI Builder we will be doing some workspace stuff and and probably some later episodes of this show where we mess around with declarative actions and things like that that may not technically be UI Builder but for this use case we're going to be all in UI Builder uh I want let's grab name and sys ID choose a field oh we want item the item dot name and then I think I probably want the sys ID of the list item just in case we're not grabbing the sysid of the list I believe so we're querying the list item table and I think yeah this is this this idea of the list item so we want the name of so you have to go item.name but not item.sysid yeah yeah I think we want the assist ID we we don't necessarily need this uh but we'll want the sysid of this item uh of the list item itself so that was the thing we just created so this is this this idea of the thing we just created all right uh let's order we don't really have an order but sure let's let's order by uh we can't doc walk in the alphabetical I guess let's go item I don't know if that's gonna work people want you to rename the data resource I'm going to get there I'm going to get there don't worry um I know it makes me it also makes me a little a little antsy all right hit save let's do it uh let's uh let's add let's add a couple more items to our list so we let's go uh milk and cereal is it gonna work for both of them I don't know if that worked refresh let's try it can y'all hear my dogs that's somebody's walking by the house all right let's just try one I think it didn't like that I hit multiple that shouldn't matter but let's go and then now let's go X all right these are probably the four things we run out of the most so let's uh let's add another repeater within this container so we add a repeater not like a list component uh I think I would rather build this list with a repeater um because we just have more control over what it's going to look like because really all we all we really want are the names of things you know I I don't really need like list filtering and check boxes and all that stuff that come with the list I don't think maybe we'll maybe we'll change it maybe we'll have we'll run into a requirement where we want to change it um so let's go Let's do let's just try to stylize text within the list that's nice it's ready for us uh so this whole preset thing um we introduced the concept of presets and controllers in the Tokyo release and that really allows our component authors uh to basically pre-configure components to work with data resources and and we first off uh did this with all of the record page components and so that's why you see this form so if you had like a record page that you're building from scratch and you wanted to add like a form header you could just click on this and then you don't have to do any of the data mapping so you don't have to map the the data resource output to your properties on your components so for some components that take really complex inputs into their properties this is really nice the form components are the biggest candidate for that but we are adding um presets and controllers to more and more components every release but for the stylized text component We're not gonna we're not going to do that right now so I think let's what if we did an H5 so we still get some padding I guess we could just do it let's do a div let's go uh I think we want we're in a repeater so we want item a repeater is only grabbing two I oh no we didn't we didn't set our repeater up so we have to do that first whoops data array uh we're gonna pass in the data resource which is look up list items results uh and we should get three we'll have to figure out why that is all right so it's showing us six for some reason or no we should have four right yeah so we'll figure that out but now we're gonna uh we're gonna bind that uh item here value Dot uh item do we have another item oh dogs are the best right 100 my husband just got home and mine are about to start going off too uh maybe we want margin instead of that undefined so let's uh I don't think this is gonna work because there's something going on with our data but let's see all right much undefined cool oh at least it's not object object that's true so let's look at our data resource and see if we know what it's returning so um we have an array so that's results we've got this array of objects so we should we just need to keep dot walking after item I think that's it no yeah because we're not getting any values back we're not getting any values back here why not good idea Robert let's see if uh if UI Builder can handle emojis next episode let's let's not do that yet uh what's usage oh um terrible with item conditions list is that looks right why why does why are there six all right add let's go back and look at this again so list dot Now list we want item dot name we already have that on there but what happens if we let's get rid of this I know let's let's try it with CIS IDs at first just to see if that works I think maybe I didn't like the dot walking uh Andrea go for it I was just going to say list item is our M2M so there's a list there's item and then list item is then too all right so let's let's save yeah let's go back to the stylized text and just see if we can make it show us this ID to start uh so value dot says ID uh is there a all right let's stop there still undefined all right so let's uh can I try aren't we and that's his idea isn't just this idea of the M2M record well it is the CIS ID of the mtam record but for now I just wanted I wanted to show something so item dot value Dot sysid so item what did we bind to the repeater all right so results is an array so we should be getting this should be the repeater uh so we want so value would be this object so dot sysid should work item.value.sysid is the repeater properly configured you think I think it is well no it's not because it says we have six since we have six uh list items so let's see so we've got 102. 103 good for me for numbering this table that's three for four five six oh I think we got some dupes probably when we uh let's let's just look at it um our list let's click into the list all right so we do have maybe that was a problem let's just delete these that's probably from when it didn't work and you refresh the page and then it magically added them yeah I'm still not sure why that didn't work um but here let's do a we're gonna do a refresh of UI Builder actually let's just close the tab and reopen it that's my I learned that from Andrew Barnes on a Live code I kept refusing to close the tab and he thought it would work and I closed the tab and reopened it and sure enough it worked don't you hate it when that guy's right all right it's worst I kid just moved uh we called this fridge View all right at least we have the right number of Records we do have the right number of Records so that's a good thing so item.value.sysid should show something here oh was uh but you probably saw this and it was obvious to them it's this ID we need value it's an object yeah hey there we go all right so now let's try this again Kim got it Kim got it oh it looks like Christopher got it a little while ago yep uh all right so now let's try to add our uh locked item back in and see if that doesn't screw things up all right so that one's going to be item item.value dot item dot display value display value and this is where the autocomplete kind of breaks down yay that worked thank you commenters good job guys now let's see if it works in real time oh it will not work in real time but we can make it work in real time so let's go so let's let's demonstrate that it won't work in real time so let's add Mayo we're going to run out of stuff to add to the list um so Mayo is not showing up if we refresh it'll be there there it is so we need to so we refreshed the data resource that feeds this list or this repeater but we didn't refresh the data resource that feeds this repeater so let's go back to the button we'll add another event handler and we'll refresh our lookup list items so if I refresh and we go bananas we should get bananas at the top there we go that's one of the things I really like about um UI Builder well one of the things is we built this page without writing any actual code which was kind of nice um which you know your mileage may vary maybe you like writing code which is fine uh but we were able to kind of do all this with just hey go ahead and refresh and everything Auto refreshes it's kind of nice um so I think uh Sarah are we just ready to ship this now it looks beautiful is she still here no no no thank you so I think though this is a great stopping point for today next week we can work on making it look really pretty all right yeah we're back awesome it's our faces so everybody thank you so much for hanging out with us on the first episode of uni Builder live it certainly was live and you and I certainly built something uh so I ship it I I Market a success everybody thank you so much Brad can you rate your drink uh yeah it was uh well I switched from cranberry raspberry to black cherry sparkling water oh there we go uh it's I mean it's delightful as always so I'm gonna go on a if this is a word rating if this one's delightful delightful mine is empty because I actually didn't drink anything this whole time and this is just here from this morning so thank you once again everybody yeah it's just a prop it's all about the show um thank you all so much Once Again Brad is there anything you want to shout out before I give the final sign off yeah should we we should probably tell them when we're doing the next one uh which I I was about to say it there you go we'll go go ahead and go ahead and tell her awesome so ideally the next one is going to be at the same time and same day Thursday on the 23rd so not next week the week after something important to know is that next week Friday um is going to be I think Brad's going to be on live coding happy hour I might also be as well we're gonna do live coding happy hour next week and then do we have is our Academy next week we should we should figure that out yes or maybe actually next Wednesday it's not on my calendar but I'm pretty sure we're doing it we're gonna do a what's ruins Academy at 11 A.M Eastern on the 15th which is Wednesday yes we'll do what's new in Utah and then on Live code we're going to do some sort of next experience theme Builder UI Builder Utah thing um and so for this uh we're gonna go every two weeks we're gonna go every two weeks and we'll build something in UI Builder so we'll probably continue on this uh what do we call it uh you and I hungy you and I hungy increment the counter uh so we'll do this probably for four or five sessions and then we'll probably do a workspace scenario after that um yeah so thank you so much everybody for hanging out um Brad's video in camera has been off on my side for about the past 40 minutes so if you guys noticed me uh kind of not reacting very much it was mostly because I was trying not to get distracted so hopefully next week I'll have that figured out um intern roll the end credits please thank you all so much bye bye [Music] [Music] thank you