[Music] thank you [Music] [Music] thank you foreign Builder live uh the show where we didn't figure out who was going to speak today first and with me today is Brad I don't know I have Echo I don't hear any Echo but my name's Brad I am a am with the next experience team here at servicenow yeah we didn't really practice how we were going to start this thing but it's all right and I had it running in the background so I kept hearing us talk that was very awful so welcome everybody today um we are going to drink some coffee at 4 pm in the afternoon because I'm tired and do some UI builder stuff so let's go ahead and share my screen last week we left off with a excuse me producer can we share my thank you oh man you can't get good help these days um so we ended up with a really awesome and functional list of groceries um and today we're going to turn this into an immersive oh I apparently forgot to introduce myself so hi nice to meet you my name is Maria Gabriella a lot of you may know me as MGO PW on the community I am an outbound product manager I've been in the community for five years and I have uh done a bunch of portal development so getting into this role and doing next experience stuff has been a really fun fun place for me to learn um and today we're gonna do a little bit of uh CSS and UI Builder so this is what we have it is a perfectly functioning application and it is awesome but we're gonna turn it into a 3D immersive visual experience for Brad's kids you know the the youngins they may not know how to read yet but they still want to request things so we're going to get this going so uh we're going to and I'm gonna share this tab we're going to get started with changing up how this button works so this is my first time driving anything in UI Builder so Brad if there's cool stuff that you want to point out uh feel free to interrupt me at any time something that I did since the last time that we were here is I added this image uh field to this data resource that Brad started and now that is being sent over so I'm going to click configure ad component after and I'm going to look for an image component so I hate to throw a wrench in things you're good but this is actually a different page than the one we worked on last time I don't know that it's a big deal at all uh but this is an early version of a page there's actually another page which is the one we worked on that moves the stuff over I think it's called uh maybe that page didn't make it into the repo uh fridge view I think is what we that there it is it's fridge view you're right which okay we can play with either of the pages they're basically the same no this is perfect I think this one does the thing let's test this and just show what it does yes and this is great because I didn't want to tell you that some of your buttons broke um but some of them broke but it makes sense now that I know it's the wrong one we can add milk yeah so this this is uh uh you know the story behind this we've you know you already mentioned it but basically uh what we're doing is we want to we want it to be really easy for somebody to add something to the shopping list and so this page lets them click on a thing and then it gets grayed out so they can add it a bunch of times and then it goes on the shopping list on the right which is our beautiful tiny text thing that we came up with beautiful tiny text okay so now that I'm on the right page thank you Brad I am going to get into our repeater number one is for our fridge View so I'm going to rename this to fridge view so I don't get confused I love it anytime you can rename the component it's a good thing and then this one I'm going to rename it to list View well no I want to rename the repeater we could just call it like shopping list okie dokie why let me edit you there we go so back to the button um we're just going to apply some basic styling here [Music] um I want it to be Center aligned I want the background to be our primary color because it's pretty I want the color if you go to config oh uh you go to edit CSS and that'll actually let you edit the internal part of this component so that Styles tab you're basically editing the container of the component and then some of the components will let you style the inside of them so yeah that's what I was actually going to ask you about here in a little bit because when I was looking stuff up I got confused about the styling of a repeater um but we will get there um in a second first I'm gonna hit save and cool we've got our look updated so that's a little bit better so what I want to do here so I'm gonna add some padding and now we're going to go here what is the way that I should add a component here because I've got add before and after but I want to add it inside of here oh I should just do that yeah I pretty much always use the content tree to add my components in there it's so much so nice so I'm going to first Skip and look at this stock image but that's not who I want to see so image source I'm going to go to first change this to this little bind data button I'm going to do at item dot value dot image boom we got a lettuce I wish that I could change the number of items that UI Builder displayed um because you want to see more of them in the repeater exactly that would be so cool now if I I don't know if that's possible it could be can we change the default stock image there we go we got images beautiful beautiful so I'm gonna go in here into my grid into my repeater and I'm going to first I'm going to go into the Container I don't want it to be with 100 percent um I'm gonna do 50 and then my image I want it to have a height of 200 pixels are you doing that right now oh hey we only see thank you I appreciate it so because the way that I'm having to share my screen I can only share them by tab so please keep me keep me uh on top of things because I will forget like I just forgot cool so now something that we need to change here is change this to flex shrink because check out my short little images but ideally if I did Flex shrink uh or not it doesn't that wasn't what I was supposed to click on um want maximum width 100 50 pixels this is the fun part of uh CSS it's like save preview save preview did this work honestly this is this is the the number one thing that I ask people when they tell me is service portal something that I want to do or something I want to get into I ask them how do you feel about repetitive tasks that you feel like you change things but then nothing actually changes over and over and over again for eight hours of your life a day and that usually tells you whether you can do it or not so I am actually going to have a blank label and I'm just going to change this to a star and I'm going to change it to positive primary I think is the one that I liked and now check this out um the way that it looks right now is I have my buttons down here in the bottom corner but I don't want that so I am going to go here and add margin but then I'm going to go into the three dots and I'm going to add oh you know you're going to change her thank you so I'm gonna go here whoops I'm going to click on my button I'm going to add margin and then I'm going to click on my three little dots here and I'm going to go in and customize the properties um if it would let me please there we go and instead of doing the style palette picker where it uses default stuff you can either go here and click on use custom CSS value or you can click edit and I am going to do negative 75 pixels here and then I'm going to do the same thing I'm going to do negative 75 pixels here and what this is letting me do why does that look like it applied to my entire container not just my button yeah that's not good um and then I'm gonna do Flex end for my alignment of my button I'm gonna just do a hard Refresh on this see if it decides to uh cooperate come here button I need you to show up so if I am justifying things Center so that shouldn't have any issues there I've got my image centered and I want my button flexing to the end now let's see what that looks like so doing negative margins is kind of a hacky way to get your images to overlap so now we've got the little favorite button over the image um and then we're going to something that I'm passionate about is always make sure your tool tips make sense so I'm going to put in here add a favorite the tool tip um I'm going to save that and now we're gonna do something fun we are going to go to the body and we're on the other side we're on the runtime again there we go thank you no it's you're good so I am going to go in here into the background you can do a two-way you can click on view and edit CSS here or you can go in here and do a background image instead so I'm going to go ahead and add this and jpeg it it looks kind of weird that you have to include this but this basically makes it so it looks in your instances database uh images table I uploaded this earlier today um and it will treat it like a URL otherwise it may not always work and then here you can also check out what it looks like here and for some reason I just gotta remove this background and I've got my URL and I'm going to hit save and if it's not DOT jpeg there it is it's jpg cool so then I'm gonna go out of editing the CSS and I want this to be go back to editing the background with the extra properties down here and this little this little uh guide this button right here tells you how many custom properties it seems like you've got edited I want this to no repeat and I want it to be fixed so I'm going to go ahead and hit save now let's look at what my fridge view looks like awesome awesome nice now I uh I think I applied it to the wrong thing so I'm gonna just throw all that away which is actually really nice that I'm able to just click one button to remove all of the settings for the background now I'm going to go to the actual container again oh my goodness you guys if this is live coding happy hour this would be a great game we could be playing no it I don't think we'd make it through [Laughter] so you did that one on the body and it gave us the whole thing but we really want it just on the left side is that what we're saying exactly because you know your your kids they may not know that these are items that are meant to go in the fridge if we don't give them a picture with a fridge you know and it didn't work so now let's go back and see what happened I got my con oh so this is something that I noticed us I think you want it on that fridge view repeater this well no if I put a repeater it's gonna repeat it for everyone isn't it no so the that's a good no here we go Peter is a grid this is this was the problem it was that I um down here so now the the problem is that for some reason when I click on the background and I press plus it automatically adds the CSS for the color background even though I go in here and I set the URL so it's gonna put the color over the image thank you there we go so when I click here to add the background it adds the CSS for the color immediately so when I then add the image for the background image it just puts the color over the image and it doesn't clear out that first property for some reason why do we we lost the grid stuff the list is underneath now or did you do that on purpose I think it's because of the size of the image um so I should be able to do a clip for it something that I miss from developing a portal is the ability to do a z index which is where I was able to set what images or elements were on top of each other but I wasn't able to get that done with editing the CSS on my um on my container so I just pretty much gave up and did the negative margin um so this is with a hundred percent this is with a hundred percent let's change this to 80 percent so so this container that we're editing has both repeaters in it you're right this is oh wait why don't we have a bigger grid one I think we want to put the background on the repeater the repeater is acting like a container and so oh my goodness see I thought we had a whole nother container here yeah you're right we do want it on the repeater because the repeater is the container yeah I just wasn't looking at the right um what is the structure Brad you've got you've got containers but then her feeder inside of a container I did there's a reason I did it but I don't remember why am I from you because I wanted to uh I think it was because I wanted to put a background on one of them but yeah we can move that we can move that first uh can I do this and then do this cool okay so now it's perfectly symmetrical that's all things should be uh except for the extra container but whatever so you're right I am going to remove the image here Boop all gone away and then this one two columns with 100 percent so we're gonna go we got the first containers of grid we got this container I want it to be with 80 percent and I want this container to be with 20 percent and that should get us back in track except we just got to make that the direction and let's see how bad we've broken this bad great news it's bad it's beautiful here we go so we've got our header container our body container we've got the left container did you change the width on the body container it's still a hundred percent and there's no background or anything on this one there's no background okay this container is 80 percent and it is flex then this container is 20 and it is flex and could it just be that we just got to make it yeah we just got to make it Flex Flex fixes everything see yeah check this out boom Magic I'm sharing the right one yeah there we go okay so now back to the magic making um what I want to do next is I want to fix why my images look like that they shouldn't look like that um I'm gonna change this to contain and there we go now it looks a lot better so now we're going to go back and add the image for the third time to the correct container this time let's Go whoo and I don't want it to repeat I want it to be fixed I want it in the top left and I'm gonna want to know why they're in one column but we'll get there tell Earl to stop back seat driving uh because we're gonna get there we got this and yet it's still it still doesn't like me why won't the image work you want the image to be farther to the left I want the image to be contained inside of the container five container so I'll do it inside the Border or inside the padding clip I don't want the size let's see what happens there it only got worse and these keep getting smaller for some reason that I don't understand why are the images just getting smaller and smaller every time you refresh because you're doing fit contain Maybe for the background though [Music] yeah I don't know you're right Earl's right we need to just add exclamation mark important to everything that's how you fix things in Portal and I'm not even joking so what I want to do next is I want to do the two column thing so we're not going to click on the con we are going to click on the container and we're going to wrap and do you want to make that one a grid no we should be able to do it with just Flex yeah um and then we're going to click on this and I'm going to set these widths to 50 percent I'm gonna justify and align these Center and now let's see what happened okay this is at least looking a little bit less bad it looks a lot less awful so that's that's forward moving progress people um no I refuse to use grid I I like grid but so grid is great in that it oh well never mind uh UI Builder doesn't build responsive things so Flex really doesn't matter foreign so I went ahead and changed this to be a direction row and I'm going to wrap child elements to multiple lines align content centered and boom we've got now two columns we're almost there guys so now the next thing that I want to tackle is I want to make the list on the right hand side a little bit less plain so is there a reason why we need to enable styles for for the repeaters Brad so the difference is if you enable Styles then the repeater works as a container if you don't enable Styles then it's just repeating things so when you say enable Styles the repeater itself becomes a big container and then everything inside of it repeats gotcha so um Steven just asked a great question um bootstrap is not supported in uh UI Builder um and neither is angular um so we cannot just use our beautiful little bootstrap shorthands that we're used to yeah UI Builders using flex and grid um and then there are more layout options uh if we enable the newer layout stuff but it's kind of complicated yeah rip call xs6 and just when I finally learned that um oh I need to fix I need to go to the stylized text component here we go I am going to do does this accept mixed no no it doesn't darn uh you can turn it into a script and do that uh there's a couple of different ways if you wanted it to show more or you could just use multiple components oh yeah I could just do multiple components so let's see if there is going to add a container inside the repeater let's take a quick well I there is an icon component nice so I'm going to add an icon and I want it to be a star and I want this to go in front of my stylized text inside of my repeater in the repeater I wanted to go this way I'm going to align the items and then I'm gonna no I'm going to hit save let's see how that looks now refresh awesome awesome so now we gotta make this container wrap this is one of those situations where having multiple available to preview would be nice nope it does not I think you want to do that on the repeater itself on the repeater itself yeah and then you're probably going to want to uh add a container inside the repeater so that the container repeats got it yeah then the container will need to justify its content and everything there we go now here we've got it wrapping this looks good let's see there we go awesome so now we've got our list here and I'm gonna go back up here and I'm going to add another component another container under my container four and I'm going to add stylized you gotta go back to the other tab thank you in here I don't want a preset I'm going to add some margin save the next thing that I want to take care of is uh container 7 container four I want margin here actually I don't want it here and then let's pick a pretty color who I like that one where is it here it is a nice little minty green now let's see what we're working with beautiful we're almost there I want to I want my fridge to not be so big because it's costing everything to just look all wonky thank you Earl I saw that if the bottles were chubby you'd be upset because they're chubby when they're not chubby it's a problem I just don't know how to please these stakeholders so [Laughter] y'all really want the chubby bottles back okay let's bring back chubby bottles all that we have to do is get rid of the maximum width and hit save oh no still no chubby bottles here it is well I don't know I feel like this uh this live stream is just cursed because I always have some form of audio issue and right now Brad sounds like super slow and choppy to me uh-oh so I I have basically just given up and we're doing this live oh here we go I think the issue is just I I'm gonna remove the flex here so it won't shrink and it'll look awful instead oh no guys I don't I don't think we're ever gonna be able to get chubby bottles back I think we'll be all right but the stakeholders Brad they want Chubby bottles I want to make our I want to put like four items across yes that's what I've been uh secretly trying to do without bringing attention to it um I think it has to do yeah so what do you think it has to do with I think we made something 50 one of the outer containers is 50 and probably shouldn't be maybe it's the container yeah let's take that off and see what happens maybe that wasn't it let's see there you go I did space them out more that's the magic of flex look at all that reactiveness you want to get that on a grid that's for sure what I do want is I want my image I want this to be and Justified and it literally will not let me click the button oh no sorry I want my button to be and does anybody know the CSS property for that so just Flex end I am almost insulted um that you think me is it technical one okay actually this is really awesome this is something that a widget editor does not have um autofill of CSS properties that also tells you the syntax and which ones are available nice one Dan see this is this is actually like amazing quality of life level things like I really like that um so let's see I want a line self flex and nice I'm gonna remove these there we go so we're getting there there we go see look at that that's that's it looks perfect and now if we click on let's add also I've known if you guys haven't tried Japanese Mayo which is what this is you need to try Japanese Mayo it is delicious and it added to our list how easy do you think it would be to remove um to make it so when we click the button again once it's well no we're disabling it so we can't click it again to remove it from the shopping list can we yeah we'd have we would I think we would want to do something on the shopping list which we could do we could put a uh put another icon like to the right a button iconic and have it be like a negative sign oh let's do that I love that idea hey I'm going to change tabs yeah uh uh yeah so if you just add it after the stylized text too now what's the difference between button iconic and icon a button iconic is clickable I think is it that checks out button that you can click I think right what's the difference between button iconic and the button where I just removed the label and put an icon I don't know that there's a huge difference if you just remove the label but uh yeah I want this to be a small one I want it to be oh I don't have any other variants uh yeah like well I think that should work yeah and then I want I'm gonna go here and I'm going to oh here's the icon there we go minus oh we could use a trash can too I just accidentally pressed a um oh no where did my mittio go I think I just accidentally pressed a Mac shortcut to minimize it we can still see it oh thank goodness and see you know I appreciate you too Stephen thank you that's the purpose of this stream so just have fun and show development for what it really is a hot mess look at that it's a button now let's make it do something I agree but most importantly we need to align this Flex end thank you so now how do I make it do something I go to events yes and I just realized I don't know that we're going to be able to make it well let's try it yeah yeah so we're still seeing your rendered tab you're right awesome there we go so what we want to do is I think we want to delete we want to delete a record and then we want to refresh the data resource or do we have two data resources I don't know what's is there a data resource that lets us delete a record I don't know that there is let's we're gonna have to first uh add another one yeah so just type delete see if anything shows up we don't want to delete it there we go um there we go I'm sorry yeah um and we go to the event on the button okay so add an event handler and then we want to execute that delete delete delete and we want to give it our table name which is list item I think yeah it's that's it and then if you yeah should be item value that's his ID dot value I think you need okie dokie I think that's it and then we want to add another event handler and we want which is the refresh we want to refresh I think we'll want to refresh both of those so you don't have to pass anything to it so hit add and then we'll add another one and refresh the get grocery favorites awesome so let's hit save all right and then let's ah hey it works nice first try that's impressive yeah that was nice that uh Delete record data resource worked for us really well actually so that's cool yeah that was that was really awesome um is there anything else that you want to do I don't know let's look at the we did have a uh a request to maybe add some filtering but I don't our data resource uh was not built in a way to allow re filtering so I may have to rewrite it a little bit or make it halfway decent look at that this is what I had meant to do with my negative margin tab thingy from earlier boom now it's on the item I think if we have the images we may want to just remove the image from the page instead of just disabling the favorite that could be oh how can we hide an item from a repeater once we once it's in disabled state um how do we do that oh I know how we do that so go back to your other tab thank you and then uh that container three Flex got it uh click on it go to the config and then no there's a little uh I icon to the right of where it says can that one so that lets you edit the component visibility and so we have uh uh yeah so go uh at item dot value dot added dot value I think so added it shows up true if the item is on the list so yeah hiding a component is actually pretty easy um so that may so refresh and then our other one should go away nope nope um hide component if that's true and that's our container maybe I don't think we need the dot value uh oh yep you're right there we go guys see when in doubt copy your senior developers code boom y'all are getting all these lessons for free you're welcome Hey I think it works look at that so what happens if we click one of them [Laughter] yeah you this is so cool actually I'm actually kind of cool delete the lettuce or something let's make sure that it works the other way I'm sure it will but sounds good why won't the tech center okay okay let's refresh and I'm going to delete milk and it shows back up that is so cool okay that is really cool actually you know what I think this is a perfect stopping point ending on a great high note before I break anything else it's a fantastic idea so that's where we are with the shopping list today guys um thank you so much for hanging out Brad is there anything you want to plug before we end for the day I don't think so we are gonna move I think it'll be two weeks or three weeks before we do the next one of these because we've got some some travel going on um so we're planning on doing these every other week but they may shift around a little bit based on people's schedules and by people I mean the two of us um yeah we're gonna have a next experience Academy coming up next month but other than that I think that's about it awesome well um as far as where you can find out when you can catch us we post um when we're gonna go live on the sndevs.com server so feel free to join and join our next experience next Dash experience Dash uib-workspace Channel [Laughter] if you guys ever have any questions or if you need anything and we can probably help um other than that be sure to check our next experience uh Center of Excellence if you have any questions we keep that pretty up to date um and we answer any questions on the community as well so thank you all so much for hanging out I am glad that you guys made it through this uh wonderful thrilling tab adventure with us and I hope you all have a happy weekend tomorrow's Friday yay bye bye everybody