[Music] [Applause] [Music] [Music] [Music] I don't like to talk until the music's done hello and welcome to you and I Builder live uh this our second show of the new year I think that sounds right uh my name is Brad Tilton and joining me as always is Maria Gabriella o prector a lot of you guys may know me as mgw in the community hello everybody happy second show of the Year all right well on you and I Builder live uh we generally get in and do live development using UI Builder most of the time it doesn't always involve UI Builder uh but most of the time it does uh in things that we don't practice we're just trying to get things done and do some real development uh that was really obvious in our last episode uh where we struggled and were unsuccessful and then had it figured out five minutes after the show was over um but uh little bit of housekeeping on that uh our last episode we did standard record page and Page collections uh and then the next week we did something really similar on our next experience academy uh where we kind of show how to go through the whole process in a practice demo so if you watch the last episode and want to know how we did that uh we will be posting that Academy session sometime soon on the next experience Community um that was last time uh this week uh tell us what we're going to be doing so this week we're going to be working through and figuring out the Clara of actions um just as a quick spoiler about the academy um I'm going to go ahead and share my screen and show y'all where it was that we missed the field so here I am on a ux extension point record for the uh a random page collection I just clicked and it turns out down here there's an icon field which is where we needed to fill in the icon for our page collection and that's just the little tidbit that we missed and everything worked perfectly afterwards so now to start you can get to that page from uib uh from the page collection record I forget what exactly you click on but it's up in settings and you can go open record and I think open page collection and then it gets you right to that screen yeah that Academy and the Academy's post should be updated tomorrow if you want to see the full much more rehearsed uh version of what we just told you um it was a lot of fun figuring that one out so today's topic declarative actions Brad what are declarative actions o declarative actions are uh basically for the most part they are buttons or field decorator you put on a form in a workspace uh they are kind of analogous to UI actions but there are a little bit of differences uh but it's basically how you how you add some sort of button or action to a workspace uh without just dragging the button component onto the screen so they can show up in a list component and a form component inside of a field with a little icon for a field decorator um and so it allows you to kind of add stuff to to a form or a page without having to own that page in uib uh page counter but yeah I am trying to send Earl right now a link for him to post in the chat here we go there is an awesome article out on the community by Dylan Lindgren who goes over everything you will ever need to know about the Clara of actions I've gone ahead and and it should get getting posted in the chat here soon thank you Earl so we're going to go ahead and open up UI Builder and I'm already on the service operations workspace um I do have to be um very honest with you guys I'm so sorry I might be letting down a lot of you but this is rehearsed I'm sorry I I know typically we like being a lot more Reckless here but I figured that this was a good cost you know just to make sure we all get declarative actions right because it's so confusing in the first place so you guys can ignore all these other times I've practiced and let's just open up the SRP record it does help to be rehearsed with the declarative actions because so many things can go wrong honestly Earl I asked uh Brad with the declarative action definition because I my mind blades we actually didn't rehearse that part no we didn't we barely are able to decide who's going to speak first before the show starts um so we're gonna go ahead and get started and we're going to first create a variant of this page by going in and doing duplicate variant and we're going to call this SRP record uib live and SRP stands for standard record page uh from our last show so that is the newest version of our record page template I love that before we went live Earl told us he was going to be less troly today and five minutes in we've got a lot of page counters I appreciate that the page counters are starting from the beginning though so the reason why we are going to so last time we created a page collection we we didn't need to create a page variant um which is an awesome feature of page collections the reason why we're making a variant this time around is because we're going to add a modal and a page level event so we're going to go ahead and oh my gosh I forgot what we're going to do right right right create a new model I completely forgot what our use case is I forgot to say what our use case is so there we go see it feels organic it feels legit so our use case today is we're going to create a um a way for people in the service operations workspace to be able to see their callar related records so we're going to open up an incident here and let's say I have my collar here and I want to see A's related records I don't have any real easy way of doing that right now so I'm going to go back to UI Builder and I'm gonna I chose to do this with a modal you can do this in many different ways so I'm going to go ahead and create a custom model I think our use case last time was the same use case in a page collection right in the I think it was so yeah there's lots of different ways to achieve this so I'm going to rename this to users related records be sure to rename your components froze for me although I can still see the screen okay if you can still see the screen that's fine can you hear me though can anybody else hear Maria Gabriella there she is you're back I'm back I'm going to go ahead and add a stylized text and I'm going to remove the preset and then I'm going to add here a list Pop Quiz Brad why are there so many list components which one should I use uh it's a good question is this what do you is this a Vancouver instance I think so it's definitely not Washington I can assure you okay okay um why why are there so many list they they just do different things so there's um you know the main actual list components are list and simple list and then presentational list is a newer thing so we're going to go ahead and select simplist because that sounds nice I'm going to go ahead and change this from the no I think I'll leave it at the task table right and I'm going to edit the fixed filter here and I'm going to add from the incident table I want to grab the collar I'm going to change this to bind data I'm going to dot walk here and I just typed in a whole bunch of stuff I'll show you where you can find that here in a second I'm also going to add another condition for or and now we're going to dot walk from requested item and uh we're going to grab collar or rather requested for I don't remember my alphabet there we go I'm going to put in the same information I have here and I'm going to hit apply and I'm going to hit save just for good measure so where did I get that data from I got it from down here there are these data resources where we can get information from and this specific one I got it from the is it this one it's probably the Form controller yes data. record whoops so yeah I got a data. record and then I went into the form and here I basically contrl F and I found the H ID field and you basically just create this uh data. walking from there just a quick review for those of us who might be joining us brand new so we've got our filter there and we're going to go ahead and now uh add a little button at the bottom here going to have variant primary then I'm going to add event and when the button gets clicked I want it to close my modal dialogue and remember if you want it to close it you got to uncheck open or leave it unchecked this always gets me select your modal hit add always hit save so now we've got a list and we've got our button now there's something that we're going to look into further with this list in a little bit you guys will see I think I did something wrong but I haven't identified it yet um but we'll look at that in a second so now that we've got our motal set up we're going to go and well you know what I really don't like how this looks I'm going to go here to the footer it's taking a little moment to make things look pretty awesome so now we're going to go to the body container and we're going to create a handled event Brad can you explain to me like I'm five what a handled event is yeah so all of our uh not all most components and data resources in UI Builder uh when you interact with them they throw some sort of event and then you connect an event handler to that event and take some sort of action um so there are times where uh you may want to be able to associate some sort of action or event handler with some sort of event and then call that from multiple places uh and so that's one of the way one of the things you can do with a handled event here is I can create a handled event so I'm just defining some new event and then I can say every time somebody fires this event uh we're going to do something and that allows me to connect to that event from a script uh from multiple places on the page but it also lets me connect to that event from a declarative action or something that's not on the page which is what we're going to so I've gone ahead and I've added my handled event down here just by clicking add and I'm going to go here into page event mappings I'm going to add a page event mapping using my handled event and I want that to open the specific modal remember click on that and I'm going to hit save so from here we're going to actually go in back into the platform View and we're going to create create our actual action so this is the part that can get a little bit confusing we're going to go in and type in field decorators because I want to make a declarative action of type field decorators and something something this field needs to be filled in so you should go to the table and fill it in because it's not on the form View and this is an easy way for when you click new for it to already be filled in which I had no idea about I actually learned on this show that if you have a filter it'll actually get put into the new record you create from a filtered list view which is super cool I think we fixed this in uh in Washington say no the whole having to filter it to open it up the right oh okay we're going to name it users related Records action name user related record we're going to be able to implement it as different things so you got server script client script as usual but I want it to be a UXF client action and it's my understanding that this is what lets me um oh interesting Arc nice so I'm going to click on the magnifying glass so I'm going to hit new to create a new action payload definition and I'm going to name this like that and this is actually creating the actual UI action itself sorry declarative action itself if you're wondering like what all of these things mean um that article that we linked earlier is like has everything in it it's really impressive um so that's I would reference that book Market if you ever have to do anything with the Clara of actions I think eventually we'll get some of that pulled into docs and other things but uh Dylan really did a great job collecting everything from lots of different sources and putting that together so here something to note these two right here are also field decorators and each field can only have a Max of three displaying at any time so when I add my field decorator I'm basically going to be capping out on that but also this little I reference field icon that you can use to look further into the record that is Set uh where how do I open up my tab there we go that gets set over here so for that one it's set the field type and field type reference but we don't want this to be on just all reference fields we want it to be on a specific field so for that we need to go to the table we're going to select incident and I'm going to select specific field and now will pop up a list of all the incident fields and I want it to be on collar icon here you can basically select anything you want but I have um this one selected already so we've got our table we've got our we know it's active you should always fill in tool tips just to be nice to yourself in the future remember what things do so I'm going to fill in a quick tool tip I'm going to hit submit I really should have hit save but anyways here it is myu record and now I'm going to go in and I'm going to configure a couple of things right [Music] here first I'm going to go to Advanced View and I've got some nice tabs right here we're going to go to conditions and I'm going to set record conditions where collar is not empty that way I always have I that button just won't pop up when I don't need it to so I'm going [Music] to right click and Save and we're going to scroll down to ux add-on event mappings and hit new and it's my understanding that this is what Maps the action to the actual um the action to the handled event so this is super important and in my testing one of these pieces was the part that really kept messing me up so this Source element ID so to start with there is a whole bunch of just Fields here that are all super useful they all should be in my opinion there should be some form of indication that these are like super important almost required Fields but you use them in different um sets basically and the best way to learn about this is to take a look at the other ux outon event mappings that are out of the box and you'll see what different combinations the different ones use them for in this specific one we're going to use the parent macr proponent which can be the page and we're going to find the page variant we just created uib may not have been the best here we go SRP uib live what just [Music] happened okay just on the wrong tab so we've got the parent macr ponent and you can see that that removed a whole bunch of different fields from it so that's nice now we're going to Target a specific event on that table and it shows us all the page level events on that macr ponent sorry we got our user related records and now Source element ID this is the element ID of what is going to be emitting the actual ual event and this was kind of tricky um I really relied heavily on the uh next experience developer tools Chrome extension which also works on Arc I think um because it's all chromium but this is man these trolls on this call are just if y'all are hearing beeps that's my bad let me set no okay why won't it [Music] mute okay I've quit out of teams you guys can't get me thanks where's it coming from that was me oh okay sorry about that everybody we have a troll producer as you guys could probably tell with all the Antics we gotone up to before so ux add-on event mappings back on track we got our Target event we have our parent macr proponent we have our source element ID which is form for the standard record page specifically now I'm going to copy a whole bunch of payload mapping and the that Source element ID that's I believe that is the ID of the comp the form component on the page so if you had renamed the form component to something else it might be different correct this is the IDE of the component that's going to be emitting this event so and I'll also go over some troubleshooting steps here shortly but now let's see if it worked we've got technically all the steps fulfilled so now we should see a little button popping up here and we should see it work it didn't work yes I have I have no idea how this worked on the first try when we were doing this for a um a different event but it did not work you guys can see here I click the button and it doesn't do anything so now into my troubleshooting steps I like to break things down like I broke them down when I was in tier one and tier two um not just crying under your desk you're breaking down the uh the troubleshooting yourself so first I'm going to go in and another reason I like to make a variant is because I can just add a button wherever I want so I'm going to go here I'm going to add after and I'm going to hit button so this button is going to let me test to see if my page level event is actually working so I'm going to go into events I'm going to click on add event handler and and I'm going to find my user related record page level Handler so I'm going to hit save and now we're going to test whether my modal even works so I'm going to refresh the page now I got my button and okay we got my modal working but my actual icon won't work yet so now we know that the problem is with the declarative action so I'm going to go in and I'm going to make sure that everything looks right we got the client action UXF field oh something else that's really helpful with these is confirmation required I like to do it to make sure that it's actually working kind of like a sanity check so now if we go back to our workspace refresh the page I'm going to click it and we know at least the action works but now we know that it's the UXF record or UI uh next experiences aggressive wait a minute where' my ux add-on event mapping record go where is that record that would be it I don't think it's supposed to show up at all without that record whoops yeah here's the one no did it get deleted oh no this is from when I it didn't save oh there is a spot where you in the add-on mapping when you click out to create that uh you use the reference field to click out to create a record and then come back you you may not have saved it at that point you know what I'm talking about weird okay let's fill this back in yeah payload I blame the team's chat trolling I think it probably was Earl's fault he might have gone in there and deleted it okay we've got all that we're going to hit submit okay now we've got it now is where I'm going to do a cache. do hash I like hashtag blame it on Earl and remember when in doubt clear your cash so now we're gonna figure out how to clear our cash and Arc you could try a different browser unless you have only shared that browser uh oh oh we apparently just need to click new tab type in clear oh oh let's refresh oh here we go clear cache and refresh whoops yeah Arc might be winning me over you can go command shift R and chrome you can do the same in Arc it seems all right okay yeah I'm gonna look at this in a new browser maybe I should test in a browser see if it works for me instead of just sitting here and not doing anything instead of sitting there and heckling I also fun but I'll test it so this is this is legitimately something that you need to keep an eye out for with the Clara of actions and Page level events specifically is a lot of the times it may not work for you but you should try it in a different browser when I was building out this lab I literally spent hours and a day and a half trying to figure out why it wouldn't work and I just tried it in an incognito Chrome window and it magically worked first try it didn't work for me so I don't think it's a cash issue oh no where's my but our did I sorry ay I was trying to think I I was just trying to think of the quickest thing I could for the sake of the lab I didn't even think about how that might reflect upon you my bad I promise everybody ay can get her computer to turn on this is just defamation let me see if my page level events if I configured them [Music] right actually I think you did because it fires oh here's the problem are we testing the wrong page I don't know no because the buttons there and the modals there you would think what did we name that handled event we named the handled [Music] event users related records oh I put an apost it didn't remove the apostrophe that that could be a problem yeah why wouldn't it sanitize that okay let's try this [Music] again and we're going to add a page event with the new one open or close modal open save yeah it is it is misspelled Nick points out see that's a feature not a bug it's just to make sure I can distinguish it from potentially other records that might be there I like it um write the button no we weren't testing the right page because I renamed this button to test and the button we were looking at before was Button yes you're right okay let's set this back up to the page level event and now let's test it again good news this run was just cursed from the beginning everything is working as Des signed oh the user pres no I appreciate it Nick okay cool we've got this working and this still doesn't work oh no I need to create a new ux page mapping right because we changed the event yes so we had multiple things going on that went wrong right see maybe I did all of this on purpose to still have fun on the show no you have to be you have to be more uh more forceful with it like of course I did it all on purpose of course it was just too rehearsed before so what I generally do at this point when I think I have done everything is I walk through every step again um like did I create this record does it relate to this record it's it's complex enough that that's the only way I can troubleshoot it sounds good let's make sure that everything here looks right real quick I'm testing it in another browse her real fast it worked it worked just too fantastic it was the page that we were on and the cash right and the event because I had an apostrophe and the event okay um so but there is a problem uh something that I haven't sat down to figure out yet which is this isn't like I don't think this is actually doing like my filter correctly because think there should be more or less records there should be less like 68 less records there should only be two oh that's right that was basically all of the records yeah that was 70 um you can use the next experien Dev tools to see what's actually getting passed in to that property but that's the page itself it's not the declared action correct no this is the filtered list that just isn't working the declarative action was a success a huge success a huge success how do I open browser tools from Arc well does your Chrome extension work in Arc we're about to see [Music] container let's connect I'll try not to be an arcader anymore I'm yeah AR is kind of cool actually although it doesn't work with my typical workflow of multiple tabs like multiple windows rather um but it's interesting [Music] um extensions I'm trying to find developer what's the name of the there they are let's see if the there they are so you're saying we should be able to see what's getting sent in here yeah so the list has a property for uh I can't multitask know I'm trying it should have a property for the condition that you're passing it right so we could see what is actually getting passed to it right here if we know the name of that condition which I'm trying to remember there we go bre incident cerid we go equals nothing it's blank oh so let's go back and make sure that there's a value there yeah did I put it in the wrong place is fixed filter not the right one I mean either way I think fixed filter just means that people can't oh you want to Value not display value though oh that may be it caller ID oh no no I think it's just color id. value you're doing value. display value so on the top one get rid of value yeah well so the reason I did that was because do uh I'm changing over to find the actual record here so we can have some test values show up so here it said value as a field so I thought I would had to add dot no display value just value Works no well because value it's all of this is metadata related to the field so value is just the property that you're on here so yeah value will return that CIS ID that's next to it but I think it's working because the it looks like it changed on the preview it does look look like it's working now let's go ahead and refresh there we go that looks good next experience Chrome developer tools are so nice yes there have been a few things now where I'm like oh I should use that and then immediately you figure out what's going wrong so there's some cool uh some cool things coming up with the latest version of the developer tools as well that I think we're going to highlight on this show sometime in the next two months see I I don't know what to do now because we've had like success and it was we still have like 20 minutes to fill what are we going to do Brad uh I mean we don't we can end early or we can try to accomplish something else um so so I can throw a little wrench in this what happens if you change the collar and then hit that button will it reflect the new collar I think probably because the data resource may change but let's let's try it uh I think I'm in here yeah you can pick on me so do I hit save first or do I click here let's try it without hitting say oh it did work oh so I think the data resource uh the record data refor resource must refresh whenever you change a value there and it gets reflected that's nice that is nice well I expected that not to work so um is there any way to have the icon change oh like when I click on it I don't think there's a way to do that yeah I don't think because it's getting set at the platform level on a record um yeah and it's not a UI element we can mess with from from UI Builder add a list drill down from the modal list to the record so does that mean I can click on something from the modal and open up a oh let's do that yeah yeah so if I click on something from the list can we open that record in a subtab on the record this is actually really easy to do really don't say anything let's see if I can figure this out I would assume it's an event mapping um stop me if I am going the wrong way you're going the wrong way no how wrong you want uh so one of the cool things about you had it you had it in the popup it was just the wrong event so if you add it again one of the cool things about a controller is it comes with a ton of events that you can affect the form from and so if you scroll down and find the controller like see all of these like notification related list but one of the things it has is called relay open record it's towards the bottom um but yeah relay open record so what that does is it you're you're telling the controller to open a record and so it's actually going to open it in a subtab on that record page so it'll show up next to like details then you'll have a record so all I think all you have to pass it is the table in the CIS ID which should be in the payload of your event and I I think because this could be an request item I think it's payload I think you want yeah so yeah I think just table on soci there yeah and so the route you were going would work if you were trying to open uh a new top level workspace tab but this is kind of a nice like sometimes you don't want to open it at that top level you want to put it inside the record that you're already on interesting so I think it'll show up next to related records you just yeah I just clicked on one of them not like that well it didn't uh it didn't close the modal we could add another event to close the model when you click on something but it did work it put it next to the I guess it's next to details not really it doesn't want to open the incident though I think you're already on the incident oh that's so smart it knows I actually I I say that my I wrote a little lab for the contextual sidebar and ran into that issue probably five times before I like figured out that the thing's already open it's not going to open a new tab it's smart enough to know that that makes sense so now I'm gonna add in to close the modal dialogue yep awesome that was a lot easier than what I was gonna do it is once you get a lot of this stuff set up and you're kind of already in your page variant a lot of it gets a lot easier but there is definitely a learning curve I can't think of anything any other um additional challenge to add on to this um I think we could add one more what if we made it oh what if I don't know if we can do this no I don't think that's going to work it would be cool to where if you clicked on it and there are records it pops up the modal but if there's no related records you just see like a field message that says no related records I think that'll take us too long because we'd have to change the way yeah we'd have to know that from this page which we do from The Form controller though don't we uh we don't know if there's related records from the form or we don't know if there's other incidents from the same callar because we're doing that directly from the list component rather than like a data resource so we'd have to add like another data resource that told us whether they were related related records you're right so basically the way it would work is create a data resource that gets triggered when you open up this modal or at least refreshed uh well you'd want it triggered on um You probably need it on page load because what what you would probably do is that handled event uh you can there's a condition field on event handlers so if you just like add an event handler here or open up the relay open relay record open data resource right any any yeah if you scroll the way down to Advanced and then hit conditional you can add like formulas in there you can even do like some you can kind of sort of do some javascripting and so if you had two different events that you wanted to fire you know based on different things so like you know if there are related records I do one thing if they're not I do another thing I can do that from this event handler conditional so you'd add two event handlers and have different conditions for both but one of the cool things about that uh G the um record controller is that uh it has event handlers for interacting with the form um so like if we went back to yeah anywhere where you can add an event handler even yeah here here would work even though it's it' be a recursive but oh yeah that'll work so if you scroll down and we just kind of look through some of the event handlers and the controller so there's like things you can do with the activity stream you can set values you can add form messages remove form messages like you know collapse tab all sorts of things uh like interacting with that form form component itself from uib right so things that you might normally do in a client script or UI action you can still do those things in a client script or UI action but sometimes you might want to do that from uib from like a subpage in a page collection or like something in a different tab or you know however maybe not a different tab but like a button and uib refresh another one and the Form controller is unique to the standard record page yes it is unique to yeah if you use the standard record page template you'll get the form controller if you build a record page from scratch and add a form component it'll automatically add the Form controller it's just those older versions of the record page have instead of the Form controller they have that g form data resource that also does some of these things it just works differently awesome I think we're good to go then all right should we plug uh I think there's a Washington DC Tech now coming up right my guess would be that it's a week from today but maybe Earl can pop something up that tells us when it is he was eating I think it's um I'm pulling it up now okay service on February 1st at 8 AM Pacific time so that is EA day that's also uh February store release day so all sorts of things will happen on that day I sent Earl the link on slack to post in the chat for those of you who want to register for the tech now also we are going to start our first of the what's new in Washington series of academies on February 21st we're going to be going over what's new and next experience and experiences in general um and then our next Academy after that is going to be of particular interest to our audience here it's going to be what's new in uh Washington DC for UI Builder and workspaces that one is going to be March 20th at 11:00 a.m. eastern time um be sure to tune in to that other than that our next show for you and I Builder live is going to be February 8th what are we gonna do on February 8th Brad did we did we decide that already nope we have no idea I don't I never remember things so we're gonna do something fun I think let's do fun fun it'll be something in the Washington release version of uib so we we'll probably talk a little bit about what's there and and that sort of thing and then do something with one of those Washington features there's there's some good stuff I know exactly what we're gonna do then awesome then that sounds exciting um I can't think of anything else that I need to shill or announce we good to close it out I think so I think so there is I think a knowledge call for Content starts soon um we'd already did so too uh but uh yeah that's the only other thing I can take [Music] on wait we didn't even get to say goodbye he's playing us up bye everybody thanks for joining thank you for joining bye see you on the eth do do do do do do do do do do do do do do do do do do do do do do do do do do do do do do do do [Music] [Applause] [Music] do [Music] [Music] n [Music]