[Music] please turn your attention to the screen and turn your sound on please in service NOS realm where code streams flow Brad and Maria Gabriella lead the show with UI Builder creations of delight where drag and drop makes every screen bright from Visions to screens the journeys of thrill with widgets and layouts flex your skill Maria Gabriella weaves the taale in a world where design details Prevail Brad guides us through with expertise so Grand in this digital landscape where ideas land each component placed a story it tells in service knows Kingdom where Innovation dwells welcome one and all to this vibrant Hive join us at you and I Builder live nice that was even better than your rehearsals Gabby all right so welcome to you and I Builder live uh this is the show where we try to build something with UI Builder and sometimes it works so we'll start with some intros Gabby go ahead hi I am Maria Gabriella Cho prz wector and now I am a living proof as to why you shouldn't give your friends your AI voice all right I'm a product manager at service now uh yes my name is Brad Tilton I am also a product manager on the next experience team at service now and this is obviously a holiday themed episode because it is our last episode of the year um so I've got my elf t-shirt well says raised by cute um yeah so and I'm rocking my Pikachu nice uh today I believe we are going to do a part two of our work with the calendar component uh and this time since I just kind of gave up on the last episode uh Gabby is going to show us how it actually works and how you do stuff with it yes uh let's go ahead and just jump into it then so first I want to show you guys what we've got so far so this is actually a project that I'm working on for our team uh to have a more visual way to plan our um enablement content and all the awesome stuff that we bring out to you guys like this calendar component you and I build our live stream so I've got it most I I want to say I'm about 40% of the way done because I just realized something funky that happens when you change time zones so we're not going to touch that um but what we're going to work on today is this functionality here this ability to drag and drop and create a new record as well as see what the new button does if you guys remember the Mystic Mysteries of the new button that we discussed last time um I I started getting this functionality in our um in our calendar already so I've got the ability to schedule new content let's see if it works first I'm going to search the series name you and I Builder live and I'm going to call this episode 74 and we're going to say it's on today at sometime because I don't know what time zone mine is set to and I don't know what time zone the calendar is set to so now I'm going to hit save and we don't have it refreshing the calendar yet so I'm going to hard refresh the page and it should appear somewhere it didn't appear anywhere fantastic we are already starting off great why did that not work um should we look at should we look at how that works a little bit before sure um and something I'm just going to go ahead and open up the my best friend browser tools because I'm sure we're going to be here a lot um a nice little tip that I would suggest that you do if you're also having fun and UI Builder like I am I created a test button that just logs all of my client State parameters so I can just see them at any time without needing to do a bunch of logging anywhere I just have them available for me at any time so let's take a look and see the way that this works so we've got something that's kind of unfortunate is that the calendar component comes in and out of view and for example you can't preview the panels as you're working on them just yet so you kind of have to click around a little bit blindly so here's my content container my schedule new content container I've got my scheduling card I've got the input series The search that we have then we've got the input for the title the start date time the end date time and the save button in our save button if we go over to events it's executing a data resource create content on calendar and we're giving it a whole bunch bunch of client State uh parameters that we are setting with each of our input uh Fields here so for example the start date time updates the client State parameter with the payload from the event and we got new content start so first let's confirm that that part is working I'm going to go ahead and search here going to name it please work that's my favorite troubleshooting method it always makes it work [Music] and now that I've clicked off of those my client State parameter should be filled in so I'm going to go ahead and click here and I'm going to take a look at okay I got new content title is filled in new content start the series sis ID the series and the content end is all filled in um so everything should be fine when I hit the save button it executes the data resource and if I look at the data resource when it succeeds it's going to update the client State parameter something else that I started doing just is kind of my uh my little troubleshooting tips is when operation failed I have it fire off my test script which my uh test button does so that way I can immediately tell once it fails or if it succeeds because sometimes it might just be succeeding but it might be that our uh events data resource isn't getting updated which I could have sworn we had that happening so let's go ahead and hit well first because I added it there I had to hit save we're going to refresh we're going to fill in the information again no Earl we can't zoom in one of the things I like about this episode is that Lisa's watching and we're basically messing around with her app that she created uh that she is the primary user of U so she can give us some some feedback on the on the Fly although we're all users of it now so check it out um my actual my test script didn't fire off so yeah so my stuff is getting created actually it's just oh what do I need to refresh [Music] on do you are you refresh yeah you got to refresh the data you're feeding to the but didn't it not show up when we did a refresh before if you just refresh the page it should be there yeah if we refresh the page it should be there I do a hard refresh or is it there now oh oh oh you know what I bet I um oh this is going to be funny I probably put in the wrong date 2023 1214 110 no nothing why isn't it showing up was it not did it not then show up the second time I thought it was there so we have two records we should be seeing test and episode 74 so Test shows up test but episode 74 is nowhere to be seen are the times the same oh oh I don't know what's going on with the times right now Lisa just said the start is after the end end that would be very funny of the one of the events is the start after the end yes it is the calendar doesn't know how to do a negative probably you can't have an a i that's what I was trying to do to get around the mandatory field but I guess it's Unique that's a well written app Lisa thanks ay UI is our top priority here at you and I Builder so here we go now it's actually showing up so good news it works when you provide it valid data this is shocking I know um but fantastic oh uh ignore my um okay I can zoom in here actually that's going to be helpful ignore my little uh comments that I've got going on I was troubleshooting the popups so anytime it opens I have it telling me it opened and anytime it closed I have it telling me we closed it um because I was getting desperate as to why they weren't working before I do stuff like that all the time I'm always like I should take this out so people don't know how my internal Voice works with myself so I thought that I wanted the schedule new content here but I really don't like the UI of it plus if I'm gonna have a whole another window that does it anyways why don't I use the same functionality for the drag and drop and for the new button because it turns out they fire the same event so what we're going to do is we're going to create a model um is there a reason I shouldn't do a custom modal Brad I mean the other ones would be if you only if you really just need an alert or a confirm it makes more sense to do that rather than build it from scratch and then iframe is if you wanted to iframe in a jelly page and then a viewport would be if you wanted to use a page collection did you just say jelly page I did yeah so if you've already invested a lot into creating some custom UI or maybe some person did it eight years ago and you don't know where they are or I'm not answering my email then use that page instead of trying to recreate it nice so we're going to go ahead and add your favorite component stylize text right and I'm gonna just hide these guys for a second we're gonna SEL no and we're going to rename it to modal header apply and we're going to say schedule new resource so we've got that oh and it comes with a little hang on so then we're going to tie this event from the calendar we're going to go to events and we're going to add event mapping and if I remember it's called event context oh hang on a second Brad buy me some time grid clicked for a new event wasn't that it buy you some time uh so this is a continu this is kind of a part two on our calendar component we did a part one I have no idea which episode it was and we don't title them uh so maybe somebody would wants to look that up and stick it in the chat and we'll put it in the show notes or something but if you're wondering how do I even get data into a calendar component uh we did that on an episode and basically you just have to provide it the right uh Json structure um which we I think we provided in that episode you are correct it was grid clicked for new event that felt kind of I thought it was the other one but nope this is it so we're going to go ahead and there's a open or close modal dialogue here we're going to open and we're going to select our modal which I forgot to rename whoops we're going to hit add and then we're going to hit save and now let's see what happens then Lisa also made a comment that she's going to change the data model of the dates at some point so you're gonna have to redo this what no just just the data resources oh that's it it's already been a nightmare to figure out how the date okay so some background I literally had to make a custom data resource to figure out uh to get it to work actually because the out of the boox one didn't want to work for me um shout out to Ay for uh helping your girl on that one um what was I naming this right new resource modal there we go okay so now we're going to see if these buttons work we can talk more about the data later this looks like the modal pops right yes if I did this right the modal will show up well hang on if I did this right the page will load okay there we go no Emojis there we go awesome and now this no oh is it only if you move it only if I click it interesting makes sense maybe but if I click and drag that's a separate event so what happens if you click somewhere on the else on the page after you did that like outside of the calendar so there's something there so yeah there is a different there's a different event it's [Music] uh where is it it's uh drag or something drag end for new event I think that is the one we want whoops open close modal and we're going to select the new resource modal and we're going to hit save hopefully the payloads are the same I think the payloads are going to be different because this one will provide a date yeah there we go sorry these this one will provide times while this one won't that's not going to buy us later let's continue so should we should we just check it right now good point so we're looking at drag end for new event and grid clicked for new event so what we're going to do is we're going to go to the little I icon and we're going to open the documentation and we're going to go to uib setup and scroll to the very bottom drag end for new event and the payload has start and end and then grid clicked for new oh they throw the same are they named the same new start Ms new end Ms yeah they're named the same group is the only session ID I don't even know what that means so which we're not using sections so awesome we're good to go let's go ahead and add a component here now I want to get my search functionality going again and you said there was a different search component I should use oh uh there's the type ahead search oh that's why I couldn't find it because I was looking for type ahead oh okay so let's see I want medium we're gonna have to look up the let me see if I can find the Json structure oh um so to look at the Json structure we're going to look at the schema here oh it tells us that's great yeah it has a this has been really helpful actually and it tells you at the very end which ones were required nice so we've got ID label sublabel oh wait why does it have Avatar props oh because it's for users well it's the type ahead and so the way that it works is there's an image on the very left you can use and then there's like a title and a subtitle oh interesting let me see what my current data resource puts out though I have a lookup series one and we've got description and CIS ID is what I currently putting out so should I cre I should just script this oh no we're gonna script this let's go ahead and do it live um this is like top 10 worst most scary things in the world having a code in front of people um so what I'm going to do is I'm going to do what I always do cheat off myself which means I cheated off of Brad first so let's see going to go back to the type ahead and I've got the information that my thing is given here and we're going to look at the list item we're going to switch it to script and then I'm going to look at my script on the side and just grab stuff that I find useful so we're going to grab we're going to grab the array look up series see how helpful it is to name your data resources uh results awesome what's the chat saying Brad while I type this stuff up um we have is it possible to use the agenda contextual view as a standalone component um maybe so part of the calendar component uh you'd have to play around with it and see if there's a property that lets you hide part of it so if the question is can I pull out part of a component and use it by itself the answer is no if the component has some sort of property that lets you toggle something to where it only shows the agenda view then then yes all that they're asking for is just I think ID and label yeah sub label and props so we've got and we're doing this because the output of our data resource is not the right format for this property so we could do this or we could have used like a scriptlet data resource and translated the initial data resources to something we wanted to use and I would say one of the difference would be if we wanted to use this same object in multiple places you'd probably want to do that the data resource level rather than having to do this multiple times or you could write it to a uh client State parameter awesome in the chat place down your odds your bets to see if it worked you're returning a string I'm returning a string oh no oh that would have been man you you ruined the game for the people sorry that looks like it could work allegedly um okay we've got that there H nope so let's see what we've got let's see if this says if any other ones are because something schema down here shows required as children so we need ID label is it you don't need any children I don't think yeah I about to say it looks weird um let's let's uh map out let's um log what we're putting out I don't know if it's going to log it from here no can't remember we got this right correct arrays and object series arrays there I mean you can what you can do is if you hit apply we can use the dev tools and look at what the value of the property is on the rendered page I think you're have to zoom out the value of the property but I'm not or never mind I guess it's not a client State yeah so it's a it's a component property so the easiest way that I have done to find that is to uh find so uh rightclick on the input and do inspect element it's real hard to find it through the um yeah so yeah and then it's got a that uh [Music] clq um the clq 5pk that's if you just copy that yeah and then go back to the uh and then yeah I think that's it yeah so what is it um Source you want proper properties where are the properties no this is the containers okay this one is probably got the wrong one oh maybe you need the whole thing um yeah there we go almost no that's something there so we've got the input ID I don't you can find it the other way it's just harder this this was supposed to be the easy way why won't it type technical difficulties it just does there we go my computer's um rebelling because I haven't reset it in like weeks there we go now type ahead boom um items no that's not the right that's not the one we're using though isn't the property we're using called list items maybe it's the same one but yeah I don't I don't think it looks like this is the dummy data this is oh yeah it doesn't it doesn't show the ones that we have because it shows zero items I was looking at the schema to make sure we were returning the right thing which but shouldn't we be returning M multiple items we should be several multiple items but it looks like it's not at all yeah so ours isn't working so list list items if you scroll up what other properties are there scroll up where uh on the properties because that that uh that property used to be called just items in a previous release so I wonder if we have the right one on the here no sorry uh n uib on the component properties is there a different so scroll up more no I that it's the right one yeah that's what it looks like let's look at the script one more time and then we can add some logging Sorry Brad I hate to break it to you I already added did a console log nice does it work I I I don't know no it doesn't how do we add logging oh so we do get there but we're getting an undefined for the series array itself lookup series. results that looks right to [Music] me let's try this from uh let's try it from a client script you want to try it add it to your test client script just this whole yeah see if it works the whole um I guess uh I guess instead of returning that let's just uh log it but yeah and I think you end up with an extra yeah all right um test yeah still undefined undefined let's go back and look at the name of your data resource yeah look up series look up series results uh your uh the lookup series is only being called when invoked so it's the data doesn't exist when we're trying to access it and the script doesn't invoke it no well I mean you have to you have to tell it we're just trying to access data in the data API and it doesn't exist there yet because we're not invoking the oh at all can I do like an unload immediately yeah just switch it from only when invoke to immediately yeah so now it'll it'll go in page load or we refresh it good job haly when did I invoking in the other one then she saved us uh you might have done it from the script or from the event on the oh I did WOW Mt magical magic W all right man I can't tell you how many times ay has saved me awesome let me fix my little test script now that we've got that and remove all the console logging out of everywhere and now here it is so Type A head looks a lot better than what I did originally which was um it a bunch of buttons I kind of liked that I it was It was kind of neat the way it worked although this is probably a lot easier to set up way easier the things I had the Hoops I had to jump through to get the other one to work were awful okay actually let's not forget how write the how do we write the thing that you selected to the client State parameter what' you say we got to fire an event right that writes the value to a client State parameter no are we not there yet right right right right right right U I think there's more right yeah selected item set that is I believe the right one updating client State parameter is really easy actually um I need to look at the I wish I could do that without it closing it or maybe it is value set yeah it is value set you said um value set I think is the one we want name value name and value so and then I I want to add a second one um because I have the two the series CIS ID and that should should be value yeah yeah um awesome so we got the type ahead there for the series search and now I want should we test if that works um okay just to make sure that our payload is correct why would we ever want to do that man this test script is so handy that is cool I never even thought to do that and now I'm using it oh I typed it I didn't don't look it's not Dynamic you didn't see that I wish it didn't let you do that sneak peek this gets much easier and more obvious in Washington Safe Harbor Safe Harbor Earl quick safe harb I can't believe Earl didn't like make my AI voice read out the entire Safe Harbor statement oh no please we don't have enough [Laughter] time that's the way we'll start next time we'll have minutes uh oh oh it doesn't return the C ID um you and I both it Returns the value of what we're giving the other thing what do we what do we map there well we did ID so we are giving it the ID that should be the but it's not giving it to us can I think I'm just gonna well no never mind I can't set the client State parameter from here because it's just looping [Music] um yeah can you look at your data resource again yeah so we do have CIS ID and we have description yeah but the the log shows the word series I feel like it's giving us the value of the L a so like if I do this oh yeah yeah why is it doing that can you uh just log out the whole payload there may be more stuff in the payload than what is documented hi Brad [Music] um remembering how to log out uh so you need a client script that logs event. payload and then add that to to the [Music] event and then you need to add it to the event that might help oh my gosh I think my husband's making dinner and it smells amazing me too Chris I too am only here for the memes what name and value oh oh oh oh hang on why don't we do this um oh I want I think there may be something to do with that selected item should we should we skip setting the series I think this uh this type ahead search is going to have just a little bit more to it than we can figure out on this show should we skip the series and just have it create a short description and and uh date sure um I'm just going to have it do this uh oh no I don't know how to get a CIS ID from this I think that's how I can get it we're just going to hardcode that and then I'm going to forget about that and then I'm going to wonder why everything has uh the same series but that's all right all right so let's go ahead and add um an input we're going to name it new series name or rather new resource name and then this is going to set input value input input yeah input input value set and I'm going to have that update the client State parameter you content contain forward looking statements these statements are intended to be covered by the harbor provisions contained in the US private Securities litigation Reform Act of 1995 these statements reflect the current service and are based it's not things are actually way more scary when your producers a mad lad did did it say service no yeah it can't say service now it says Service no oh great I'm just going to have that like uh running in the background of all of my presentations um so we've got the input and then we've got this and I'm just going to go ahead and hit ccum they to risks and unties that and we're just going to skip ahead to the end and pretend oh you can't labels are unique that makes sense fins when that gets fired I want my some sort of subliminal message Happening Here features or functionality is intended yeah state. new content title this sometimes happens and it drives me crazy we're going to go ahead and apply and save do we have you have to give it a table or does it no pretty sure I hardcoded it oh no I didn't I guess not I don't know if your data resource just did it automatically since it's all the same table I wouldn't assume anything you want to see the simplest data resource on the planet like I thought I was going to have to do a whole bunch of troubleshooting so I set like 47 variables and then in the end it just worked on the first try rough when you're all you're so prepared for it not to work and then it it probably has something to do with how organized you are with the set just baby's first uh data resource the properties are longer than the script so here we go let's see what happens we're going to hit new I didn't even rename the button you renamed the component but not the label very nice so let's see if that created it nope it did not create it oh wait it may have there's a little refresh icon it's real fancy well this only shows my stuff oh that's right if you do show all it'll yeah I'm not I'm not gonna show all on stream um but let me see if it created it uh does the series CIS ID matter that shouldn't matter right uh the series CIS ID is what makes it so the chat thinks you grabbed the wrong CIS ID to hard code the chat oh oh I I probably grabbed the experience of sis ID or something like that that would be funny um let me grab it while I am over here I guess while you're doing that if you think that the date component is hard to use uh we are doing some work in terms of both documentation for the date for not the date the date component no the date component new for the calendar component we're doing some documentation work making that better and then we're also doing some work on the component itself is intended that's a me our general product Direction and should not and that's me too let's see um I never set an owner um to these I should probably set that when I create a new one huh okay let's see if that worked well it didn't set the short description and it didn't set anything else but it sure created a record so I counting that as a victory uh I Lisa's probably on the back end right now setting some more mandatory Fields this is I want better data but hey look to prove I could do it it works from here success though I hope that uh that demystified a few things about the new button um and maybe next time we'll show you guys how the popups work because that was a lot of fun configur or maybe you can suggest a uh a different component for us to keep documenting in the comments and so the to recap it was the new button just connects to one of the events that the component fires and it's not obvious what the event is correct so that was the whole thing we were missing last time when we looked at this is that the the new button pops off the it grid clicked or new grid clicked for new event event it does have new in the name of the event so maybe the the joke's on us I don't I don't know true you know it's the new button the new event we should have connected those dots frankly but I am so glad that we uh figured that one out um are you is there any last things you wanted to check or are we ready to close it out I think we're good I think we're ready to close it out I kept trying to hint to Earl to close the window but he just refused so I didn't know how to segue into the end of the show so please Brad take over I think you gave them too much time to do something with your voice uh by the end I made a mistake we'll close it real fast so he doesn't have time um so I I just want to you know this is our last show of the year I don't know how many we've done uh but we want to say thank you to everybody who has watched uh all year or part of the year or any of the shows uh we it's always fun hearing the nice feedback from everybody when we see you a person or online so it's been fun for us and hopefully somebody has gotten something out of it at some point but thanks Gabby for presenting today and I think when is our next episode um I have no idea oh wait our next when is our next episode or what is our next episod when no no no no not what we have no idea okay good no our next episode is going to be January 11th join us at the same time same place for I don't know what I'm sure we'll figure it out sometime in the next three weeks maybe a page collection we'll see maybe see you guys next year bye bye [Music] everybody [Music] n n