[Music] [Applause] [Music] [Music] n [Music] [Music] [Music] hello everyone and welcome to the oops All Guest episode of you and I Builder live I have commandeered the host position I'm Sarah Tolson uh developer designer service now uh and with me today are JN Smith carlen Carter and eony abla so uh kicking it off uh jessyn you're the one in the box next to me so why don't you introduce yourself yeah hey everyone I'm jeline I'm a service now MVP service now developer and now I'm a UI Builder hey everybody my name is Ebony a Kea like a Kea cookie or a Kea elf and I am a product owner for KPMG so pretty much what I do is manage the service catalog and virtual agent and um also love to develop from time to time too I'm Carr lean Carter uh I am a principal architect at Serenity um but we're uh um we're relatively new startup so I wear a lot of different hats do a lot of different things okay and today jine you're going to be driving and we're going to be throwing stuff at you while you drive uh we are going to attempt to add on to the functionality of what uh uh the regular host have been building for the I hungry app correct you and I hungry you and I hungry I just like I hungry okay oh we're starting now okay so what are we trying to build here Sarah or car or eony well so we were thinking through kind of like what what could we add to the existing um infrastructure I guess existing architecture and we thought uh you know as I was looking through the items on the list if I only bought one yogurt from HB for my girls I would have to then go back to the store before I was actually uh wanting to go back to the store so we thought we would be able to maybe add a quantity field so we could indicate that you needed to get more than one um and also potentially a notes field to let people display their preferences like I only want this brand or I only you know this flavor or yeah this flavor don't give me strawberry get me the chocolate kind or you know something of something of that name so we're allowing a little bit more personalization as you add it to the list great okay so I've started out with just duplicating the variant because we don't want to mess anything up from the last episode and then starting out we did make a couple of changes to the table we added a quantity field and that notes field that c was just talking about so let's see here if we want to actually show in the grocery list how many items items we have we are going to expand here from two columns to three and then we'll add another stylized text just for reference because we hope that you guys all know how to create fields on forms we did that beforehand we created the new quantity field and uh we created the the notes Fields as well so we wouldn't bore you with those those minor configuration pieces and why exactly the stylized text feeli the stylized text thing is there something uh no logic just following on to the best component in your ey Builder unless you want to do something else all right so I have a question for you ladies for those that are completely new to UI Builder can you explain what a variant is and how that helps with using UI Builder uh the tough questions sry yeah so let me go back so a variant this is it helps you control like which audience a page or which page an audience will see right so each uh variant has its own conditions so uh let's take like this one so like there's no conditions here so anyone would see this page but if we added a condition to say only people like this role or maybe if we had a URL parameter like only the incident table then if you meet those conditions and you'd see that version of the page versus a different version of the page we use this we use this in our store app so each Persona like manager admin user gets a different homepage because they' be focused on different items as soon as they logged in so um the manager would not necessarily I mean they probably would want to see the things that were assigned to them but they would also want to see the things that were assigned to all of the people that they were trying to manage and other metrics and and things of that of that nature as well but users probably mostly focus on a here's your work let's get it done and get it out of the out of the way off the list yep I I think for this in this app it's not like super relevant we're just doing it so we can have our own copy of the page without impacting the original version yeah yes so going back to the grocery list did it save my changes we do have a question in the chat and I hope I'm pronouncing your name is it an could you please show us how to configure the node map component for any table exclamation point I don't think we're going to do that today but we will definitely take notes and uh send that one back to uh Brad and Gabby for next time um unfortunately I don't think that our application has the relationships between um the the multiple things to be able to actually do justice to that component yeah so what I'm doing now uh sorry to interrupt on the data resource we want to return the quantity because we were only returning the name before so we want to make sure we have that that looks like drag and drop and from there you can like adjust the order that they return in oh yep MH okay and then here so I just duplicate styze text two to make sty text three and then we want to change this to quantity and then I always mess this up make sure you either double click or hit the up Arrow so it actually saves up here so you you should be able to see it up there yeah oops quantity there we go why is that quantity there we go okay so we have 75 hot dogs on our list we're having a party and then I mean the Fourth of July is coming up exactly that's true uh what we're doing next here we want to actually add buttons to each item right so then you click a button it'll pop up a modal and then you can add that information yes okay okay so that way if you just want to add it and you don't necessarily want to add all the additional information you don't have to go through the extra modal but then it's there if you need it you have any users choices that's always good any preference on what kind of button you want to add I like the one with star on it I have no idea what stap um I was when I was kind of playing around with different things before I was just using a regular button and I didn't have any text on it just the icon but let's try that one okay so we'll do like an editing icon I guess pencil pencil there you go are you doing the quantity first or the uh I think the modal should show both of them at once so just I mean like one are you configuring right now quanti oh then maybe um yeah ear okay sorry um picking an icon is the hardest part sometimes this one and I'm just selecting different styling options so just for those that may not know exactly what's going on can you explain um you know what these pretty much do because I remember once upon a time when I was trying to learn this stuff it was com completely foreign to me so if there was someone that was jumping in brand spanking new and wanted to know more about youi Builder how would you explain this component visibility and how it helps out overall the component visibility you can tie you can just turn it on or off so you can either hide it or show it but then you can also tie it to um conditions like if this value is empty or if this thing has already been added to the list then we might disable it um one thing that I know uh is always confusing for me is it's always to to me it's backwards um if you want to hide it you need to set that component visibility to True um instead of to me hiding something it should be false and showing it should be true so that that always gets me that's a really important distinction that's really odd too we have so anyone know why on the preview the button is here but when I actually look at the page I'm not seeing the button is this a zoom issue if I no okay um I am G to ask you to do one thing from a visibility standpoint can you unpin the history oh yes it's not not gonna solve the problem that you're having right now but it is showing up in the UI Builder which is different than uh ver previous versions it wasn't always showing that frame set before um so I think when you go back we might have to refresh after your next save but okay that's a good point I'm sorry I'm laughing at my brother is brother in the chates that t to be a good method with UI Builder wi and doubt save refresh yes um as we were kind of playing around with some of the the data Brokers ahead of time or not ahead of time well yes it was ahead of ahead of our live here um we ended up having to refresh the whole screen in order to get some of them to kind of like understand the changes that we made so saving and refreshing I do that a lot even though it's a lot of resources to refresh and then whenever you're stuck on something it's always helpful to kind of read the tool tips and the documentation that's on the page okay well maybe it'll just show up once we start moving forward so let's make a modal we're going to do a custom model you can just pick different ones right from there that's cool yes and then we're going to have an input in the type where it says type text that's where I picked number okay yeah number and then quantity is there there should be a label somewhere I think there it is yeah yep you know accessibility we want to label our inputs okay and now we need a different field for the notes so is there I think there is a text a text area our field uh look for look for input again I remember seeing something oh here we go text oh it didn't have a space that's why when you type text space area I couldn't find it yes let me I will say though that our I can't increase them very easily but uh our notes uh fields in the background are only 255 characters right now um so it's it's possible that data might that gets entered in there might be truncated make it yellow yellow okay it's nice sunny color okay and then this one will be notes okay so far so good um I guess we'll have a header actually to label label our model here ah thanks CLA should we make the label the name of the item when we click on it or should we just say that's a little bit more complicated actually but you know we'll leave it for now okay maybe like additional what did you what did you label it how about just add item for add item okay oh we're we're overlaying my face with the chat that's okay okay so now we have we have a skeleton of a modal we need a button to save hang on button and then does it automatically like close the modal if you click out of it or would we need a yeah there's a little destroy X yes but we actually need something to execute the create save use the floppy disc that yeah okay just trying to add a little fanciness there okay so the intention here is you click on an item it'll pop up in this modal and then you can add the quantity and the notes to the record on the table in the back end and then it should display in the list yes right so then once you add it to the list like see how it has hot dogs and 75 if you add a quantity then it should show in that second column on the grocery list so we need to go here in the events so this is where we kind of ran into issues like preparing beforehand so we're going to try to open the modal with adding an event handler on the card clicked event don't we need to add it on the button we need to add it when you click the button instead because that's where it is right now right it's on the card if you click the card then it's gonna added yes good point we'll remove it from there eventually but okay you're right not yet we don't want to delete it until we absolutely have to thank you that's a good catch so we're going to click this to open the dialogue and then okay we should okay best practice like rename your modals but we don't do that here you just don't follow okay we happens I asked a question not too long ago about uh those that are watching what they might have built using UI Builder and Stefan said I've recently migrated from well my ated Legacy to configurable workspaces and one of the projects that they're working on is uh tools to add to the Arsenal so that's fantastic it's definitely a a new learning experience um it's like when service portal first came out and you needed like a completely different skill set and actually it's a little bit more of a mindset you know more more Graphics um More Design minded uh to be able to kind of generate these experiences that look good and are also functional okay I found a new issue um our quantity is not showing up on the grocery list either so the button's not showing up and the quantity is not showing up uh how would you go about de bugging when you made your variant did the order yes no that's yes no okay yes you're not developing you're not developing right unless you break something I set it to a negative number so we don't edit the original um so the original is set at order zero and we're just going to over Go full boore there negative 1,000 love it yes that is a good point about variant so the order whichever one is like the highest is the one or the lowest right one you'll see so it evaluates in number order so negative higher would be evaluated first but then it looks at the conditions and so if we had conditions we don't have any conditions here but if we had conditions and our we did not as a user meet the conditions for negative 1000 then we would go to the next one which is zero and then if we met the conditions for that that's the one that we would see so it's kind of a complex so the order then if somebody meets the conditions for two they would meet the one that is it the the the highest level in the order the lowest so it yeah yeah I know we kind of confused you confused everybody with the negative 1,000 which is technically the lowest number in in our variance there but um it it evaluates in order number and it the first one that you match that's the one that you're going to get so you really don't want to have any variance at the same order because then it's kind of a crapshoot as to which one that you might get it's probably not a crapshoot it might be like oh whichever one was created first or whatever ordering SEC secondary ordering that it's using um but you want to make sure that you are using distinct order numbers and also that you that your conditions are ordered in a way of if somebody's going to match some if somebody's going to end up matching multiple conditions that the one that you want them to see is the one that's going to be the lower in the order that's really cool because it allows you to really differentiate the experience for different groups and if somebody falls into multiple groups they still get the best uh the best situated version for what they need yeah yeah everything works now so it was the variant so catch with that um that's something I think about too like the preview it automatically shows you which variant you're on I think that was like a recentish change I don't remember which update but the preview already gives you the right variant so but the actual like open yl path won't it'll go based off of those conditions and ordering so our modal works now so that's good yay so now actually build out updating it and then adding it to the list and seeing that because if we just like put a number in here like we want 10 yogurt save and then try to add it it's still going to say one because it didn't actually make those changes so we'll start with that well why you're doing that I just wanted to go through the chat and show off some really cool stuff that's being built in UI Builder so there's Claire she said I went through the uib training on the developer site like a year ago but wanting to get back into it we've got a dashboard for some tier two folks that I think may work nicer as a workspace and classic reporting is um going to be going away in zich at least that's what I heard at knowledge um so moving that to uh platform analytics and displaying that in a workspace dashboard definitely is the way to go and and some folks will have will be forced into doing that um come the version Z so I think we need a new data resource for this right we need to have an update record data resource if you look at the event handler that is for the card click there is actually one that they used um that doesn't um unless that's what you clicked on so they have one to create a list item we need one that's going to update because uh the list item itself is where we have the quantity and notes on it right yeah so we need to create a new so the the cards represent what what's available the list item is where we have the quantity okay so yeah then we do need to do this I think so we'll rename this to update list item on says oh I've been using you I builder for the last one and a half years and have built more than five applications I've explored several components and have built mostly finance and banking applications is that for more so for your job or for your own personal project and DJ said that they're building out a calendar page using the calendar component to show ass s test that's pretty cool is DJ's from Serenity he's he's our UI Builder extraordinaire what's the uh the table name here is there an easy way to get the actual uh yes go back to your app engine studio and then uh go back to data and then on the top right next to the save button the three dots do properties and then you should be able that's how I grabbed it before nice okay so we want to update the item on this table and then for the CIS ID we need I don't think we have a way of getting that when we so I was thinking about that before we started what if we added a couple client State parameters and as you clicked on that button it updated the selected item yeah that makes sense and you could also do one for the selected item name and then you could use that where you were talking about using that name as the header of the the model okay so this will store when we click on a card in our list it's going to store the CIS ID of that item and then so what we have to do for that that is probably on this button stateful we're going to add an event to update the client State parameter M we'll select the one we just made and then this will be from the repeater so in the repeater we're going to use this new pill View and we want to get row data and then the unique value right here and this will give us the Sid of that list item okay so now every time we click this button we have the ID so then going back to the modal on the save button when we try to update the item we want to be updating from that client State the selected item and then data what is this because we want to update the quantity field and then the notes field with the inputs from the model I haven't used the update record data resource though so how do you like specify what we actually update um so normally I use the I use update ones that are you know custom or scripted behind the scenes but I do think that if you use that other event handler it was like a um go back to the oh actually let me just go see yes so on the data resource let me look back I guess we'll look at the documentation again um oh well that's what we need so we have a create list [Music] item we have a create list item uh data resource already right we want to update an existing one right no because we haven't added so the things that remember the things that are on the left are the things that have not been added to the list yet oh okay so we need to go back okay this needs to not be a thing so we don't actually need this then because the the record's not created yet yeah I think if we added a button on the list on the right that's when when would we would need an update one okay okay so going back then we need to move the um I think you're in the right place if you do that where on the right hand side if you're in the ad event handler yeah you would add one just like this and see how the edit feed field values is is just like a condition Builder okay yeah so we add one of these to that button and also make it grab that quantity and the not okay is there is there a duplicate event I don't think so we no you can't even reorder them okay it's okay we can do it from scratch so we need to do the create list item I need the name of the table again oh we don't even need that CIS ID then from what we just selected do we because or wait we do because we're going from we're so the old one is going from a card that holds the item Row in the repeater we're going from there to okay then to the create list item so you you'll have to use that the client State again so I'm just copying what was done on the old version oh you're right the item is the selected item okay so we do still need that yes gotcha okay and then we want to do quantity we need to store client State parameters for the quantity and notes okay because we don't have access to that in this so let me do that this will be a number and then we'll add one for the notes okay so then on the input we need to add an event to set that client State parameter when the value is set I believe oh this is so nice seeing the event payload right here I remember like before this I'd always do like a script to log out what the names were so we want the value okay and then we need one for the notes yeah but you need it on the other on the other um input yes you're right okay on the text area probably when input or value set probably value set So eventually they're going to have to click the save button and that would be the focus leaving the area um I think I mean in this particular app the amount of data that they're going to be putting into this text area is probably minimal but if you are just constantly setting it every key press or every um uh Delete or anything like that they're we're not getting any value from that um and it might cause the page not to be very performant okay we'll just try it like this and see what happens okay so now we have the input and the notes saved so then going back to the button we can finish uh editing that so the quantity here will be the quantity and then the notes will be the notes client State we may not get to it here um keep going on what you're doing jesselyn but we uh because we're setting those to a client State and we may end up you know going opening up the form and setting a quantity for one thing but not adding notes in that case the notes from the previous item would still probably be sticky in the client state so you'd want to like clear everything out on the like if you destroyed um the modal like if you click the X on the top right of the model do a update client State parameter to empty again and then probably also after you did uh the create list item so that way it's always empty whenever you um go to bring up that modal again without there is the possibility that the um the notes could carry over from one thing to the next or is it just the way it would display yeah I think um if you set like a value of the quantity to one um and always had it start at one so that the people you know wouldn't have to change that every time that one probably would just be okay um but the notes yeah the notes would defitely have the um so you might end up with hot dog notes on lettuce and then it wouldn't make very much sense for Your Shopper yeah so we hit save oh okay something happened well we created something that it looks like it has no um item IDE or item let me go look in the back and see what it added hey it got the quantity that's a win yeah got part of it I think uh okay if I click the actual card itself that still works so I'm guessing on here we're not actually setting the item oh I think let me look back at what they did did you um did you add I just realized I was talking to myself I remember I remember you added a a client State parameter for the selected item id but did you add something when that button was clicked I can't remember I think you did so when the button is clicked are you updating the selected item id client State parameter yes so right here is where we're doing that selected item okay oh I think this the CIS IDs are different though um oh you're right okay so is it um is it the CIS ID of the so remember they have the items table that holds all the items that could ever be selected and then the available items table is just the table of things that haven't been added to the current grocery list we might be getting the wrong ID you need to get the available items items CIS ID yeah that totally makes sense can we bring I'm so glad I noticed that because I knew that that separation of that data was gonna DP me up is there like an [Music] available maybe list or wait what's in list NOP go back to your um where you're updating the selected item id client State parameter yes we need to change this here so instead of so look at the available item what's in there under the oh you're available okay it should be this one you're right okay yeah so yeah okay apply save and let's go back I don't feel like new guest episode tagline is the right description there Earl I think that's just a regular episode tagline any no matter who the hosts are no I think what uh what Gabby said in the last episode was where sometimes it works and sometimes it doesn't so okay it's working now there we go 100 bananas though what are we making banana pudding yes okay so now we what we should do is yeah once we hit save let's close the mold and then uh reset everything back to empty for those client State parameters I think banana pudding was one of those things that IAD that I put in for the hackathon I was saying uh remember the hackathon a couple years ago where uh we had to to do the recipe database app not sure if anyone participated in that but I put the Nacho Mama's Banana Pudding on there's one of the recipes really really good by the way I don't know if it's still up but go ahead sorry I could use I love banana pudding would get some Millow Wafers on the list if we're gonna make banana pudding there you go okay so right here after that list item is created this is where we want to do in this event uh resetting the parameters back to nothing so quantity new value empty and then notes and then we'll show the notes on the list as well because we're not doing that so I guess this should be four columns so this is this design is uh not really designing but it's okay and then we need to update this again to get back the notes so if you notice there is kind of like an empty available item box that's up in the top left there must be some additional logic that I don't think we saw before that takes something off of the available items list when that card is clicked um I can go I'm going to go look for that see if we can find it oh so you can't add the same thing to the list price because we're handling it with our quantity yes don't when you click on the card it removes it from the available items list but when you yeah what is this thing well I could delete it in the background I know I see it right there but looks like there's some logic that we missed uh I'm going to make the grocery list a little bit bigger too you can just drag and drop up here that's so nice maybe okay just to give us a little bit more space on the right side question in a list in service portal you have like your main piece of information then you'll have in smaller text underneath it and like the the muted text color you'll have like additional information is it possible to do that with the approach we've taken yes um what so can you scroll down on the left in your um to the area not in the data Brokers but where we have all the stylized text yeah so what we've done here is we've just basically put everything in the same container as four but like a table four separate columns um because we're inside of the repeater you could actually grab the notes and drag that out of that grp container folder toggle whatever section is and so then that would just sit across the bottom line um below yeah we can do that can I so put it you got to put it back inside the repeater there we go now it's above there you go okay and can you make that like different style text like a paragraph or something like that need to beer and you could like you you can adjust all of the spacing around it to make it a little bit more apparent that it's not just another row that's missing some data that it's actually like a sub item or sub piece of the row above it um all from this that's really cool yeah indented a little bit yeah I'm just increasing the margin we'll do medium so it's a little bit indented now and this is another place so going back to the question that was asked earlier about the um configuration uh what was it the the hiding the hiding and showing which now I don't know why I can't remember that that so because serial doesn't have any notes um the component visibility uh you could tie that to um whether or not that item has notes um and so I think you might have we don't really have the check maybe something here if if it's empty then show it I've not used the formula so if um somehow you'd have to have access to the repeater data which we should um but it doesn't seem like we had when we were over on the um not on the formulas area in the data types it didn't show us the ability to select the repeater um so but this is the place where you could tie visibility of or showing of that or at least spacing around that area um and hide that if there's no notes so that way it's not like taking up a lot of space on the screen you're right it's not showing me the repeater anymore that's which is interesting because we are inside of the repeater when in doubt just refresh your page a bunch that could be that could be it we did see that earlier too no nope um okay well here's a little tool tip or a little hack uh let's let's clear the cash course reload when in doubt from what I've seen there are a number of places where the they have very aggressive caching here in UI Builder I believe and that can talk uh can cause some issues have yall seen that in your working with it yes yes I uh do hard reloads quite a bit these days um there is actually on the cach dodo page if you are familiar with that there's also now a clear browser cache which will force some of those sticky things to reload but I as far as I know please correct me if I wrong it clears everybody's cached stuff so I would not be doing that very frequently you're not supposed to clear cash in production very frequently anyway um especially during business hours but I wouldn't do the browser cache uh piece very often either it's still not showing up but let's just try it anyways we'll do if item. value. notes oh now wait what the heck okay that kind of looks like it's doing that so we want to do if this is empty then we hide it I guess if the length is zero is that a better way of checking for empty here con comparison okay here we go empty so if this is empty then hide is true okay I think that worked I can't but um I don't see the preview we lost cereal I think yeah I don't know the idea is there can you can instead of um instead of like can you just wipe all of that out and type something in there I haven't used this new data pill picker I mean like the entire thing the entire formula yeah I can't it won't let me just like oh maybe if you switch back to data types or something can I just undo a bunch until we get to nothing no there we go okay so we're fully empty again add data to this output area maybe it's not working because it's still not recognizing that we're in the repeater let's see if I let me just try adding it without copying because I know you said before copying could kind of mess things up a bit I have seen some stuff that uh if you copy components that they just don't behave I think that went outside of the ah you're right can you add something after the grid container yes or yeah something if some component is just not working the way that you would expect it to and um you can't figure out why everything set up exactly the same I would start fresh with an adding a new component instead of copying it there's the repeater maybe it doesn't well maybe it doesn't work for component visibility oh maybe it doesn't but can you well that doesn't make sense maybe that's like a limitation DJ asked a good question any way to toggle back to the old data binding experience that's what I was gonna oh what's that little um the car the um less greater than less than uh right next like two over from the destroy X not that one so well this is for the text itself yeah I'm not sure what I'm doing here um I'm going to go back to say api. item. value okay okay my my UI Builder is doing that thing where like you see that cursor jump hang on let me just close out and go back in this is haunted yeah the arrow keys I'm trying to like we haven't had the whole thing crashed I probably just jinxed it but I'm smashing my keyboard and nothing's typing try the Konami Code see if that works see this is just a sign don't script because your keyboard's GNA stop you Let me refresh my page I think it's okay to define the text with the repeater but we wanted to do the hiding yeah okay yeah we're back here so let me close all this again okay so in the script okay so what was the chat a you well this doesn't give us the notes field right here it is is equal to empty well I'm wondering if maybe the component visibility doesn't work in a repeater if it's not even letting us like autocomplete the item it might not is the art browser your favorite browser stuff on I use Baldi and I can't separate myself from it yeah I am now looking this up and I'm like oh this is cool well why don't is there um was there anything else if you wanted to just not hide that component we can leave the space in it's always something that we can tell Brad and Gabby to fix next time uh is there anything else that you wanted to do because we are getting close to the end here I think you need to leave some like comments in there for them some Cliffhangers yeah yeah uh I can't click the okay so cancel out of this yes click the pencil and then yeah there we go yeah so what what fun thing can we add in five minutes there needs to be an emoji somewhere like put a banana emoji on the banana item or something can we do that I don't know if it it will let you have a an emoji I think the easiest way would be from the table add the banana Emoji but we never fixed this bug but that's okay it's at the bottom anyways oh yeah I forgot to look for that well I think uh we mainly accomplished what we wanted wa Let's test it one more time CU we haven't tested in a while oh look at that where did wait was that always there or is that you you'll never know I I added that one okay there we go we hit save it closed the modal added the note there we go so they'll when they when when our hosts decide to come back from wherever they have gone um they'll have an app that does uh one more thing 77,000 wow a lot of pizza I'm very hungry that's why look at that all right with that are we like are we ready to close a few minutes early I think we might be I think we accomplished our goal so I feel pretty happy I yeah I agree all right ladies it has been a pleasure um we wanna uh jeline and carlen y'all did most of the heavy lifting you want to uh do a little uh review of exactly what went into the features that you built you don't okay I'll do it added a button we addon we added a button that brought up a modal to allow you to put some more personalization adding quantity and notes on the modal and um uh the the card click just does the quick ad but you could switch that to another little button if you wanted to um and then we edited the grocery list to make it a little bit bigger and show the notes in the quantity that has been requested and um we used a lot of the components that were already there we didn't do too much messing around with the data Brokers we just added some additional elements to grab so that it would display the the details I think that's good has a shout out did you see it did I what yeah oh oh hi Steve how's it going awesome well um I think we're ready Earl you can cue the curtains and the music thank you everyone for joining us today see you thank you bye you guys a [Music] [Music] sh