[Music] [Applause] [Music] [Music] n [Music] [Music] hello everybody and welcome to another episode of you and I Builder live where sometimes it works and sometimes it doesn't but I really hope it works today so we are in for a super special episode today we're going to celebrate our Oney year anniversary except it's kind of like one year and several months because I forgot all about this back in February my name is Maria Gabriella oo prz wector and today I am joined by you are on [Laughter] mute I'm muted now I'm not muted what a great start Brad tillon I am an outbound PM uh here at service now for our agent experience products including UI Builder and I'm on his team so today um if you weren't here last February we started off the show with our iconic app you and I hungy um like to think that that was the peak of our app naming scheme um it's gone downhill from there and it's only going to keep going down so today we're going to see how fast we can build it and if we can get farther than we did last time in the same amount of time um the app is uh I'll let Brad introduce the app sure so uh the app is a grocery list making app uh for my family uh so that was what we were going to do uh we go through a lot of groceries and I do all the grocery shopping and so I wanted an easy way for the rest of my family to add items to a shopping list uh and uh then be able to shop for them so yeah today we're going to basically do the same thing but probably differently um because it was a while ago when we did this the first time uh we do have a special I have a stakeholder in the chat I believe uh so my son is watching and is going to maybe pipe in at at a certain point uh if uh he thinks I'm doing something wrong maybe or at any time but yeah so we've got uh we've got grocery we have a an app with some tables in it it's got a grocery list table and a um a table for all of the items you could add to a grocery list and then a couple of many to many tables uh in there uh Caleb go ahead write something in the chat if you're watching I think he is can't actually see him um yeah so we're going to do this uh so we're going to add some data resources we'll use the new data binding uh we will uh you know use some buttons to add some things to a list or remove them from a list we'll do some searching and maybe we can do all of that uh in one episode but we'll see here no Gabby anything else to add uh no I kind of looked through though um the old episode to kind of prepare for today's episode and I did not um are we starting uh we're doing a portal experience again right I'm gonna do a base app shell experience for reasons that I'm not going to share for a couple of months okay awesome um but I was just looking back at the episode and I think the most striking difference between then and now now is actually opening up the data resources um it was so awful to show on camera just the Big Data resources drawer and then trying to do anything above it it is so much better now nice I just got a text and he says he can't comment so I can't troubleshoot that right now but he's watching at least all right um so yeah what we want to do on this episode we're going to try to uh return all of the possible items uh and then we will do we'll try to add an item to the list uh and then if we get there we'll add some searching um so hopefully that works so I guess the first thing we need to do is add a data resource so this is a new Washington store release one thing where we have this new data resources panel that uh you know Works a little better and surfaces are most common data resources and I can make it bigger and move it around uh so we're going to add a lookup records look go multiple records data resource and I don't know what any of the table names are because Gabby set all of this up for me uh earlier very basic but what's the app name is it just you uor hungi okay oh are we running into the ISS we're running into the issue oh it's snc it should uh it should just know that but oh there it is is _ I what did you have an Amber sand in there or the end yes I did oh it's all right so we want all of the available items for the current for the current list so we haven't even uh we haven't even done that yet so let's do we have a list created technically we have one all right let's go let's go to the back end and look at uh look at what the data model looks like it's this one so there's a list so let's do a couple of things let's grab the most recent list that is there an active there's a state all right so let's go let's grab the most recent list and then it should have a bunch of available items associated with it so there's a lot of stuff there let's go X list we're going to go descending we're going to grab one and we'll say created so how many things are in this list I um there's two things in the list why am I getting more than two in uib are you on the right why is that let's do this let's close it we're going to save the page and we're going to do a hard refresh CU I see two lists available and you were looking at the right one but the numbers it was giving you was from the available items list there we go there it is live list so that's the current one all right so let's rename this to look up current list all right and then let's set a client State parameter called current list so much refreshing happening um I we're going to do a couple of things so we're going to give it an initial value and cheat a little bit I can't copy that all right we'll copy here so we'll cheat a little bit here and give it an initial value and then on the success event we will also populate it uh I don't think that's going to be right so we are going to populate this eventually but for now we're just going to hardcode that value so then let's add another data resource that looks up all of the available items that I have for that list so we have two mdms we have an available items list and then an items list that are actually in associated with the list that so we did this to make the uib part of this a little easier uh so we could could just use out of the box data resources and not have to build our own uh there it is it's the first one so we're going to say this is items associated with is there a list record or a list field on this how are we working here so if I go available items I'm on mute so oh the item to list table has the item and the list record and anytime that a record gets created there it'll delete the record from available items but anytime that that record gets deleted it'll create the record in available items so available items but available items isn't associated with a specific list it's just that I think that works yeah did I associate it list be Associated so I think that's fine so we should get we have 11 total items here uh and we want some data around those items so we want oh we've got different aisles so let's start with name so what kind of name do we have cherries bananas these are all things that we eat ketchup milk yeah apparently something I learned from the very first episode is that Brad's family cannot live without ketchup that is true if there's no ketchup we Riot I don't Riot but well actually I do there there are things that I have to have ketchup for um so I guess let's start with name we'll have the CIS ID you should grab the item I mean the number the number all right the number is a very important field this is a super important functionality let's go number let's go CIS [Music] ID then the number has emojis in it that's incredible I love it pro tip append in studio doesn't let you out emojis but if you go to the advanced view of the table you can edit the numbering there who knew you can add emojis to the numbering um and then well yeah we'll do HB on Kroger Isles what's an HB oh who anybody any Texans in the chat you want to HB is the best grocery store in the world that's uh about all all we need to say about it I'm sorry but if there's a grocery store out there called Piggly Wiggly that one wins oh I do like high explosive banana High highly explosive banana that's exactly what that is all right so we have all of our items we've got 11 items in there so we're going to do so we want all of our so what I'm going to do is put a search box up here and then we're going to need another column so when I was laying this out I almost just used two containers because I knew I wanted one at the top and then one in the middle but I also know that column layouts are really flexible and so if I just use containers it's if I end up needing more columns it's going to make it difficult and in my head I was like I think it'd be easier if I just had containers and I was like no columns are better and then later on I realized hey I'm gonna want two columns in the second layout so uh it was uh it was very fortuitous so let's add another column so I want the list of items on the on the left that are in my list and then on the right I want like available and so why don't we do it backwards let's do available items on the left okay and items on the list on the right all right I'm I'm like programmed to the left list being the skinny one but all right I'll I'll I don't know what you're talking about this is how you did it a year ago I'll get out of did I do it like this yes well who knows I want to have a good comparison screenshot no pressure all right so we're going to make this the list of items that are actually on my grocery list and this is going to be the list of items that I can add so let's go ahead and add we probably want some sort of label in here so let's add a heading let's call actually I just realized something I had meant to do this at the start of the show but let me see if Earl can make my uh let's see if I can no no no don't make my whole face no let's see if I can share my screen so this let's see if it works Earl all right no not that not that either there it is so this is our goal for today this is how it looked like a year ago we're gonna destroy this I feel like okay okay no pressure but I just wanted to set expectations let's see where we get to with our very important stakeholders in the chat I think we're going to beat this so we have our available grocery items uh I don't think I can add padding and a column which kind of annoys me but that's all right if the uib team is watching just uh there we go if the uib team is watching just know we love you guys that's true it it there the reason it's going to look better is because uib is so much easier to use now than it was a year ago um oh I just got a text that says is blueberries in the list because that's Caleb's favorite fruit so if it's not in there we should add it I think it is let me make sure so instead of him making comments I'll just read his text off my Apple watch a la perfect um so we're gonna we're going to rename this uh because I I never rename data resources and then I always wish I had um so sorry yeah uib team means the inbound and engineering and design teams for UI Builder uh which we Gabby and I interface with a lot in fact we saw like a future facing thing this morning that is going to come out that is really awesome uh so we're gonna call cool we can't tell you guys anything may contain forward-looking statements these statements are int and to introduce those of you who may not be familiar with that that is the reason you don't give your friends voice recordings to make AI braces with um that recording was saying something called Safe Harbor which basically means that you should not make purchasing decisions based off of any forward-looking statements that we make because we're product uh managers and we know things that are coming in the future you should only make purchasing decisions based off of what is in general availability yeah serious time over oh oh may may be coming you're right you're right so we're GNA make each of the items a card based container this is one of my favorite uh I've kind of fallen in love with this component that may be a little strong but I I like it a lot um this card based container component uh because it is a clickable uh card basically that you can add a bunch of stuff inside of uh and it looks kind of nice um and so with our repeater there should be more than two items in our oh I didn't I didn't bind anything to the repeater yet so I'm getting ahead of myself let's enable Styles I I do love the stylized text component um so let's give it five columns and one row it'll give us more rows if we need it well we're doing large for all of our spacing uh and then we need to bind uh our uh grocery items list to this repeater so this is um this is kind of one of the most basic things that you do in UI Builder um but it is uh something that you're going to do a lot and really important and so I'm going to take and again this H visual data binding is maybe the most favorite feature that we have released recently uh for me so I'm going to take the output of this data resource uh and we have this look up to grocery items this one doesn't actually exist I renamed it uh and then we are going to pass in this results uh into the repeater so the repeater is expecting some sort of array one of the nice things about this uh this visual data binding is it tells me like hey this is an array uh right it's the square brackets these are all little objects um so I'm going to pass in this array because that's what the repeater is expecting all right oh my gosh it shows M cards this is another so in Washington store release 2 which came out May 9th uh I only remember that because we were at knowledge uh we added uh we changed the stage so we call this stage 3.0 it's kind of our third version of the stage and so this is now a true wizzywig uh this is showing you what you're going to see when you look at the runtime for the most part uh it's also interactive so it has things like plus signs that you wouldn't actually see in the runtime uh but it's going to show you all of the items here and you see the header the header is not clickable if you are wondering um but it does show you what this page is going to look like so it just uh if you're doing styling you have to do a lot less uh previewing or saving and opening in a new window speaking of W can you hit save real quick I can I thought the numbers came back where's the green number oh it's okay I I like it I love how if you only see the first episode and then this episode that's never gone away that's right we did take this away in Vancouver Vancouver yeah um so yeah technically we fixed a glitch but yeah um so in the cardbase container we're going to add some info about our grocery item and so well we talked about stylized text let's use them um so we do want to workflow it but uh we don't need to say that here 11 times so uh one of the nice things is that uh this statea binding is contextual so I now have since I'm inside a repeater I have access to the repeater items uh and so it tells me what my index is this can be helpful for a few different things um so like I could do some styling based on this I think with the CSS here uh but uh we're just going to go for the value we're going to go available item and then display value cherries so we should get oh and there's the blueberries that's just for you Caleb um so let's go H3 seems right still a lot of spacing it's all right um so cherries blueberries bananas let's see uh I still I still do a lot of testing even though it's a wizzywig now so let's see what it looks like I just got a yay text um all right so we have these items so I think we're going to pause on this so it already looks better than it did before um but uh we're going to now make our list on the right and what we want to do is when we click on one of these things it goes away here and it comes over to the right all right um so we want to go to the right here let's add another heading and we'll call it grocery list he he wants to know if anyone can solve a Rubik's Cube he's very into speed cubing anybody in the chat you can solve a Rubik's Cube please please say that um all right so he texted me about it like three times um so we've got grocery lists and then we'll add a do we want a repeater yeah let's do a repeater uh I think if we get in a later episode we could do the um the version of this where I'm at the grocery store and have a shopping list and then in that case we'd want to use the checklist uh component but for right now let's stick with grocery list that would be a great thing to do maybe after August um so let's go ahead and go add after [Laughter] and we'll add another repeater and so actually we need um we need our we need another data resource why didn't that not come in oh it looks like Earl's into speed cubing yeah oh we should do some sort of competition at some point oh no I have I have Travis's next year's knowledge lab make us a Rubik's Cube uh component oh a solver a Rubik I mean those are all over oh I wasn't thinking a solver I was thinking like a an actual Rubik's Cube you would have to solve by like clicking around yeah I mean there's crazy ones he has like a 12-sided one that like I don't even know how to solve a scks sited one but uh X snc and then we want uh item to list I think probably here right uh and then does this grocery list already have items in it no okay let me add one real quick list is then and then take it off of the available or will it automatically do that it'll automatically do that yeah you know guys uh I'm sure none of you guys have ever experienced a 20 minute turn around on an ask like geez I did tell Gabby 20 minutes before we started oh I was thinking about this and we need this other table and this automation on it and uh she put it together so uh let's go who I don't think we can order you can't order on a uh On a related table we'll figure that out later all right um so that looks good I think no current list yeah let's say look up current list can remember everybody rename your data resources before you use them because that's not Dynamic that's right right uh all of your data binding references your data Resources by name look that that did work all right so let's go ahead and add something to our grocery list I think for this one and before stylized text yeah so let's make this a let's style it and then I think I'm going to put a I'm going to put a column layout in it oh the column layout is kind of responsive and so I don't think that's going to work so let's do a grid and we're give it two columns and one row and then in our first you know what we don't even need that container we can make this one a grid no I was wrong don't mind me all right so the first one we want we are going to do a stylized text here and we did those as H3 I think we want this to be a little smaller and we want it to be we're in the repeater we have a value oh did we bind anything to the repeater or did I skip that no you totally skipped that I'm sure I did that's why there was two in there so this is our lookup current list items uh oh apply and then in our stylized text we want to grab I may not have told it to get the right no a the created data is the display value on that table let's go current list items we need to tell it what fields we want which is interesting I guess it doesn't set a display value when you create it from AES all right there we go yogurt that'll work all right we're halfway in got item and then we'll add yogurt why did oh I know why this happened it's all right I may have broken something with that last record there disregard oh okay no worries all right so we have my business rule didn't quite work because we have pizza on both lists so I'm trying to fix that right now no it worked so I think uib just wasn't updated all the way like it has to refresh its data resources and everything so this looked like it worked or did you manually delete them nice all right uh so we have our grocery list I still don't I still don't love the spacing there I wonder if can we add like a we add a border to this or a background let's add a background then I need more spacing in my let's do this I think what was happening is that adding records through app anden Studio wasn't triggering my business rules so I want to see what'll happen when you do it all right now for my container we can add some padding in here all right so now we want to do a little bit of automation here where when I click one of these it should add it over here and then we'll add like a remove icon that moves it back over here so uh with this card base container uh I have an interaction so I can say click or select um so if I say click then it's going to fire it just fires different events I think if I do select it'll highlight it but we're going to do click and then we need to say we need a create record data resource here I think it was already at the top huh yeah oh yeah then you have to do it from the event right I was just staring at it list item all right and then my card based container should fire an event for card clicked and you can see that for card selected set there was a different event um so we're going to say create list item execute uh we're going to do this again against that a list item table um list two yeah item to list item to list all right and then we're going to set list to my client's date we go current list and and then the item is going to be I'm in the repeater so the item is going to be value available item. value I fix the display value did I do display value no I fixed it oh okay oh nice um yeah I think that's all it's going to take and then we want to refresh our data resources so we're going to refresh the grocery items and the grocery list items so let's see if this works yeah go for it all right so eggs hey that worked so we got eggs over here and it disappeared over here nice so I hate this scroll bar bar it's because we added padding and it annoys me um and then we need a like a little Trash Can icon if we just just put it to the left here now no don't put it to the left um so after the stylized text let's let's use a real button say remove So functionally speaking here's random question of the day is there any performance impact or any reason uh why we should or should not have the refresh events on the uh card click event versus doing those refreshes from the data resource uh success event um yeah so when we in the create you're actually right we probably should do it from the data resource event because those events from the click can happen in any order right yes yes that is a good point so uh technically it's all asynchronous in reality they pretty much always happen in order but you are right we should do that based on the data resource success good call out so let's go when we succeed then we want to re refresh our data resources that also helps us if there's a different way that we can add something to the list then it will automatically update we don't have to worry about it anymore so ideally we could create a handled event and then fire that handled event from anywhere but we'll do that we'll do it this way grocery items list items and then for remove we're going to want to add a delete data resource oh that's not one of my popular ones Travis wants to fre you to elaborate on what the advantage of putting it on the data resource event is I mean the main thing is uh we will refresh the list after the database operation happens whereas if we did it all in a row it's possible we could have some sort of race conditions issue and they could happen out of order and we'd refresh before it actually got added and then you wouldn't see it on the screen it also allows us if we had like a you know maybe we add something at the bottom where you can write in your um like a free form thing and then if we use the create record data resource for that then it would just automatically refresh everything we don't have to add those data res resources multiple times oh that's a really good point um so then I'm going to rename so not all components always need to be renamed but there are some components like buttons that most of the time you end up with multiple buttons on a page and once your content tree uh gets um you know gets built out uh it can be hard to know which button is which especially if you have some next to each other and buttons are one of those things that a lot of times you will go back and look at its events and so you want to be able to Target uh a button so we're going to call this remove item so I don't always rename components uh but like containers are generally pretty good to rename buttons I mean really all of your components you should probably rename um do as Brad says not as Brad does rename everything I don't I don't ever have to like build something that people actually use uh so yeah so yeah use the use actual best practices not just what I do uh when I'm lazy yeah we should have a disclaimer here that the apps we build while accurate and well functioning and done live the reality of it is is that they're not going to be used by anyone so we often lose the apps instances go boom sometimes um we may or may not have access to the the original you and I hungi app yeah we may or may not have completely lost it it might have been like three developer instances ago for me that I never backed up um so back up all your apps everybody right oh delete we should rename the delete data resource too I don't think I've ever used it it's especially helpful with mtms where you know you have to delete stuff delete list item Travis is right you should get into the habit of putting all of your apps on Source control yes absolutely which is actually a great idea I'll go through and do that with this instance after my vacation I'll make a I'll make a note for future me that's right I'm having a lot of fun just writing down hey future me here's the stuff you got to do when you have to care again no Travis we will not lose any more apps all right so we need the CIS ID of this record yes that's right think that's right and then and then on the delete list item we're going to do the same thing where we update our data resources so let's see if this works all right so if we eggs it does work eggs is back and it went away from this list magic so I think we're already more successful than we were on that episode I bet um and to be fair granted asterisk here the reason why this is so easy is because Brad this time uh decided that we would handle that little bit of automation outside of UI Builder so it looks so easy and simple because there's a business rule in the background handling it so that whenever an item gets added to a list it gets removed from the available table let's say it's a have to do it nobody oh it's a flow say it's a flow yeah yeah I forgot it's a flow all right uh do we think we can add a search box in the next 10 minutes I bet we can so we can search these grocery items although now I don't want the search box to go all the way across because it's not searching this so let's let's do this I feel like a way to create new lists would be great oh new new available items no new lists oh or new available items that works um let's let's do search first okay we'll see we'll see how far we can get all right so I want to go let's add a container in here and in that container we're going to add a search input that is too big all right I want it to have a little more room so let's give it we're going to call this uh search available gr guy is that too long a placeholder I don't know I feel like you put that in the wrong place I I think you're right NOP that's I don't want now mobile let's put it here hey why did you not okay all right and now we need a client State parameter that's going to handle our search term hi Daniel nice to see you and then on our search executed event oh we're going to update that client State parameter uh and this is one of those fun times where the search component uh likes to break the rules so we're going to say payload do search term because I know what the payload is like and then we want to go to go grocery items and we're going to edit our conditions say available [Music] item that name contains our search term then we're also going to add a refresh event here and then does it fire an event or anything else all right I think that should we fire the create record from the suggestion inputed events well so if you want to use the suggestion then you have to give the search input um a search configuration oh the drop down so in this case it's I think if we just search like it looks bad yeah we'll get bananas here oh cool oh cool yeah so that worked that was way quicker than I thought it would be so let's let's do a little bit with this container here and we'll [Music] add can you put available grocery items on the same container just to the left um of the left of the search above each other yeah they're above each other now so do we want to add uh let's do this let's go um available grocery items here let's let's do this and we'll add a button as well and then we'll add a new button o if we add item do we want it to go directly to the grocery list I think probably right I think yes wouldn't want to create a new item unless you want to add it let's do that I feel like it needs to do both yeah so we need oh we can use the same so we're going to call this uh we're just going to call it create item here we can use the bottom so you only ever need one create or delete data resource um because you can pass step into them so I didn't rename the the name of it just the label so for add item we're going to we're going to call that same data resource twice so we'll go we want to create um okay in the interest of time we're going to add the item to this list and then manually add it to this list because I think it'll be more complex if we have to do both at the same time and I have I have a call in 10 minutes so we gota we got to get going um UI available items oh yeah I need to I need to name it or something huh I can't just hit the button uh should we have a modal no let's do this let's go I'm all over the place today let's add another component before let's add an input um type text oh no that's unfortunate what do we lose that's unfortunate my uib crashed [Music] I I guess this is where we're ending today I think we may just end here and pick it up another day um but we were successful I think we we ended further than we did before um so even with the uib crashing uh it did work and it looks so much better than before um I am I'm very excited for my comparison screenshots I'm going to post later today so nice I think uh that was wildly successful um we can just ignore the last 30 seconds of the demo um before we head off I wanted to let y'all know what's coming here in the next couple of months so me and Brad are completely abandoning you guys next show on June 27th uh let me confirm yes on June 27th we're going to have an all guest cast They are going going to attempt something um I still haven't quite decided what yet maybe a little challenge we shall see but the guest and guest Builder live episode is going to be on the 27th it is going to be a blast and I invite you all to come back um and then July we're actually going to have a little special um event where we're going to be working through our um knowledge 2024 Labs so be sure to tune in on the 11th of July for all things Works spaces and then on the 25th of July we're going to have the conclusion to the um Notes app that Brad has built on this show over like two or three episodes um and then we've rescheduled build the long month to August just wait until August you'll see what's coming um other than that any final words Brad uh no not for me I'm good fantastic thank you all so very much for hanging out and for showing up and uh Brad and I will see you all in July byebye by [Music] [Applause] [Music] [Music] h