foreign [Music] [Music] [Music] foreign still going hello and welcome to UNI Builder live on today this wonderful Thursday that was my energy my name is Brad Tilton I'm an outbound PM with the next experience team here at servicenow and joining me is hi I am Maria Gabriella I am also an outbound PM with the next experienced team here at servicenow today we're going to have kind of a low-key live kind of show so everybody grab your favorite hot cocoa and just sit back and relax while we uh do something what are we doing today Brad well uh the last time we were here we talked about how we were going to do some things today that we're not actually going to do because I couldn't get them working uh so we're gonna wait and we're gonna do uh debugging and CLI stuff in three weeks I think is the second week in uh September which is the I don't know 12 fish uh will be the the Thursday second Thursday in September but today uh Gabby is going to work on the wish list app some more I believe yes um so for everybody uh real quick we're gonna be back on September 14th at the same time um so to catch everybody up who may not have been here with us a couple of times ago um the wishlist app was for my birthday's travaganza back in July um I can't believe I'm a month wait a minute what am I doing if this is part two the crown needs to come back that's right there we go okay we're ready now perfect so what we did last time is I'm gonna give it a second for the screen to show perfect so what we did last time was we made a wish Hub app um let me show you guys what it does we ended up uh poking around and making a book application that if you click on it shows you stuff that people have on their wish list so what I want to do today is I want to do two quick things first I want to add a conditional on this modal popping up that doesn't that makes something else show up here if they don't have anything on their wish list yet um and then I want to make it so if something does pop up on their wish list I want people to be able to dib it and say Hey I want to gift this to them does that sound achievable I like that yeah awesome so first let's start with the condition um and now is the moment where we try to remember how this all works here it is open or closed modal dialogue and I think you told me that we can trigger it conditionally here yes now what can I put in here do you know off the top of your head you can use a formula really any JavaScript what do you want to so we want to say like if a count is zero or if it's greater than zero go ahead and Trigger it is that yes so let's find the data resource that we're looking at first and that one comes from um I'm gonna just remove that for a second so let's see where is it showing up I think it's in the repeater look up items awesome perfectly named there it is look up items awesome so that's the one that we want we're giving this a person and then it looks up all the items for that person that's what we should be doing um yeah wish list is state.selected wish list and we're getting that from I think we're updating the client State parameter when we click here yep and then we're getting that from I think we may run into a race condition here what's that right so what we want to do is when you click the person it sets the client State parameter to that person's sys ID then we use that sys ID to go get the list of items and bring it back but we're opening the modal dialog before we get the list of items oh we are so we may want to trigger the modal open based on the data resource success event oh okay so then we do that reorder those and technically it's all asynchronous so they they are not supposed to fire an order although I think in in reality we notice that they always do fire in order um but so then assures me that they don't fire an order so then I think we need to go to the actual data resource go to add event mapping and data fetch succeeded yep and I think we may run into an issue here but let's try it so then we go to openmodal and I want it to open modal items list and I'm going to hit add so let's see if that works just right off the bat I'm going to delete this let's hit save can you go back to the can go click into the config tab on this lookup items uh okay yeah I wanted to make sure it's only when invoked otherwise we're going to get modals all over the place awesome so let's see we've got awesome it works it works so now we need to make it conditional and we do that from here uh you're still showing thank you just for everybody I went into the event and then uh there's a conditional check box here so I think what we need to do so you can click the little uh copy thing um there you go and then open that back up and so in parents I think we just want to do that is greater than zero I believe the thing that you copied is greater than zero will do let me turn off grammarly because it's literally in my way what the heck yeah if all let me see there we go so this greater than zero I think this will work oh neat let's see there's a there's a tiny issue that we may run into that we'll see we did run into it I think sometimes I have problems accessing the data from the data resource on the success event oh could it oh uh oh length there we go yeah let's see results gives us an array that's a good call this would be great if it works but that conditional events thing is really nice and that's on any event handler oh look at that it worked nice awesome now so we're done well that's kind of not the greatest user experience if I just click it and nothing happens how can I make something pop up so we could add another event handler that shows a notification maybe a popover uh we'd have to create a pop over but we could do we could do a pop over I I think a notification might be a little bit better user experience so let's see uh ADD alert notification yeah Advanced conditionally and we do the same except whoa it's going to be equal zero equals zero or greater than zero uh uh but wasn't the last one greater than zero so we want this to show up if it's zero right oh right I think you need the double equals thank you and then what do I put in here so oh no I'm gonna go back to the form you were in the right spot so ID just has to be unique so that you can think of this like a lowercase dashes yeah and then status I think tells us I think status gives us like what color it is and then you can give it an icon and then content is the actual message and then uh this will work but it won't be dismissable I forget how we can make it dismissable but that should work awesome let's see what happens now I can click mine and it happens I can click this one no items on this wish list yay that's perfect oh we should do you go to the developer site I always have to look it up unless somebody knows what the thing is let's see it's on the alert component on the developer site we don't see if you're going to the developer site though yeah I was doing it in a different window just um ah but this is like any time I have to add a notification that I has to be more than just text there I always have to go look it up uh action if you go to maybe I think there's a go to the playground oh cool or not oh no my computer's dying I think I did see that there's going to be um anc1 but I did see that there's going to be um maintenance on the dev site let's see what is the type did you find it nope so I think we want action uh so so type is dismissed is what we want dismiss or dismissable just dismiss awesome then you can use the oh your preview button doesn't work huh I didn't get a chance to test it oh I just haven't I haven't uh risked it awesome it's dismissable perfect so it I did um Port this application before we were working on Utah and now we're working on Vancouver so Vancouver does have a neat little preview uh that we can use here if you want or you can use open URL path which is what I've been using so now we need to work in the modal and I want people to be able to click on here and divot so that means I have two fields for that field first okay go to AES and I will switch tabs here in a second Boop there we go oh somebody in chat says so today is maintenance day that makes a lot of sense so let's see I have this in the item so Ravi has a great question Brad that I think uh you can answer does preview work when we have multiple variants on the page yeah that's like uh most of the value of preview is that it lets you preview the current variant without saving the page uh and so it just brings up a preview and so if you have 10 variants and your user might see the second one you can still preview any of the variants so it's whichever variant you're working on right now because open URL path will show you the variant that your user would see right yeah yeah and if you hover over this it says preview this variant nice so I've already got my Fields should I just add a button now uh are you pulling that field back from the data resource oh great Point Let's Take a look um image no I am not let's add this right here I want dibbed and do we need to call the field if we want to set it no that's only if you want to show it so you would only if I want to show it do you want to show who did it okay let's let's go and do that that could be good because then you can show like a check box if it's not dibbed but if it is dibbed you can just not show the check box and show who dipped it right awesome so that's the most times I've said dibbed in this event in my life so let's add something up something I really like about Vancouver is all of the containers are pink and it looks like the components are blue yes we we redid a lot of the stage um the preview stage and so things should be easier to move around on the stage and if you see that little icon in between heading three and three vertical dots that lets you like walk up and down the content tree from the middle so like if you wanted to get the parent container you could click on that and get to the parent container so that's pretty helpful on pages that are really complex and maybe the components aren't named very well so you don't really know where stuff is you can you don't have to go over to the contentury and do things so we are we're trying to make things a lot easier in terms of you know moving stuff around and finding things here wow that's pretty awesome um let's add something after and we want a check box sounds right can check boxes have labels um uh yes I believe there is a label yep there it is so then I guess you'd want to leave the check box on too so well so just disable it though right I ideally you would want if I dipped something I should be able to undib it but nobody else should be able to I guess that could be a that could be a stretch goal for us but that seems a little more complicated okay so I wanted to say bibs um and I want it to be okay I got the size oh my goodness Earl's gonna count how many times to say Deb this is amazing so hopefully I wouldn't plan a drinking game so would I play not what I play so would I do dib here to see if it's checked or not so remember you're inside of a repeater at this point even though we don't have the numbers anymore oh so I need to do a item yeah uh got value so we got uh index is new I think as of Vancouver or look new to me and then you need debt value again that lookup records always returns either value or display value and every time I forget awesome so then we've got oh so checked oh yeah that's gonna return true false so that'll work yeah so let's see if that worked we got dibs so I've dipped duct tape does that stay persistent no it doesn't do I need to save something yeah so what we'll need to do is on the check we'll need to save that to the event database yeah yeah that's the right one and then you then how do I oh you need to add the update record event handler or the update record data resource to the page first so through data resources and then it'll give you an event handler to call it with so it's called update record and it's under global because of course right that's common things are under global yeah we're we're we are uh gonna make that better I want to name it update item remember people rename your data resources yes container labels data resource labels and IDs are helpful to rename so only when invoked yes so uh so there's two two um there's two types of data resources where there's lots of types but one of the types is what they do so they can either query data or mutate data so if they're writing data then you don't bind properties to it because when a property when a property value changes the data resource gets called and you wouldn't want to do that for something writing data the database so you pass data at the time you call it through the event handler so now if you add an event handler you'll get if you s yeah uh no I think you may just need to scroll down to the data resource it's probably all the way at the end here it is update item execute yep and then now you can set the values okay and here I do item um you have the name of the table somewhere technically maybe it was just to hard code this so oh okay I would generally hard code the table name if it's like for dibs you're always going to be updating this item table right awesome so now let me see how do I get this table name I haven't gotten to mess around in AES very much if I just hit preview oh no there you go I think you can like copy the URL and then I think if you right click on the ite link you can say copy URL and then that table name is in there somewhere there it is so I'm gonna go back here there you go awesome and then so this one yeah this is where you want to reference the item valued I think if you go row data it's no so the record you want the sys ID right oh yeah so I think that's rowdata.unique value and then first and then here's this one you'd want to set dib and dibbed by probably dipped uh I I think I would say dibbed is and then whatever the value is because then if somebody unchecks it it also works and how do I access that value uh type in Pay I bet it's payload.value but type in payload dot yeah awesome and then divided by is so here go uh yeah go at context dot session and then there's a ton of session properties that you can't see oh yeah a user there you may have to keep going yeah user and then there should be like sys ID or ID or something in there sysid yeah so there's a lot of there's a lot of user context that you have access to awesome um so I think you could just apply that it feels kind of weird to build that with the with the filter Builder yeah this um this data resource uh you don't have to use the filter Builder but it passes an encoded query for that property and so the easiest way to build an encoded query is with the so one thing that we'll probably want to do is trigger that refresh data resource again it's like it works okay awesome so now so click the X and refresh the page and click it again and make sure that it actually saved it good point good point [Music] awesome now I want that whole can I want the whole checkbox to go away if it is dipped and I want something else to show up yeah we can do that so let's that would be under where's the little here's component visibility well I still see your ring oh thank you yep so hide component and then you would just want to switch it to yeah item.value.dib dot value yep that looks right so if it is dipped it will hide it awesome so then I do the opposite can I do like exclamation mark yeah you could just say like you could also do like a dibbed by and then whoever that dibber is dippery laughs the dibber or the dibby the bee whatever I have had people ask me why I use stylized Tech so much I just like it yeah you're gonna kill that preset I want none please remove thank you um so can I do a combination of binded data in regular text or so there's uh you can use a formula here which is I think the way that I like to do it there's a concat oh friend cat yep so then you can do text and then comma and then use the value well but you're still uh you didn't switch to data binding oh I didn't thank you I was wondering why if I was like is this a bug or did we do it could very well have been a bug oh that is sick are very nice can I do it like that uh [Music] you may need to put parents around the item.value but I'm not sure to be honest we're sure about the find out it killed your parents so hopefully this works oh I think this did work because otherwise it would be hiding this because duct tape is dipped awesome so we need to refresh the data resource I think if we want that to show up oh yes and then I want okay so first let's refresh the data resource and that happens when I update item can I refresh a data resource from a data resource you can you can it's all about event chaining we're still seeing your runtime though thank you so then I go to the update item data resource and I add event mapping yep and then you can just hit that refresh again for lookup items so there's a there's a little bit of a risk here because we are popping the modal based on a successful list refresh but I think because it's already open it shouldn't affect anything but just something to think about as you're doing things on data resource success if there's multiple reasons you're going to do that data resource oh this is awesome so now I want something else to show up here that says undiv or should I do it with the original so should it be if you're if you are the dibber you should be able to undip it but you shouldn't be able to undip somebody else's dibs [Laughter] bigger the debris there we go if you're the debris how can I tell UI Builder if I'm the debris so UI Builder knows who the dibber is and it knows who you are because it has access to context are we getting to the realm of a script are we about to hit code we might want to write a script to show and hide the check box yeah oh no suddenly my computer stopped working we can write an if statement I think we got it and I just go so why is it called thank you so I don't think we need a we don't actually need a client script we can do it in the in the component value right so come in the check box yeah so for the high the hide component so what we really want to do is we want to say if it's dibbed and I'm not the and I'm not the dibber then don't show the check box so we may uh so that yeah that'd be uh item.valued at dipped by uh yeah that's right does not equal contacts yeah I don't know if this is going to work but this is a value kind of sort of a script um I don't know I don't know what did we have in the I think you have to click out of that if it expects three arguments given oh yeah yeah I don't think you can do I think if you get rid of the if just delete if but leave the paren oh it worked wait no did it it's back um because you are the dibber that did work yeah so it doesn't hide it so it shouldn't hide it because you're the person that did this so instead of hiding it can I do this under disabled I see you I don't always show it but only make it disabled if you're not the diver yeah we could do that so then we we always leave it there yeah I figured that that might be better so then so you should see it but then if you impersonate somebody else they shouldn't be able to dib or undo that don't worry and it went away this is so exciting awesome so now time to see if I can impersonate somebody else without messing everything up do we oh no this is me we have to like worry about permissions it's possible do you have another admin user in your answer I'm about to make another admin user quick Brad say something interesting to keep them distracted while I do this um yeah so we went over Vancouver stuff last week uh we last week two weeks ago um there's a lot of good stuff in Vancouver uh we did or Gabby did an academy was that last week let me look at my calendar you did a next experience UI Academy last Wednesday around the new UI and theming and then on the third Wednesday of September we'll be doing a next experience Academy around uib and components and workspaces and we'll probably talk about some of the gnai stuff like case summarization and workspaces check it out oh our faces are in the way oh there we go it did work girl there we go it did work that's fantastic is jessalyn actually logged in or no you're logged in that would be fun no I I impersonated let me end impersonation real quick oh yeah and then it should switch well that's fantastic is there a way to sort the order of what gets returned in my repeater sure according to whether it's dibs or not yeah I mean if so basically for sorting in a repeater you just have to be if it is if you can sort the data in a way you can do that with a repeater so it's all about the data resource so however the data resource is returning the data is how the repeater is going to show it so the repeater is really just getting past an array and so it's going to show the array in whatever order it got passed to it so if you sorted by dibbed yeah I don't know if you could do like a more advanced sorting there we go where if you wanted it alphabetical and sorted by dibbed but it's doing it that's amazing and you have to hit save yet yeah so that answer somebody asked it in the question me too but asked it in the chat so we can sort it it just is dependent on the data resource that is awesome I want it ascending so what was supposed to be your stretch goal I think we just did our stretch that was the stress goal it is funny like once you get a hand once you get the hang of it stuff that seems like it would be more difficult can go pretty fast uh I think a personal challenge for these for this show is to one day come up with something that you're going to have to code we're gonna have to make a script of some kind we can't just do it any other way there are there are some use cases that is really awesome what else can we do to this do we let's let's spend some what's what's left of our time here making this actually look good because that that in itself can be a challenge so let's start with this area out here I want this to not look like this can you click into that modal again yep is that resizable um no I could have sworn one of the Vancouver features was resizable modals but maybe maybe that's like a Xanadu feature or something that I got confused about uh yeah yes there is sizes you can change yeah it's always been there minimum resize enable resize oh there we go yeah oh and you can tell it I never want it to be bigger or smaller than oh wow Vancouver feature Vancouver future let's preview it here it's just loading right now I'm looking at it no I know I know yeah there we go oh wow that's cool should we Flex it instead of the grid so that you get more if you make it wider you get more boxes let's do that so I need to go to the repeater um yeah and then I guess the card based container you might need to give it like a fixed width like Gazette and yeah I do like the little like flexbox and grid like I didn't need those icons but it is kind of nice to they look very nice like yes this is the big difference media queries are not supported somebody just asked that and I will follow that with yet um so yeah can cells be styled on Hover no we are not really doing any conditional styling right well that's not that's not entirely true so you can't style them conditionally through uib but if there is a theming hook for that so there could be like a hover theming hook and so if there is then you can apply you know a value to that that theming hook but not through uib that would be through the theme engine did you give this I haven't been paying attention for the card based container did you give that like a fixed width um the card based container I did not give it a Max width I think if we do that yeah then you'll get more that show up let's see what happens a real use case would be to fill the modal with an actual record form with a specific View that's doable that's just not our use case right right now yeah I'm just refreshing here it's taking a little while um so I guess we need a man with oh that's beautiful what are you talking about this is ready to be we're done production ready Let's uh Min with and then yeah I guess depending on your uh your view of what responsive means it is just funny look at how responsive that it is beautiful also I put the shadow on the container not on the card it looks like um card when a repeater no it is Okay so we've got the card and there's some some sort of CSS issue here where things are overflowing outside of the container um what if you go what if you go show Advanced layout options it's been so long since I've built a portal foreign yeah Gap oh there we go rap child elements multiple lines there it is and then I want it to be space around let's see what happens Perfect all right what if we yeah awesome so let's see I want this to be I want it to be 250 by 250. I'm gonna hit save we'll definitely look nicer you just gotta have people put the right images in there well you're right it does look a lot nicer but um it gets cut off can I make it this should have a flex shrink option oh yeah and then I want this to also do shrink please I have no idea how this is going to work yeah because we're getting to the fun part of uib I thought styling isn't what I would call the fun part but that's fine to each of them are there what do you mean you don't like to throw your head against CSS for eight hours a day and cry over margins and padding I don't really miss that part of building portals when that was all I did my favorite moment of building portals was explaining to a customer that yes I agree when this window goes down it shouldn't look very different they wanted their header to stay in the center of the page and anytime it would go down it would snap wide then small again and then at the end of me fixing that they go wait what do you mean you spent nine hours on this yeah how hard could it be and it was like yes I spent nine hours of my life resizing this window over and over again wondering why nothing was working this is this is what you paid me for it was so hard to justify I don't blame them yeah I always I when I was Consulting I had that I had a customer who had sent us you know we we had some designs and I built the site and it was like someone was like Hey I measured the width of this and it's 799 pixels instead of 800 pixels and like it was my fault it should have been 800 pixels but I was like really you you can tell like really this is this is what you care about um I'm not a designer though so it is important it is very important okay I those nine hours were were very important to the go live of this portal okay let's go 500 pixels oh I bet that'll fit you may only get one you don't want to start though there we go except 500 pixels is awful oh you can make them uh just 500 pixels tall and 250 wide good point okay anything else you guys want us to see want to see us do in the next 10 minutes otherwise no we can end early I'm gonna move this down I want this to foreign are you going to spend the next nine hours making this page look nice yes I am going to spend the next nine hours making this look better um Let me refresh the page look at that it looks better already we've got no items on our wish list we can click on this why are you so wide stop it what else will we need here we do have a question when did you when do you have the CLI episode planned what was planned for today but uh I ran out of time so we're gonna do it uh the second Thursday in September which I think is three weeks from today um so we will we'll do CLI stuff and then we will also uh take a look at the new browser extension the Chrome extension that's out um for I think it's called Dex developer tools uh that lets you do some debugging um and kind of walk through the shadow Dom things like that I know what we can talk about for 10 minutes oh Brad can you explain what um Innovation lab is oh I can't explain what I think I know Innovation labs but Innovation lab is basically where we put things out that maybe servicenow employees have built or um you know things that we want to people to be testing and you know beta testing that sort of thing but none of the things we put on there I think are technically supported uh and so it and we do put things out there and they'll flip from Innovation lab to the full store to where they are fully supported but it's a way for us to get things out there that people can can use so there's like some um there's some stuff that like our internal I.T department has built for there's like a couple of dashboards there's like a CIO dashboard and a CSO dashboard that are all uib built that are out there that I know some customers have been have been using they're pretty extensive in terms of dashboarding and all sorts of stuff out there and then also I think also a surprise so this is something that we just hit Innovation lab but it's something that I've had a lot of people ask me about theme Builder component specific theming so we've got this out right now um if you've got an instance on Vancouver and non-protences on Vancouver and you go to the store you should be able to find version 2.1 of theme Builder under Innovation lab and once you request it on the store you can then go um and let me share my screen again man these interns you just can't find good interns anymore there we go so you go to plugins and make sure that you resync your new application manager with the store after you do your request and it gets approved you can type in theme Builder and it will have a version upgrade to 2.1 now like Brad said this is not uh an official release by any means there could be bugs there could be any amount of things uh happening with it so definitely only install in your sub prod but what you can do is once you have that you can go here's your typical editor view you can go to component Styles editing and you're able to click in on these specific um components and you can change their colors and um you can change different stuff about them go in there test it out let me know if you have any feedback or if you want to see more of this um theme Builder 2.1 is only compatible with Vancouver and it's only only for non-prod instances because it is an innovation lab release um if you have and and this is pretty much the first time we're announcing it so you're getting a a super secret first look into something really awesome that's coming in the future if you have any feedback you should find me on essendevs.com or on the community and uh just remember Innovation lab like we said uh but it is something really cool that we're looking for feedback on so let me know what you think and uh have fun uh something that I really like is that as part of the 2.1 release there is now an accessibility checker so this little uh notification popped up and it's telling me that this component has contrast issues and if I click edit it will let me well first I need to go to the correct scope there we go now I can click edit and it gives me more information on what I can uh change it to and then here there's a little contrast ratio buddy down here you can oh you can even hide in accessible choices nice that's nice wow that's really nice you can see like two of my brand colors are not good so I can change it here and there's even an undo button I'm so happy about that you can see oh wow this is really awesome the number of components is a little limited now but this is again just kind of a an early version of this where it's just heading text link the badges and highlighted values yep so you guys got a super early preview into this let me know what you think go out there and uh don't try to break it be nice but you know if you do end up breaking it let me know so we can get it fixed um but I think that's about it for our show today Brad you want to close this out yeah thanks everybody thanks for joining thanks Gabby that was awesome we accomplished a lot uh maybe too much uh for our amount of time um but yeah we'll be back in three weeks uh we will talk components uh some of the Vancouver changes in the CLI are pretty exciting uh or they're exciting if you've been building custom components and trying to install the CLI um but uh yeah we'll be back in a few weeks thanks everybody have a great rest of your day bye-bye [Music] [Music] foreign [Music] [Music]