[Music] foreign [Music] [Music] Builder live the show where we totally know what we are doing and what is going on at all times my name is Maria Gabriella and I am here with my lovely host my name is Brad Tilton and yeah we're on the next experience outbound product management team yes and today we have something uh really interesting that we're going to try to tackle today right we do we do so today uh we are going to experiment with the calendar component which is one of our most complex components that we ship out of the box um so yeah we're gonna mess around with it see what we can make it do um I have some extra Internal Documentation that I will probably have to reference uh but uh yeah we're gonna see what we can do with it take some suggestions if we can get the first part working and go from there and while Brad gets his screen ready I'm gonna do some quick plugs this show we're going to start doing it the second and fourth Thursday of every month but we're not going to be back here at the end of the month in June um we're actually going to come back in July I think our first episode is going to be on the 13th and then on the 27th for Gabby's birthday month Extravaganza it's going to be great um we'll see I'm going to try to lead the shows and show how much Brad has taught me over these past five episodes so we're gonna see how wonderfully that all goes also if you're looking for not so technical content but something great to also know uh next week on the 21st at 11 A.M Eastern I'm gonna be hosting the next uh experience Academy and we're going to be talking about some Vancouver and some really awesome news that next experience is going to get turned on by default for upgrade custom in Vancouver if you're wondering what that means for you and what you need to know for that come to the academy again it's going to be the 21st at 11 A.M Eastern and I'm going to put some links in the description once Brad takes back over and that's it for my plugs all right [Music] um Earl I think we're ready to share my screen he knew it already all right uh so first off I apologize if there are random uh sawing or nailing noises in the background there's some remodeling going on fairly close to my computer right now um all right what we're gonna do is uh we're gonna do some calendar stuff today so without further further Ado I have a fleet vehicle management app that I've used for all sorts of things if you've watched any other YouTube videos you've probably seen it um but it is basically for you know scheduling and maintaining you know vehicle maintenance for an Enterprise and so if you took my uh building a killer workspace experience knowledge lab uh you will you will be familiar with a lot of this because you spend a lot of time in this workspace but what we're going to do is build out a new page that has a big calendar component on it where we want to show oil changes and tire rotations on that calendar page and then if we can get stuff to show up then we we're going to explore some of the interactive elements of the calendar component um because it is kind of a crazy component it is very complex um but yeah so I have a new page created we're going to add the calendar component to it but first I want to show a there is a demo calendar page that comes with your instance I think it I think it's with the instance I don't know if you're interested yeah just a tad yeah it comes with the instance and you can associate it with whatever experience you're working with this noise has not happened at all today except for right now um it's my least favorite noise that they make okay so this is the demo component uh you can kind of see in here there's a lot going on with it uh we open it in the new tab we'll be able to actually use it um I wish this was a slide coding happy hour so we could take a shot every time I mean someone can do that um but yeah you can see the component has like it's very complex this is all one component uh there's all sorts of controls in here so you could go to calendar or timeline so if we want to make it a calendar I can get a week view and so this is kind of what we're going to play with uh with the um with what we're doing if I click on it I get this is a modal but you can set up a pop over as well I've got this stuff here there's a new button you can configure which doesn't look like it's configured but for the most part this works pretty well so we're going to try to that that's enough uh that's enough talking about it let's try to make it work so we're going to switch back into my calendar page um I posted in slack three hours ago that I had no idea how this calendar component worked I've been messing around with it for a little bit and I have a better idea of how it works but we're going to get into some areas where I definitely have no clue all right so I just added the calendar component to this page one of the nice things that the calendar component has is lots of demo data in here so at least you can tell how things need to be structured so if I click into edit uh it'll show me what my uh Json looks like there's a whole bunch of events in here uh this Json editor is nice sometimes I would rather just have raw Json though and so I usually go Json and then I'll take this and put it in like a Json formatter somewhere but you can see there's all sorts of things going on I did do just a little bit of pre-work um so we are going to uh we're gonna do something so basically what I want to do is I want to feed this calendar and we'll start with I think tire rotations so each of my vehicles let's let's just open up this app and show you what it looks like my vehicle table and while he does that if you're interested in taking his build a killer workspace experience lab I posted the link from now learning in the chat so you should go back and check that out so you're more familiar with the rest of the workspace uh it's back thanks Earl I muted a little bit all right so uh I have a vehicle table here it's got a number of fields on it but it's got a next tire rotation and next Oil Change uh field on it so basically you know anytime uh that was a loud one anytime uh you get the oil changed we would project out three months and you'd get it done again uh probably no matter the mileage because that's generally how companies work but so I think we'll look at the tire rotation here so the first thing we're going to do is we're going to add a lookup records data resource well it's all caps uh and I'm gonna I'm gonna make sure I I get look up records and not look up record there's only one letter off but I hit the wrong one about every other time I want to add one of those data resources um so I think Earl's gonna edit out the background noise in post is what he told me so uh uh all right so we want the vehicle table uh we're gonna just add some conditions to it because I only want I really only want future stuff on this calendar um so let's say after but I do one this week so let's say after last week and then do I have an active field it's always a good idea to make sure that a thing is still active I don't that's that's my fault so we'll just uh make sure the tire rotation is in the future yes the noise is uh they're like sawing into the floor apparently which I thought they were done with um all right so that's the conditions let's add some Fields so by default when you use the lookup records data resource it's going to grab the road data so basically the display value for the table and the sys ID and then the display value field it will also grab that by default but we want um we want to add some more Fields here so I think we decided tire rotation right let's do that and you do have to add these fields one at a time uh which is not great but that's how it works right now um what else do we want let's grab sysid that looks good tire rotation all right I think this will work all right so we have some data uh what we need to do right now is we need to take this data and we need to give it to the events property in the format that it expects so the main thing that it needs are the ID start and end title and description I don't think we actually need a description but we're going to give it one I think um so it's just an array of objects these objects are pretty flat although they can get you can have sub-objects which is maybe something we'll explore at some point but right now we're just going to try to get stuff to show up on the calendar so there's a couple of ways we could do this I could create a new scriptlet data resource a scriptlet data resource is nice it runs client-side it's super performant and it takes basically just takes in an input and spits out an output but but for this one I think we're going to do a scripted property and so one of one of the my decisions decision points for something like this is a scripted property is good if I you know I already have raw data I just need to change it what was that I just need to change it into um you know something that I want and I'm only going to do this one time I think a scripted property is okay if I continually wanted to take um you know or if I wanted to reuse this I might I might do a script lit and then make a composite data resource out of the two a composite data resource means that you're just kind of putting two data resources together and then you can kind of reuse that composite data resource in other places so for this one we're just going to uh write a script so let's go ahead and do this uh I think I can cheat because I already wrote something similar today um but let's let's try it out uh so I know my uh my what is it vehicle let's go uh vehicle array it's gonna be API dot data Dot uh uh I can't move the modal around that is annoying I think it's going to be called look up records underscore one and results it wasn't just vehicle array it was in the list no it's a vehicle array showed up because I already typed it oh okay yeah the auto complete from the scripted properties uh is not quite as good as a fewer binding directly in a property so what I'm hearing is Brad Tilton says don't name your data lookup so that you know it's always going to be underscore one underscore two Etc right that sounds like a best practice yeah if I was uh if I was really trying to use some best practices I would have renamed this data resource yeah but I did not just think what would Brad do you do something else I think this is what we want to do so now we're going to Loop through some things uh uh do I remember how to do this no I think I need to do this right uh is it I is less than vehicle array dot links buddy tell me if I did this wrong uh so let's go we we're going to have a calendar object in there I guess that could be a constant still not totally comfortable with uh es6 but we're gonna try to use it so I need an ID so what we're going to do for the ID is I think we'll use the sys ID because I think it just has to be unique and so that's going to be cow uh no that's a vehicle array let me name it something that long stack Overflow says here Loop is right fun all right now Dot sysid and the um look up records data resource always returns an object for each field name with a value and a display value assist ID is probably going to be the same so we needed ID the ID start ends and title let's go title yes uh title and for title let's make it a combination of things so that's going to be oh there's this weird uib thing that's been happening to me lately oh so that wasn't just a visual thing from you sharing your screen no it actually is sometimes clicking in a different spot I haven't I haven't had time to really run it down yet oh interesting so title let's cut let's do this the let's make it the vehicle name uh uh display value and then we'll say so this will be like 2022 Ford F-150 and we'll say tire rotation and then the next one is going to be start and that's going to be just a date so I think we call this tire rotation uh oh and I think we're gonna we're gonna wanna do the same thing here this is going to be a combination of things um so what the uh what it's expecting is uh it takes a few different types of uh date time parameters but one of them is um you know year month day hour seconds and so that's what we're going to pass here and so I have typed the word I saw your chat I've typed the word vehicle so many times and I continually misspell it and it has lost a lot of meaning um I think we want to go let's try oh four I think I'm doing this right the GMT and then copy that and then we'll go to 12. all right what are the chances this actually works it's not going to work because we have to push it um calendar array push all right let's see if this works all right so I'm Gonna Save and then we'll probably have to mess with a bunch of settings after this but let's see if this works all right that's not today so let's go to today let's change it to the week or the month did not work all right does anyone have any ideas why it didn't work and you're 100 sure you're oh something's wrong what is this here you need the value of tire rotation I do that is the problem or that is a problem and you're sure those are the field names I'm pretty sure we'll see it in the oh next tire rotation there we go um all right so I think I am returning it as an array so it's an array of objects that calendar array uh is what we're returning it's a display value and then it was next tire rotation okay yes generally my resolution is much higher than this so I can see the data and the the modals but all right let's go we're refreshing let's go to today to a week there it is so we have something that showed up um so let's mess around with the com so we have some data uh um how much yeah so we've got some different data here uh what do we so I generally I like a weak view when I'm looking at things um but I don't need my week to start at midnight or my my time to start at midnight every day that feels like something we're going to be able to change I kind of want it to default to this week view and I kind of wanted to start on today and not three years ago so let's take a look at what options we have here so I think context date that looks that looks good so let's set that to I think we would want to set that to today oh let's see are you going to hard code it yeah I shouldn't hard code it let's see what we have available to us um session we have anything in the session properties Maybe what if we use what's timeout I don't know let's see if that works I guess I could uh see if that is actually a thing time zones format Locale I think oh here it is let's set this to a week instead of day I'm just guessing that that's what that is but I'm pretty sure I'm right um so the date format first day of week zero that looks fine so um Dimitar wants to know could we use try catch in the UI Builder script for instance yeah absolutely you can use a try catch which eventually might have we might have gotten to um no way that worked so some things worked so it did start on today that is crazy that uh my random that shouldn't have worked this thing worked let's I want to see what that actually uh what does that look like that it's returning there this is one of the things I like to do uh let's add a stylized text up here in the header slot I don't want to use a preset and let's go context session properties Dot the session timeout can you use the user property there in order to select the user's time zone yeah I don't know if it'll have time zone but it'll have some things which yes we should take a look at that uh so where does that go did you refresh no uh I think I I think I used open right yeah huh so let's add something at the bottom well the other thing we can do is just log it but how would you log it uh I would well let's do it so I you have to add a script script yeah so I'd go uh logging and then I think we go at API dot context Dot for a recession that property um yeah let's just log that whole thing oh cool man throwback to this one really tricky portal where I just it was like three in the morning and I just deliriously added Jason the stringify to everything just so I wouldn't have to see if it would work Good Times all right so what I'm gonna do is uh there's a page event uh for when the page is ready so I'm just gonna add this little logging statement to that page event one of the nice things I think this was a Tokyo thing uh was in a client script you can see all of the events that are triggering it which is pretty nice oh um so let's uh uh Earl do the thing what's the thing hide your face oh yeah I'm blocking the there we go how does session timeout work 30. it's just 30. so it didn't actually maybe it's uh if you pass it a bad value or just default maybe can you leave it empty and see what happens let's try that that's funny [Laughter] see if we hadn't logged it we would have just thought that that turns a real thing all right so let's just does it tell me anything let's see if uh learn more this is dangerous I don't think so it's there the problem is yeah it just doesn't this is one of the problems we have with some component documentation is it doesn't tell you uh the uh Json format that it's expecting right just array of events but for what was that called uh context date selected date on calendar so no it doesn't really tell me I have if I look at my fancy documentation what does it say Ailee has a good idea maybe it's the number of minutes till your session times out after inactivity so I think that is what that property is giving us I just I don't know what uh why would it work what we're getting here um so let's context date so you can give it UTC Glide date and ISO date or a moment which I don't know what the context of that is interesting okay so I plug the user all right let's log the user I and I do want to set this date to today I want to we're going to figure out how to do that um [Music] uh click on the right spot it was still session so for user we do get some good some good stuff but I don't know if it'll give us the date time where'd you go Earl do the thing thank you Earl uh here let's make it bigger uh oh we have all sorts of user info so hopefully my password doesn't show up here [Laughter] uh what do we have workspace notifications so a lot of workspace specific user preferences it looks like which makes sense we're in a workspace um date format I may not have I don't have one set probably maybe um but maybe we can use that I wonder if I go preferences and set a date format if that'll work instead of display I do have a date format we have a lot we have a lot of things oh do we have the entire oh time zone I don't know what was what is this that's what was the name of this array preferences oh it's your user preferences it's some sort of preferences it may be user preferences and then we have all of my roles that's helpful my username sysid uh uh no password that's helpful password that would be terrified daytime format uh so yeah we can let's do that let's set the date time format uh oh time format and date format we'd have to do it separately at least we can do the time zone let's do that and then see what happens when we leave the thing blank all right time zone all right contact State time zone will be contacts Dot session uh oh it shows us everything yeah I guess we could have just done this oh neat oh I did oh it did it changed it nah and then what happens with a contact State being empty it defaults so it probably got a wrong when it got the funky thingy it just defaulted to today yeah I think it did default to today because the demo data just defaulted it to a long time ago all right one more thing I want to do now we know since we got the time zone right we don't have to worry about offsets so I'm gonna make it uh eight to five I'm gonna say this tire rotation is going to take a whole day that's still not right oh because it's Los Angeles I am in Central Time oh and we how did that work that's cool because I gave it the uh my date time oh I like this blank one [Laughter] all right so GNC changes yeah oh but it shows up with that yeah so it changes if I tell it GMT which it should right if I change the time zone it should change the time okay scroll down is the red line still there at the very bottom with GMT oh good question yeah it's there cool we just didn't see it before because we didn't scroll down the blank one is great that wouldn't pass uat I'm sure we can make it go away if we had enough time uh oh this is it available time zones oh maybe we just get rid of that one yeah uh all right so we have some stuff in here there's also this contextual panel we can put things in um sorry Earl do the thing come on Siri uh okay the other way there's this contextual panel um enable new button let's make the new button do something also why why does this not show up anywhere it just doesn't there's a slot so it should be somewhere I don't know why it doesn't show it um oh well so new button let's see how that guy works so if I go to event and add event mapping we have all sorts of events I bet one of them says something like new button clicked nope I was wrong grid clicked for oh that's right so one of the things you can do is oh wow when things happen uh here let's let's mess around with the grid clicked for new event that seems more fun um so the first thing that I do if I have not used an event handler before or an event before is I log its payload do the same thing again all right so I have my event logging client script and we'll go ahead and add that here so people in the chat pop quiz I'm asking for a friend here what does the null and the four do at the end of that logging statement let's see if if chat knows I totally know the answer of course pretty sure I learned that from Chuck on a Live code all right well let's give us more space so if I click I should get there we go Earl did the thing not that big thing thank you uh so we get an ID we know when it starts We Know It Ends let me get the milliseconds I believe uh this is the most performant way to add calendar entries is uh is this is this moment is that what that's called I don't know interesting so how would we take this and translate it um yeah so we get something here I think for our use case it doesn't actually make sense to be able to create an event like this probably we probably need to open a modal and ask for a bunch more information um where the new button might make more sense so let's let's abandon that and try the new button let's start with the documentation and see if the documentation tells us how to use the new button is it a property enable new button okay so it's enabled enable new calendar click oh so let's turn that off because I don't we've decided that that doesn't really work for our use case uh sir oh it's it wasn't looking a thing it's a it's a toggle you just scrolled a bit too fast because you see enable new button yes that one's good but and this is the one that we disabled oh you did it I didn't see that sorry oh yeah it's down at the bottom Earl didn't do the thing what we really want to do is tell it what to do when you click the new button that new button is kind of built into drag in for new event double click to that new grid clicked for new event we disabled that and Astrid got the answer Earl please feature the answer thank you very much parameter two so replace her function array parameter three adds new lines and spaces ask for the number I totally knew that I'm glad that you learned that recently too Brad yes I don't know that it was recent but um all right I have not moved the screen for a while let's see man track new event I saw somebody mentioned it might be a declarative action I kind of hope it's not hmm I think I'm at a loss for this one that's unfortunate here let's uh I don't think that new button was working on one of those other pages but let's see did you have any events okay and it moved events this is client script do that's some fun strange demo data there how it's all random it's a random sentence that it creates um all right thank you well this is a helpful little uh page here event click modal doesn't show anything all right well that didn't work so let's pivot to something else poor and kit asked back in May 12th if anyone knew how to configure it on the forums and no one has answered your button uh we'll we'll find it I know people we'll get it we'll get it we'll find it for them we got you man or friend what yeah I mean the main problem with it is that it's not its own component and so like we could get rid of it and enable it all right we're just gonna have to let's pop over and it will do oh that's right quick question sure scroll up real quick uh okay under security allow create is true that's good it wouldn't be a security issue no I just need to I need to dive into the source code probably um it is uh not obvious someone suggests maybe we inspect the button element to see if there's something which might be helpful yeah unfortunately that's not all that useful uh with the UI Builder Pages because of the Shadow Dom and everything um I mean we can definitely do it but I don't think it's going to help us much right it's not it's not actually doing anything um so this is all we get well what else do we want to do what if I we add something where I can click on one of these open a modal and then change the date that seems like something we might be able to do in the next 10 minutes it was a good guess Dimitar uh so I want let's do something with the event clicked so first we're going to create a modal [Music] we'll just see if we can get it uh pop up first um move events sure so let's see if when we click the calendar components or we click one of the entries we can get that to uh grid click for new event that's not what we want we want event clicked so let's do two things let's open the modal and then let's also add our client script so we can see what's in that event all right so we're there if I click on it it did open the modal so we get the right we got the right event quick question do you know how to remove that maintenance plan event that's there is that just default data that's a great question we had someone ask that on sndevs.com a great place to go for help that nobody answered the maintenance plan I mean I think probably we can get rid of it so we have all sorts of like demo data in here right there's security available views view settings spans timeline section let's see I mean all of these things probably should be removed oh there it is maintenance at the very bottom oh there we go let's do this hang on let me I'm going to take a screenshot let's get rid of it all and that was under Mark spans I don't know because it didn't change great uh What uh Mark spans interesting expected but God object it's a fun message uh okay so we're not gonna spend too much time on that right now we were doing a click thing uh uh yes where we got this back so that event does give us a pretty good amount of information here we got all the stuff that we passed it so let's do let's see if this works let's click into our modal um let's create a new client State parameter for active event ID [Music] um that'll be blank and then when we click on that thing we will set the active event ID to is it payload hopefully we get that exposed here and that nope all right what is it event uh ID okay yep so that should give us the sys ID of the event and then in my modal we're going to try adding the form component and see if that works uh I do want the Form controller I set some test values for us I don't actually want those values to be there I should have said no that's all right so this is what we're gonna do I'm just talking to myself at this point um so the table I think it's called that is the name we will just hard code it in there this sysid is going to be date the one we just created I don't think I need any of these other ones we're just going to use the default view no context I don't think I actually have to do this but it bugged me that they created all these parameters okay so what we just did was we added the form component here and then when you click on a calendar entry we're going to pop the modal we're going to set the um I'm going to set the sys ID of the record we're looking at and hopefully we get the form for that vehicle so we could change the data if we want to let's see if this works absolutely did not work okay catastrophic failure heck yes why why did it not work all right let's try again it's possible the calendar component and the oh no there we go hey that actually worked it's a Chevy Tahoe yeah all right so we click on an event we get the form I think the next thing to do would be to add some buttons uh which we could go ahead and do let's go um you probably want to add is there a form button action maybe action bar yeah oh all right let's see if we just uh set this data record table uh we're gonna have to redo that part or no that's I don't know that's from the controller all right let's refresh all right so if I go that was let's try changing that to the 14th save all right so let's refresh it did move okay but that was terrible we don't want it to have to uh do anything like that so how do we oh this is what we do all right so uh The Form controller fires a whole bunch of events I think um yeah so I think if we look for record data fetch form status is there a save update the configuration menu record Property change now field value I think we can probably use one of these um like record data fetch maybe and then if it's the first load we do something different than when it's saved but I'd have to we'd have to look a little closer at that one uh but basically I think what we'd want to do since we don't actually like control the button uh right the button gets added through the action bar uh and that's kind of a declarative action there's probably a couple of different ways we could do that um but I think the way that I would want to do it is to use the data resource and whatever the data resource saves uh close the modal and reload the page but maybe that will be a next time activity or uh maybe we'll um yeah maybe I'll fix this and put some code out or something um although that that may not happen so I actually think we got a lot done you know considering Brad three hours ago was very uh unsure about himself I'm still pretty unsure about myself with the calendar component um but one of the reasons we wanted to do this uh was because we are getting a lot of questions around the calendar component I know our internal teams want to make the documentation better so for me one of the reasons I wanted to do this was kind of seeing where our documentation is lacking and the easiest way to do that is to actually try to build something which is what we did here so I have some pretty good ideas of where we can make things better we'll probably start with a community article on some of these things and then then get the docs updated as well but thanks everybody for joining uh any uh any closing remarks oh we do have a question here uh we had a question if you wanted to visualize a particular page within the modal you can create a viewport model so a viewport will show a page collection so I'm going to click back oh and my screen's not up anymore Earl do the thing do the thing thanks Earl um so if you open uib in Utah forward uh you have your experiences and then your page collections uh so page collections are basically sets of pages that you can build uh that can then be reused across multiple experiences within viewports and tabs so if you did have a page that you wanted to reuse in multiple places you'd probably want to create a page collection for that page or create a page within a page collection and then you can show that page within a viewport so the answer to your question is uh no we can't just show a page in a viewport it has to be a page in a page collection so it says to be specifically built for being shown in a viewport there are some limitations to the data that your page collection and your parent page can exchange with each other and that also has to do with what kind of viewport you're using I think I believe that like the viewport tab can do more than like the um like a viewport modal but uh I don't I don't know that for sure actually but yeah so thank you guys so much for watching today uh two last Quick plugs our next episode is not going to be in a couple of Thursdays it's going to be on July 13th same time same place and if you want to listen and hear more about uh turning on next experience and what that's going to be like kind of see a before and after comparison between core core UI and next experience tune in to the platform Academy on the 21st at 11 A.M Eastern I posted a link earlier in the chat I hope to see you guys there but thank you all so much for hanging out with us and learning about calendar uh components it was a lot of fun thank you Brad yeah thanks everybody bye bye [Music] thank you [Laughter] thank you