[Music] [Music] [Music] [Music] [Music] thank you hello and welcome to UNI Builder live this is the show where we try to do things in UI Builder and are sometimes successful uh before we get into it uh let's go ahead and do some introductions hello my name is Maria Gabriella a lot of you may know me as mgopw or Gabby I um forgot to bring something onto the onto the show oh no but I'm on next experience pm and my name is Brad Tilton I am also a product manager on our outbound next experience team I cover lots of products but UI Builder is one of them uh and so yeah we're gonna get into it today and I think Gabby has something special planned uh and I don't think it's turning invisible so I think she's going to come back but she's got something special planned for us today we'll be in uib uh and then I think we'll have some time for questions I see a question in the chat already about getting society and table from the parent tab uh I do actually know how to do that but we can address it if we get there and if not I can post a resource I think we have something published that shows how to do that nice I love The Tiara that's great thank you welcome everybody this is Gabby's birthday Extravaganza month the month where I tried to do something in UI Builder and ideally get minimal help from Brad but we have the Brad Lifeline we get three lifelines y'all we got this we got an F the chat we gotta call a friend and we got ask Brad let's see how many times each of them gets used so I um let's go ahead and share my screen so what we're going to try to do today is we are going to try to make a wish list application so everybody can get me all the gifts that I want we have the blank page here and now the scariest part getting started so you have an experience created already is it a portal or a workspace it's a portal all right and so is this the first page in the EXP or no you probably created it with app engine studio so we've got lots of pages is this going to be the home page yes this is what we're gonna do right now is we're going to find the um we're gonna list out the wish lists first and then when we click on a wish list I want to show all the items on a wish list I thought we had a container there is it's the awesome and then I'm going to add a heading and I am going to select no preset and let's name this Gabby's birth bass travaganza wish list app there we go now what I want to do is I want to add a another container and I'm going to add here a repeater see I completely forgot the name of the of the application we're not we're not doing that we're doing which hub which successor to integration Hub and all the other hubs can you request it'd be great if you could request a new integration Hub spoke with wish Hub or you could push in here listen here that's called scope creep we try to stay away from that where I come from no apologies yeah it's been a while since I've done any sort of delivery work so hard so we're going to create a card and I'm really honestly just setting up all the pretty UI stuff so I can uh postpone creating the data resource for as long as possible but we just hit we just hit it I have to go make it because I need a label so the table so you've selected none on the presets a couple of times I just wanted to talk a little bit about what a preset is so we have a number of components that are built in a way where they have these presets which basically mean that there's a controller which is a kind of data resource where if you say use a preset it's going to automatically pull in um a data resource and so most of the presets that we have right now are form related there will be more you know more components we'll have presets later on but most of them right now are really for building a form and so you know a lot of times you don't actually want that preset and that's where you can go in and tell it hey I want to use a preset just let me do all this stuff myself and don't add a controller thank you I didn't even stop to think about what they did I just was like get out of my way let's go so now I need to make a data resource so I'm going to go to add and I'm going to scroll down to Global what are all these these are all just scoped applications in my organized currently let's say currently they are organized by scoped application uh so searching is probably the best way to find something but Global has all of kind of the SE for the most part and I'm assuming the difference between look up record and Records is that this one will give me everything it returns and this one just stops at the first one yeah they're like super different in functionality on only one letter difference in naming which is kind of problematic but yeah look up records is basically a multi-record search and look up record you give an assist ID and it brings you one back oh interesting so I'm gonna go ahead and select that table there should be a wish list table here and I want to add some Fields now I'm going to click on add to return fields and I want to see my wishlist t and get their photo and I want to get their name too oh I like that it saved my spot there that's nice of it so now I can see here I've got Earl's birthday and I've got Gabby's birthday and we've got all my information here so now in order to use this I'm going to grab this here and click this handy copy button I love the copy button that was a great I think I think that was a Utah thing it took me by surprise it's really nice actually um and now I need to go to the repeater and this is actually really helpful um this setting up repeating components I kept coming back to this while I was trying to learn over and over and over again and um it's it's really helpful because it tells you item.value you know that thing that it looks like every time we hit this point in the video Brad just remembers by Magic it's here for you to remember too yeah we're we're trying to do more and more in product help uh when it comes to UI Builder um so telling you how to do things I use it but this is good feedback if we have any of the uib PMS or our developers on the on the call note this so I put the data array here the results of it and now it tells me this little handy button shows that there's two items which is what I expect so I'm going to go into my heading and this is the fun part now we go and change this to be a data bind there and we're gonna start dot walking now is this always going to be reliable maybe not but I want the photo it's it's always how do I get the photo we got to look at our but it's always good when it autofills for you but it's not Auto filling right now so there are some um there are some places right now uh where the intellisense uh there's kind of a disconnect between what some of our components and data resources spit out in the intellisense that uib can can see it is like something we're actively looking at right now I was actually on like two calls this week where we were talking about it um so but that is just because it doesn't show up in the intellisense doesn't mean that you can't uh like use the thing if that makes sense that makes sense to me so now I'm going to right click which is the new Utah feature and I'm going to add another container another um add a divider and then I want to add another component after this and I want to add a photo we're gonna see if it works right now I want image so there is a question in the chat around um making like the ux page registry more friendly I think so we're in the uh we're in the quiet period right now uh so we can't be very specific about what's happening in the future but Utah or Vancouver EA does come soon uh but we are we are kind of looking at how do we be how can we do more things within uib without having to hit out you know go out to the classic environment to configure things so it's definitely a kind of our long-term goal and strategy to bring more into uib so you're not constantly kicked out of it so I went ahead and added our image and I've got item.value dot wishlist tea Dot reference photo display value I hit save and now let's see if it worked look at that it worked perfect the giant Earl I love it I see nothing wrong with this oh and look it's me [Music] yay we're getting somewhere now I didn't turn Earl that he was gonna be here now I wonder here we go let me see if I do a small size will this you're the one who sent me the high quality image yes I think the size property could oh no it's already small yeah I said it oh no that's card based container I think in the image you can set some stuff oh we have to set the image size because there's a fit that's what it is so you can tell it to scale down or yeah so I guess the image was fill so if you want to do it the fill away you'd have to make the container smaller that's like a jump scare oh nah that's mean Earl I'm always ready these days um let's see let me put uh hard-coded height and let's see what this looks like now there we go perfect so I'm gonna go ahead now and I want uh jessalyn said something earlier uh pretty over functionality and I completely agree the prettier your thing is the less people will notice the functionality is broken um it takes longer at least exactly it takes a little bit longer so now what I'm gonna do is I've got them and I'll worry about uh them spanning the sides later unless I can do something for the repeater oh no I guess we have to do the Styles here there's two ways you can do it so you can turn the repeater into a container where it repeats itself but you already have that card container so I think that'll work maybe what do you what are you trying to do I want them to I just wanted them to be little cards next to each other like horizontal um horizontally I think if you that container to flex if you change the flex direction to horizontal what would it do that oh here it is down a little bit yeah and then you may have to tell the card container to have a width but maybe it'll just work it'd be nice if it just worked look at that it just worked neat perfect so now I guess I've um I've delayed this long enough I I'm gonna have to use one of my chat laugh lines okay guys if I want to make these things clickable what do I do help me out I think I have to do something here with an event but what does a chat I'm not gonna format my hard drive Earl let me grab a magnet real quick and just run it over my laptop a couple times thank you for keeping count Haley okay so let's set up an event oh and it's right here card clicked and then page added perfect I'm glad everybody's everybody's paying attention and that was just a test I totally knew the answer and I just wanted to see if everybody else knew um so I guess let's try a modal I don't think I've ever gotten to mess around with those before what do you think Brad yeah I like modals so first you need to create a modal oh so oh so I can't just add my event right now yes so in uib a modal is um like a modal is a thing that you create and then you fire it somehow okay I think you got that viewport modal because you added a preset component and part of the record page is that modal container so you could yeah you're doing the right thing just adding another one here okay and do I want custom iframe or viewport modal so good question so alert confirm confirm and Destroy are all like standard JavaScript methods where you just kind of tell it what you want in the middle I don't think we want that so custom is basically like you're going to configure this all in uib on your current page so it's if you want this modal to just be on the current page and configure it with what's on the current page you'd use that iframe is obviously it's a knife frame in the modal so if you have like a UI page or something that's not a uib page you want to put in there and then viewport you would put a page collection inside the modal that you could then use in other viewports but custom is generally what I end up doing when I'm creating a modal awesome I wonder if I can there we go so I assume I can put stuff here and the thing with the uh with the custom model is you have to do all the buttons yourself as well so if you want like an okay cancel um you have to add those buttons manually and then tell them what they need to do oh so now I think I need another yeah I need another data resource if I want to look up my items inside of my wish list now what happens if I change the resource ID of a data resource will that break anything let's find out I think it may yay but you may have to rebind it let's see what happens my favorite moment of any episode any show anything I've ever done truly has got to be in lady coding happy hour when we were looking at UI builder for the first time and it was me Ashley page Sharon and we go in there and both Ashley and I are doing something and I hit save and she refreshes and her whole page is gone kind of like our page right now it's gone I remember that was the versioning thing where yeah the versioning thing where we ended up having to go into the record in the background and pull up on another version of the page it was great Ashley's here hey Ashley so yeah it turns out kids everybody watching at home um only one person should be in a uib page at any given moment so you'd avoid weird little things like that that is an important uh an important thing to know uh the way uh the way I wouldn't say their way around that but one thing to think about if you have like a really complicated page you need multiple people on you can use viewports and Page collections um to where we kind of refer to page collections internally as extension points um so it would let let you like uh a page collection is a separate record so somebody could be working on the page collection that just shows up in this one spot on the page and somebody else could be working on the page you're right okay so you know how sometimes you just kind of do things because it makes sense and it works and you never really read what you're copying and pasting so hey look the name is actually in this thing so now the lookup records has gone of course it's going to be broken I do need to update this here you're right yeah so the data binding works by name so with the data resource if you're going to rename it you should rename it right when you create it uh for like components if you're going to rename a component you really only need to rename the label not the ID because you never refer to components by ID but yeah data resources you should rename them immediately I wish that was more kind of like in um float a sign or where everything's an app pill yes um so let's go back into oh no wait we need to go to our data resource now so I want this one to be look up items don't worry when I'm driving we will rename our data resources we're not just gonna Brad it up up in here they rename them but not actually do it future Brad I hate that guy beat your Brad's problem but now man this is a wonderfully named table whoever named this table is uh something else I run into that every now and then too like why did I name a table with the most common word and service now do you know your app scope you could just start with that right huh amazing okay so I've got my duct tape my tarp how to get away with murder perfect everything's here um probably have too much stuff though right are you are you gonna get there no filter here on this table so you're pulling everything from everyone's wish list right now oh so then let me see where I would so if you go to edit conditions look at that and I'm gonna do I have wish list is then can I do data here uh you cannot do item.value here because it's not within the repeater or outside of the repeater so if you what you're gonna have to do is you're going to need to use a client State parameter somewhere so when they click on the card you'll take that item.value.sysid of whatever wish list you're on and you'll write that to the card and then you'll take that sysid from the client's day parameter and use it in the conditions to know which which list you're on so the client state is like the pages scratch Pad so you're just you know right now this is like a you know the wish list ID or something like that if you try to use a underscore yeah let's try it oh it's a string it should underscore go away it makes me really uh thank you just for you so is this where I bind the data oh do I find it from the event and there's an event handler where you can set a client State parameter and so on that card click there is an update client State parameter yep oh wow so on this event this has the context of what item you're in right so this event knows where you are in the repeater but once you get outside of this then you don't know so I think you want row data and then like unique value Maybe can I click no I can't click around it is unique yeah it is so client State parameter item.value dot growdata dot meet value add is there any way for me to log that and see if it's working uh you would have to write a client script that uh logs it I would I would just go ahead and try to use it at this point because it's you'll know pretty quickly whether it's working okay so then we have to go back to the modal uh first you have to in your data resource you need to update the condition to look at your client state right thank you so glad you remembered that because um my notes are awfully written and very short that's just somebody who's done this wrong a whole lot of times before I remember how to do it right so I want to do this and will my wait how do I access my client State parameters so backspace and type the ad again and I think it'll give you some choices oh no oh there it is eight ah neat you know actually this does a lot of it for you UI Builder seems really really scary like really scary but it does a lot of it for you if you just remember to erase the app button um okay I've got a condition another thing I would do here and if this is going to work either way but if you scroll up in the config panel there's when to evaluate this data resource and so when it's immediately it'll get evaluated on page load and anytime there are other events that might trigger all of these data resources that are eager to get evaluated and then anytime any property changes it'll get evaluated and I would change it to invoked explicit and this so now when you want this data you just tell it that now I want this data and this is the only time it'll make that server call so it probably doesn't really matter on this page but there are Pages where that that does really matter because maybe you're pulling a whole lot of data back and you don't want to pull a whole lot of data back a bunch of times make sense so now I have looked up my items I am in my modal but I'm not in my container so how do I get my you want your list of items so on the left uh your modal so if you go to the left tree uh where it says custom one yes so I would click on that and rename it so modals don't have a great default naming convention so I would rename that to you know whatever items modal or whatever you want to name it yeah the ID doesn't matter quite as much and then that body one is the middle section if you want to add something in the middle and so let's do the heading first I want this to be the name of my wish list yeah so where is that currently stored I think that is that's so that's data it's not going to work right now but because uh because you're the data resources that's returning this doesn't know uh which right which one it's returning yet so do I need another client State parameter for this heading no so if you go so it'll that so if you do data dot uh what is it data the data resource name I don't know why that's not working but do the use use my favorite copy button oh that's but then how do we go to go to look up items data resource and then do the copy there oh but it doesn't have the name of the one that you select yeah it doesn't have the one that I selected it isn't like is there is a client State parameter right yeah so you you could do this a couple of ways one of them would be just to add um the return Fields just add like the that reference field that's referencing from the item to the wish list there's like a wish list name reference field you could add that to this data resource or you could use a client State parameter and just write to the client State parameter oh I see so let's go ahead and add the field then yeah yeah so wish list and then name and then now you also need to add no you already have you already have name there awesome so now it's item or it's a context it's uh data beta uh results Dot I think you have to do oh yeah you can go so go results and then zero and then because they're all going to be the same what does zero do it just Returns the first element in there and the array because you do the zero I can't remember whether it's uh whether you need brackets well yeah [Music] I can test that while you've done this um and then I'm going to do wishlist dot display value I'm going to hit save page test is just zero my results zero Dot I think we need uh wish list in there oh but we're not going to get anything because we haven't even done the event yet huh so back to the card back to this it's another event handler right yes and then here let me see if modal just shows here we go we still see your rendered page gasp thank you so you want open or close modal dialogue oh okay and then you want to toggle that to open which I always forget to do and then go to the modal drop down and then you just yep and that's it awesome so I'm gonna hit add I'm gonna hit save we're gonna actually share this tab now we're going to hit refresh going through it like this is really making a lot of sense but when I click nothing happens how do I troubleshoot this can I log anything yeah it doesn't look clickable it doesn't even look like the card is clickable period um go back so card clicked I don't know that that event is generating when you click we might have to add a button that you click on oh so I I my theory is that this uh event is not getting generated we could write a client script in console log it I just don't think that client script is going to fire I can't just copy the event handlers can I no you cannot let me look up that real quick so I'm going to add in opener close modal I'm going to select my items list it's defined on the card based container component no way I did not forget to do that hang on Haley I did not okay I didn't I didn't forget to do that man y'all got no faith but I don't blame you I do want to update client parameter oh on the button okay no thank you all uh uh you had it um the cat got me distracted um yeah and then this was item Dot uh hold on go back to the card based container and go to config sure oh is there a clickable it's clickable thing I think is there is there it is correction yeah [Music] yeah you know how I found that in the component documentation so the documentation there we go all right it worked halfway to get the modal to open we got the modal oh you know what we have to do go back to uib we have to tell the data resource to go fetch uh fetch data oh is that also an event handler it is um yeah if you click the X and then just scroll all the way down to the bottom yeah oh here it is that's all you need so it just has a refresh event and all you're telling it to do is refresh okay it's data selecting the wish list and then we're looking up the items and the condition has selected wish list so let's try it yes John it's because we set it to explicitly I believe uh mostly yes did we put anything in there do it again and then let it sit for a couple of seconds because the order we did it in is a little all right that's probably done and we do have a header in here data Dot lookup items dot results let's just do results so what Let's do let's just add the client State parameter here just to make sure that we're setting that correctly so do yeah awesome okay so we did get that all right click on the other one to make sure they're different they are awesome so that looks right so it's really the whatever the string to get the uh the dot walking uh oh I think it's because I've forgot name [Laughter] hang on that was it but no hang on I want the wishlist name yeah we're still looking at your runtime page ah thank you see this is why we need good people on the on these types of things uh it was actually a page that uh oh I don't want to thank her all right well you're welcome thank you Brad I wish that display value I think it's probably oh display value yeah it works oh that's right because it's nuib these data resources will just like if you don't specify anything it'll just go get some records so you can use it as I really appreciate these previews like you wouldn't believe I love that yeah so now I want to do a repeater or is there can I use a list uh you you can use a list should I use the least a list oh my God my accent it really so this is a good question use whether you want to use a list or a repeater really depends on what you want to do inside of it and how you want it to look so if you use like a simple list it's going to look like a servicenow workspace list but if you want more control over how it's going to look visually you might want to use a repeater and especially if you're just going to like if you wanted to use cards or or you know have it look a lot different then a repeater might be the right way to go but a list is probably an easier way to do it right but I need the pictures to show up so I want to do a repeater your pictures are not going to show I would believe that so okay I have another repeater wait where okay there it is a repeater and then I want a card then inside the card I want image and now I'm gonna go and remove I do wish didn't it used to ask you if you wanted a preset before yeah um I don't know why it's not doing that here okay so image so now I can do item dot value data oh you need to tell your data resource oh I gotta tell my repeater what I don't think you're getting any images from your wish list right now I'm not do you have an image for each item in the wish list I have an image for each item yes so you're uh yeah this data resource that's grabbing items you need to tell it that you want that image field I do I do really like how uib handles images because so you've grabbed these things and that image component all it needs is that display value of the image field and it'll display the image so it's kind of a nice way to show images so I think so if I set any return Fields it only returns those fields yes Oh I thought it was in addition to what it already returned gotcha it's always going to return whatever the display value is and the sys ID and then after that so if there's like a I think if you don't specify any Fields it returns whatever the display field is on the on the record now it's at item dot Valley or is it beta data uh yeah there we go should do that automatically when you're here yeah the lookup items that results uh zero dot image Dot display value right because that's the one that has the there we go duct tape fantastic and now I want to add a heading here too I want oops I do have some questions about the items in your wish list what do you what whatever do you mean let's take a look at my wish list here in a second and see if you still have those concerns [Music] um so I need the I didn't say concerns I just said questions about this play value okay and I want my heading to be above the image I can't drag and drop oh you can't drag and drop in a modal it's what I found this out the other day actually I I had no idea so you can sort of drag and drop uh in the preview pane in the middle so if you close out the data resource panel uh I think you'll be able to to change them if you yeah take that and just pull it up oh thank goodness so but the content tree doesn't support drag and drop within the modal that's a good I meant to ask somebody why that was and I forgot so I'm gonna take a note of it okay so now we've got this you know what I wonder if I can make my card base size small now here's the question can I change the size of my modal itself I can yeah there you go wow that's amazing I can't tell you how many times customers have asked me to do that you know and it just makes me cry fantastic so now let's see what things look like here and so a quick uh I don't know that we've actually mentioned but in a repeater we only show the first item in UI Builder and that's mostly for performance reasons uh because if you have like 50 items you know UI Builders a lot heavier than the actual runtime is so we're only showing the first item um now let's see what happens now he shouldn't have any items well so this is right oh so many duct tapes so many duct tapes why are there all these duct tapes let's go look is it because I hard-coded the Ciro oh how did you do the zero I didn't even catch that I did the C Romo yeah so for this this is item that value I may have I may have said not to do item.value here now that I'm okay that's what I thought this is on me this one's me okay so we're inside another repeater now yes that's why I kept going back to it I don't think you need results there we go [Laughter] sorry awesome so now let's see I promise guys it's not all duct tape and hang on first I want to figure out why my repeater oh you so no this has to be like this and it's the repeater that I have to change the style of enable Styles yep and do this or you can make a grid it really works the grid you tell it how many columns you want it to have oh cool and then you can just put one for row and it'll repeat it'll repeat awesome so I want to do that with that one and then I want to do the same thing here with this repeater wow shots fired from Greg in the chat we'll take it oh dang okay so now let's see how things are looking perfect beautiful there we go there we go my birthday wish list now I understand perfect see everything's normal it's a bounce house so now wow this is actually perfectly timed to be a good stopping point fantastic I don't know what you're talking about Earl we can uh if you go back to uib and add we should add a gap in between the repeater uh both the repeaters if you just click on repeater and then in it gets in the config right um oh no you have oh no that's it oh okay you guys are seeing it cool I thought for a second I wasn't sharing there we go look at that this looks amazing so professional fantastic yeah I heard I hear pig farms are great this time of year um awesome so next episode now um something important to know is that these shows are now officially scheduled on the second and fourth uh Thursday of every month so next episode is going to be on Thursday July 27th and we're gonna have part two of The Gabby birthday stravaganza event where I continue to try to do things now what was the total of today um my favorite part is that I didn't announce every time I was using a brad Lifeline so y'all probably don't know the real count if anyone wants a count you should put it in the comments once the VOD goes up um I don't know how many lifelines you use I just butted in a lot so that was whether it was necessary or not and sometimes incorrectly yeah that was great I didn't realize you were gonna get sabotaged from Brad of all people yeah sorry so Thursdays the the second and fourth Thursday of every month is going to be you and I Builder live and remember the third Wednesday of every month is our next experience Academy um this is basically the schedule for our monthly shows and uh the next experience Academy is a little bit less technical it doesn't go as in-depth but it's a great place to learn new Concepts and this months is being led by Brad it's going to be tons of fun this one will be a little bit more technical we're gonna do UI Builder and workspaces tips and tricks so lots of little things and here's how you do a little thing in UI Builder and we may do uh we had that question about um what was it from the beginning about uh oh yeah how do you get uh um basically properties from a parent page into a sub page uh page collection so there you go you got one viewer yeah uh so yeah I think are we are we are we good are we done yeah next time um next you and I Builder live you have uh something fun to look forward to let's see if I can figure out how to make a uh a dibbing system so people can div what items they want to give me for my birthday nice and then I have no idea I'm sure once we pass Gabby's birthday month and we get into August uh we will start doing some Vancouver stuff so that'll be that'll be good there's some exciting things in Vancouver that uh we're we'll be ready to show off that sounds like a great idea we should do this every year perfect of the birthday month and then the release month so yes um do you want to do go ahead go ahead and do the closing too since you did the opening all right sounds good we didn't talk about the closing before so yeah yeah we did it all right thanks everybody for joining uh next experience Academy will be next Wednesday at 10 A.M Central and then two weeks from now same time we will do another you when I build her live thanks everybody for joining us and happy birthday month to Gabby and we'll see in a couple of weeks bye thank you [Music] [Music] thank you