[Music] [Applause] [Music] [Music] [Music] hello everybody and welcome to another episode of you and I Builder live the show where one day we'll have a tagline my name is Maria Gabriella a Cho pressor I am a next experienced product manager and today I am joined by two awesome and fantastic co-hosts Paige would you like to introduce yourself first sure sure um so I am Paige stuffy I am a product success manager here at service now and our final guest hi I'm ay Anderson I work for yonso labs doing development work I'm here for you and for I am for UI Builder yeah awesome so today we are very beardless in fact um but what are we going to be doing today ay we are going to be building on the wish list app that you and Brad put together like however long ago ages ago and is there anything in particular we're g to try to get done today [Music] um we'll see what gets done yeah we'll dive into it and see what happens so uh give us a let's let's see if we can um give us a quick goal for today what is your goal that we hopefully achieve and we'll see if we meet the goal yeah so well do you want me to share like my little design that I yeah that'd be cute not a good word for it this is my little sketch of what we're gonna what we're gonna aim for we probably won't get to all of it today because we all know how live streams go but um I think it would be cool on the wish list app to have a page where you can see your wish lists and you can see your friends wish lists and then like when you dib an item it'll show up in a shopping list up here so I think for today a good goal would just be to show our own list inside of a tab um so that's where we're gonna start fantastic that sounds great I love that little design uh I know my writing is not that neat oh my as a confession I definitely rewrote it before I showed it so so let's go ahead and open up uh AES all right let's see wish Hub that's what it's called all right so I believe there is a workspace experience that is already created here we go with some super basic stuff we'll take a look at where it's at right now oh just kidding that's oh opening new ey there we go okay this is a question for you app engine Studio people what is this page versus like why doesn't it just open an UI Builder I can tell you uh that is the workspace Builder versus UI Builder so it is the low code um workspace Builder so it is it is meant to be where where individuals who are not ready for the full Brilliance of UI Builder can go to build and manage their workspaces okay good to know I've not played around in there yet so it it it's pretty simplistic but that's intentional yeah that sounds like the goal okay so it looks like we have oh this is a Washington DC instance huh yes it is I haven't played around in DC yet so this will be a good how are you able to tell um this data and scripts down here super nice and then also like this looks different all the buttons are look different the corners if we want a more thorough here's a Shameless plug if our viewers want a more thorough overview on what's new and UI Builder um for Washington you should check out our Academy next week it's going to be on Wednesday the 20th at 11:00 am Eastern and we're goingon to be going over all that's new in uh UI builder workspaces for Washington nice good plug okay so it looks like this is where we left off last time this app was touched in UI Builder live so we've got this live page appropriately named um and if we open it we see birthday wish list with some nice cards does anything happen when you click on them nope well that's broken uh when I imported the app into this instance um I think a little bit of theun fun ality did go away unfortunately it's supposed to pop up the wish list items modal that you see in the modal layout right there oh yeah yep let's workflow it okay well that's okay because we're going to be basically redoing a lot of the layout anyways so I don't know should we build off of this page or should we create a new page to do it let's build off of this page yeah I think that's a good idea okay so let's change the heading to just be wish lists actually what's the name of this wish Hub yes yes wish Hub and then let's pull up our Nifty little handdrawn design again so let's let's skip the shopping list for now and let's start with the tabs that'll show our lists so we can pull up I'm going to do it underneath this head yeah underneath the heading so we can add after the tab component okay so we'll have one tab that's just for our own lists and one tab that's for our friends list so let's start on our own list my wish lists and we'll make it the default tab okay and then we moved the column layout inside of our new tab so let's oh actually uhhuh um let's um you do me a favor go back out to the the UI Builder experiences by clicking on that green button in the top to left corner right next to wish Hub workspace this one yes okay let me can I save sure okay um oh there we go well you can't click that little the squares in the circle it doesn't take you anywhere no yeah that didn't take me anywhere but if I clicked on the title it did let's go ahead and open UI Builder directly it'll also get rid of the extra AES stuff at the top good point and the reason I say this is because we are in the wrong workspace what I just realized that I created both wish Hub and the wish Hub workpace so now click on the squares and the circle to bring you back to um the all experiences page there we go and then here sort by display name and you see that oh look at that yeah click on wish Hub not that one perfect now you click on the wrong one again go back wait it was wish Hub workspace right no it's wish Hub which Hub workspace three were so now go to the live page and click on the default no no no not not that page that page now we have actual functionality the way that it should work let's give that one a shot perfect um looks great yeah it looks great doesn't it um oh are there multiple variants no I think this might be an issue with the fact that it's a portal experience instead of a workspace actually but it should still show the contents of the page right I think there was a bug so let's just go Um let's just go ahead and continue here wait wait there it is see it works after you refresh which is funny I feel like I've run into that where you have to refresh a couple times oh which now click on it is a bug that I recently learned how to fix but I don't know that I could pull it out of my head we'll fix it afterwards then you should uh write a blog post or something about that because I I need that information yeah it oh now I'm super curious but I can't I can't get distracted okay so yes these are now clickable look at that look at and now we have the dipping uh so now we have a way better starting spot than we had before so now go ahead and add the tabs okay yes this makes this much more manageable I think think now that we're not building it from scratch okay so we have our wish Hub heading let's go ahead and make our tabs and we'll throw my list on there okay and now we'll drag those into our tab let's go ahead and just put [Music] the oh this is the mod I was like what happened let's go ahead and put the other tab on there too just so that we can see that it'll flip back and forth perfect so now if we open this up it should be [Music] within little tabs look at that okay awesome sweet we're going to throw some padding around the body so that I don't go crazy okay so let's work on these cards so for my wish list I only want to show the ones where I am the owner of the wish list so let's pull up that form um and this one I would go back to AES to access that data I haven't created actual application menus okay throw throwback to when creating a table created an App menu right that that has been uh voiced the the uh the displeasure with that but hey there is a functional workspace that you can should go and uh so the the the actual field you're looking for is wish list T there's no ownership on the field yeah that sounds good okay okay so I want to find all the wish lists where I am the wish listy yep so let's jump back over to UI Builder and it looks like we have a data resource to grab the wish lists so let's edit the conditions so that we're only grabbing ones where the wish listy is me okay do we want to duplicate that Tab and put it under friends wish list as well so I guess it depends on what we want to if we want the friend wish list to be like a actually yeah you're right let's do that and then we're gonna have to duplicate the data resource right well we can do it a couple different ways so we could duplicate the data resource or we could have that as part of our repeater to only grab items that are where I'm the wish listy ah gotcha which we could use the friend wish list as a viewport to kind of keep that information and data separate if we want to go down that route maybe [Music] we let's go ahead and do it based on the repeater just to show that one okay so duplicate one of my favorite features I had to move over to a a non that was Vancouver right a an instance that wasn't Vancouver and it has totally messed with me not having the duplicate functionality where did that go um did it just duplicate the container if you scroll down it looked like it duplicated everything I thought maybe no my eyes were just playing tricks on me I don't like that it opening overlays let's see okay so container to if I do no it did only duplicate the container you can't duplicate it seems the stuff inside of it either what is that new with Washington DC because I feel like you could you could do that with Vancouver that it would duplicate all the contents I'm gonna triple check with Brad on that one I'm gonna make a note of it yeah that's interesting okay well let's make a new repeater then and let's try duplicating this one oh so this one did I wonder if you just can't duplicate a repeater and so it didn't because this one duplicated its contents good question okay so and then we'll move this to the friend wish list so if we click on our friend wish list tab um we've now got the container we've got a repeater which doesn't have anything in it yet so this what I think I need to phone a friend on this one this repeater is like not letting me select it yeah I think this might be an issue from bringing it in from an older version the way I did so let's just go ahead and work from scratch on the repeater three okay sounds good so this [Music] time okay what which way would we rather do it do we want to have two data resources one for my wish list and one for my friend wish list or do we want to just have all the wish lists and filter it on the repeater let's go ahead and have to data resources okay so let's create a new one for my friend so while she's doing that why did you pick two data resources versus a single data resource um absolutely no reason okay I other than we've already had issues so I imported this um this application from a different instance that I don't even remember what version it was on and like I said earlier it's been giving me issues to where it just doesn't want to work the right way so I think figured it might be just easiest to just do a secondary data resource than to try to fight with a with a repeater that may not want to work with us makes sense that's fair um okay so to do the wish listy is not me since there's not an is not Dynamic there's only an is dynamic we're going to use some data binding to grab my user id visual data binding this is probably the thing I'm most excited about for Washington DC so I think you would go to session yep you're you're right user sis ID you have to press a little up Arrow session user interesting okay apply and we have Gabby so that's good and then what Fields do we need to return the probably the wish listy actually we want the wish listy photo the photo and the wish list te name no you have to do photo photo and we we see I can't remember what the other one was just name full name okay sweet so let's start we're going to order by name okay and then do I have to do anything special to like save it or does it save automatically it's already saved you just have toit in the top right corner nice oh we're going to rename this actually so actually let's test something out real quick pick cancel close out of here and let's go ahead and set up the repeater okay so for the repeater we're going to do data resources look up multiple records and that oh and results move that up um Earl would like you to know that your Arc is ready for an update just in case you weren't that thanks Earl and now we have to the image and the heading um in the repeater I think it will still from our cloning oh that's awesome or our duplication hey look at that okay now let's change the name of the data resource and see if it updates everywhere yes that would be nice because this was a very big thing that we had to watch out for in earlier versions of UI Builder to make sure you name your data resources before you link them anywhere otherwise you're going to have to update all those manual things but let's see if the ual data binding has helped um has helped with that any or if it hasn't I have my doubts this doesn't look like it updated but look like it updated let's let's refresh both and just see if it worked that's a good thing to note did we break the page no it's just the portal refresh there we go yep yep we broke it we broke it okay so you still need to watch out and make sure you rename them before I still love the uh the visual not not just on the you have to remove it from the top no no no no go back you have to remove what's already there okay friend wish list results move that up ah good call okay what were you saying page oh I I just love that the um the whole thing is visual now like when you're picking words are escaping me the thingy that just the screen the thingy on the thingy that was showing the thing yes that one the data binding I love that the data binding is visual like this now because it even shows you the current like test data in there so you can see how the data is being returned whether it's a CIS ID or a display value it's super awesome and I felt like a lot of times when you were typing it out sometimes it wouldn't always show you everything that was an option and to try and like guess as to what was what comes next hope for the best this is not going in the right spot come on oh it won't even let me delete this repeater that is broken oh that is super Broken Oh but I wonder if I can delete the container uhuh there we go okay so let's add that container back so this is weird the way that containers have kind of changed in in um in Washington is that now you don't find the container components in the list of components instead it's offering you to pick the layout of the container in that very first part there okay and that's how you add a container here's something else go back to add another um another component and type in column this is a different type of container where now you can pick layouts of dynamic columns here as well but it does the same thing where it doesn't show it under components as a column component it shows it under layouts from what you can pick so if you erase what's already in your search box it's now trying to kind of preempt what you're going to do so it's always going to be available under layouts in the top left corner there nice to be able to add a component a container from there so for people coming into UI Builder new it's going to be a lot easier but for those of us who used to finding the container component it's going to be confusing yeah I it's cool that it breaks it out like that yeah at least when you type in container it it brings those up so even though it's a little bit different it's not like you're you're typing in the word container and expecting to see something and not getting any search results yes right okay I think I fixed that repeater let's go make it's all working oh it's big okay awesome so now we have both of our sets of lists in the correct tabs um so I kind of want to show like like if I'm coming into to look at a wish list I think I would like to see all of the items in my wish list when I when I'm on on that page to look at it sounds good so let's Okay so we have a repeater going through each of my lists which ideally you shouldn't have well maybe you could have multiple you could have multiple wish lists let's stick with that yeah because what if I have like a Christmas wish list or like a wedding register or a you know so and with your friends wish lists you would have multiple in there for each of your friends okay so let's make this I'm G to remove let see so this is currently oh a card based container that's clickable I'm just going to hide this comp component for now and then we can always bring it back later if we want to so after this component let's put um let's do another container blue Flex box and we'll put we'll copy this heading and we'll duplicate the image okay so let's preview that that looks not good but that's okay that's why we're here so let's make this image smaller well is this container let's align it over to the left so that it's not spaced out so much and then we'll give it like 200 pixels let's see what that looks like okay that's still that feels like bigger than 200 pixels okay we can worry about styling in a little bit so let's go ahead and start adding the items below it so let's add we're going to need a new repeater and this time we're going to want to Loop through the wish list items so we need a way to figure out if the items are part of this list or part of a different wish list which which I think we'll just have to do in the repeater so let's see looks like we're already looking up the items so we've got our wish list name our image name dib di by okay so that sounds pretty good let's see if there's any more data on that table that we want to grab name there's an image image so let's grab oh image is already there okay cool so I think this is all the information we want but we don't want to do a selected wish list anymore because we want to just show all of the items in the list do we just not want to do we do we just wna why don't we just create a new data resource sure so that way we keep the functionality working in the other tab works for me okay so let's rename it first yes let's rename it first um wish list items oh man that was what's the actual name table just type in wish list that's what I did um then do Xs and C wish Hub there we go okay um and we're just going to grab all of the items for now so we're returning the image we're returning the name we're returning who if it's dived who dibs it quantity um I did dibbed and dibbed by which you've already got okay that's probably good for now right we can add more if we need more let's call this one personal wish list items or my wish list items that it's a little bit more distinct from lookup items except this will be for all of the wish lists right this isn't just for the My Wish lists well I mean we could do it either way it's just that we're going to have to we're gonna have to refine the repeater anyways if you have multiple lists okay right you we could specify which wish list it is but we don't know how many wish lists they're going to have sure I was just saying we name it my wish list items to associate it to the my wish list tabs not necessarily change the filter here oh gotcha it's just that I imagine we'll probably use the same data resource for both tabs since it's the same since we're not filtering it at all but let's just let's just focus on yeah the my wish list tabs like you're saying for a minute so okay so in the repeater we want to go through data resources um my wish list items results okay this let's use the formulas right because we only want to grab the ones that are for the wish list that we're on right so here toest that formulas I I don't know but we could look let me add let's see uh let's go back to wish list let me add a wish list that is like a a new one for let's do Hal's Christmas list and then I'll put myself on there and save that way we have two so that we can see better if it's working by the way that table Builder is really cool the fact that you can data on it that is pretty cool can edit it and add data at the same time okay let's see I just wanted to see what formulas were available since this is now exposed to us in this little modal thing do we know if those formulas are the same formulas that um you can pull up in like table Builder you can pull up formulas and table Builder yes ma'am fact you could do that I think um in Vancouver or maybe before that and and the only reason why I ask is because there is actually a table that sits in the background that um has all of those formulas so I'm curious to know if these formulas and those formulas live in the same place that sounds like homework you can take back it does update us all let's results wow there's a lot of formulas in here I actually have no idea if any of these would work I don't think they would I think we do need the two separate data resources oh returns true if the value occurs in the string or array so that could work potentially because we have an array of results it's just whether or not it includes dot walk I love at the bottom where they're showing you how to use it yeah right it's the little things amen okay so let's try this out so let's well hang on don't hit apply you have to remove the thing up top and then do the there you go you got it what would I do without you guys Okay so we've got the results and value is uh okay um so I guess I have to do I can't even remember what our data resource has anymore so this is the my wish list items so would we have to do like wish listy is I don't know I don't know how this would work with oh oh yeah I think I think what we need here is real quick Let's uh close out of here okay so we have a repeater inside of our repeater m and the repeater the first one is showing us the wish lists and we want to show the wish list items yep so we have access um go back to the data array and let's see do we have access to the first repeaters oh no on the right side sorry and uh no we [Music] have well that's from the data resource I was wanting the information from the repeater and it should show up under data types I thought um except we're oh of the previous repeater yeah oh I see what you're getting not um yeah I don't know why it's not yeah I don't know where that would show up because it should be like you can get to it if you did the at item right is how you used to do it these props I wonder if repeaters can't get nested and get information from nested repeaters at least not in the visual it can if you script it so let's go ahead and script it then okay that's what I wanted to do to begin with but I figured that was frowned upon no not at all okay so we want to return the CIS ID of the wish list so we can grab the items using the data resource and using that CIS ID right yeah so let's do const wishlist CIS ID equals oops missed my a so the API item value is the parent repeater row data is our wish list item and unique value is the CIS ID of the of the wish list so then we're going to return api. dat dot my wish list items dot results and we're going to filter where the [Music] item has item do what's the table really quick on an item a where wishlist item. wishlist is equal to our wishlist Society so this should return an array of our wish list items that are relevant to the current wish list that we're on does that look right I have no idea let's test it okay let's do it we said scripting was okay that we would understand let's add a component we can't preview yet oh you're right so let's do Brad's favorite component we'll stylize text I appreciate that they moved the none preset option to the very I know agreed let's see if the repeater item he look now we have a repeater item oh do we have anything repeater oh because it might not be able to be smart enough to know that we have items in there what does parent say what is the name parent is the earlier repeater now we're able to access it uhhuh I in you might it out like that yeah so we have item. value this is the wish list item so is it name is that the name of the column yeah name. display value okay now let's preview did you hit save um no but I was doing preview and it should work right with you shouldn't have to save inside of a preview okay well it's showing both of our wish lists so that's good so let's see what's missing here yay console.log our best friend that can be a great sticker for knowledge this year when in doubt console.log hey there you go yeah I would go to that session okay so we're getting Society we're not getting any results so let's look at which I I know we're coming close on time so if I need to Pivot or quit don't worry I'm the one who worries about time I got you okay cool cool so oh item. wishlist Dov value probably let's try that again uh nope let's look at what it's actually called down here so oh we didn't add wish list that would do it okay so now we have wishlist with a value so let's come back in here item. wish list. value and we'll refresh and see if that does the trick oh there we go ay wants socks in a library for her birthday but nothing for Christmas no she a library book she said a library that that is quite a whole Library I mean you've seen Beauty and the Beast right okay so we've got our let's throw a picture on there too so we can see the beautiful Library which I pulled from my middle school Pinterest page let's see image okay so our image source now we should be able to do repeater value image display value oh I forgot to do the arrow thing repeater value image display value okay let's see what that gives us possible but we've got some socks and we've got a library I'm me change the image size reminds me of the library from The Librarians I think that's right you've ever watched that show I don't think I've seen it there we go that's a little bit better so now we have our wish list showing with multiple items in the wish list and it looks awful but it can look better eventually I didn't know containers had presets yeah that's also new I haven't uh messed around very much with that and then let's add some borders sure first border let's see I think there's one in here that's a gap right oh Advanced oh yep there it is Tada that already looks better kind of one thing I've run into and I don't know if either of you have run into this but my margin instead of acting as margin acts as padding like if there's margin around it it should add space after the border right could it be because it's doing flex and it's expecting you to add a gap um I mean I think that would fix it I don't know that that's the issue but it probably would would solve the problem let's remove let's remove the margin on this guy I'm excited to start working in Washington more okay so now there's a gap in between that's pretty good but not yeah anyways so we've got our lists which with the [Music] um with the items and we've got our friend wish lists on the other side um I think this is a pretty good next step for our uh ultimate goal yeah I agree I think that you know next steps we could add like an add new item or add new wish list from this page or in your friends list dib which items you want and have it show up somewhere I like what we did today because it shows a different way to do it than how he did it before because before I wanted to show off the modal functionality and that's why when you go back to the friend wish list and click on the list it pops up in a modal yeah a very beautiful modal why thank you thank you um so now it's a matter of [Music] um of showing I think the next thing we should try for next episode is going to be showing your dibbed items on this page as well yeah I think so too so that is actually a great stopping point right now um today we went ahead and expanded Upon Our wish Hub application we changed a bit of the functionality uh fixed a couple of things that went wrong when I imported the app from a different version and instance and um had a lot of fun today with some actually scripted data binding when uh we encountered some issues with visual data binding um any final thoughts y'all nope fantastic so here's plug if you want to find out what's brand new what's coming in Washington for UI Builder and workspaces you should come hang out with us next week on Wednesday the 20th of March at 11:00 amm Eastern we're going to be hosting an academy um you can find that out by going to the next experience acmy um I'm going to post a link in the chat actually I'm gonna send the link to Earl on uh slack for him to post in the chat and that's where you're going to be able to learn what's coming new in Washington for UI Builder and um workspaces at 11: a.m. eastern on Wednesday our next episode is actually G to be a super awesome episode where we're gonna have the uh Team for the next experience development tools back on the on the show to talk about what's new in Washington for the Chrome extension and then after that I think ay will be back sometime soon so we can keep working on the wish home application thank you all so much for watching today I hope you had a little bit of fun today we had a I think a very realistic experience of what it's like to develop an UI Builder without Brad as a Lifeline sitting next to you so I hope that everybody enjoyed today's episodes thank you so much for watching and we'll see you next time bye bye bye thank you [Music] Paige [Laughter] I wasn't doing anything par yeah me too thanks [Music] Earl