hello today we're going to look at client state parameters client scripts and page events in ui builder so to start our scenario here this is a page that if you've watched some of the previous videos should look kind of familiar but we've got a couple of containers on here and then we have this component that's a simple list component and the simple list component is showing all of my open to do's so you can see we've got a filter on that component where the user is me and the state is open what we want to do today is we want to add a couple of buttons to this page that let us toggle from open to do's to completed to-do's uh and there are a lot of different ways we could do that in ui builder it's really versatile and powerful what we're going to do is we're going to add a couple of buttons to the page and those buttons are going to control uh the list here so there are a number of steps we have to go through to do this and we're going to touch on you know as i said client state parameters client scripts and page events and hopefully this helps understand how those how those things all fit together so the first thing we're going to do is you know i showed that filter as always with our properties on our components we can use dynamic data binding instead of manually hard coding things and we are going to do that but first i'm going to set a new client state parameter and you'll hear these referenced as client state parameters or client state variables but basically you know this is similar to building web components where you're managing you know the state of your component and in this case this is just different state variables on our page that we can then manipulate and reference in different places so this one we're going to call this to do filter pretty straight forward and we're going to give it we're going to give it an initial value that's going to match what's currently in that filter i have cheated a little bit since this is more of a demo and i have mine here so basically we're going to do state is open and then user dynamic if you've ever used the you know user is me this is what that encoded query looks like so we've got this here you can see that my to-do filter now has this value so let's make sure that that is the right value and instead of the filter we're going to change into the dynamic data binding and it should have this in my page already yeah so state and then to do filter so i'm going to click on that and it shows me my five so there's a sixth one that's completed so i know that since it's showing five that's the right thing here so i'm going to go ahead and save that page before we keep going so the next thing that we're going to do is we are going to create a page event that's going to call a client script that's going to update that client state parameter so i'm going to do that by clicking on body and in in our last video we did something like this but i'm going to come in and add a handled event so there are different places to call events and we'll look at later on you know why we why we're going to do it here but this is going to be a filter uh let's do capital cause that's what i did in other places and the event name is gonna be all caps anyway uh so it is gonna have a payload field and the payload field is just gonna be the state right so we want user is dynamic me is always going to be the the parameter there and then the other parameter is going to be state so this is going to be the thing that we're switching and sure we'll give it a label it's going to be a string because it's going to be draft open completed or canceled i think are our four states here so let's click add and you can see here i now have this filter to do handled event and then on my page event mapping i now have this filter to do event that i can add an event handler to but before i add an event handler our event handler is going to call a client script so i want to go ahead and create my client script so we can call it from this event handler so the way to work with client scripts in ui builder is to click on the little client script icon down at the bottom left it looks like a closing script bracket so i'm going to click on that i'm going to add a new client script we'll go ahead and call it filter to do's because that's what we're calling all of our filters here and then in the script we can see i've got a i've got a few different things here so i know that my you know my property here for filter to do if i click on that it's passing a payload that has a state in it so i think i'm gonna want payload.state and i think if i go api dot um no not api if i say event uh then we get the payload here right so i'm going to get the payload and then we don't have that in there because i'm not calling it from i'm not calling it yet but it's going to be state so this should give us our value so let's say uh filter state is the state and then the other thing i'm going to do here is i'm going to say api dot set state so this is confusing because we're using the state of the to do record but what we're talking about here is this client state parameter so set state is what i want to use if i want to set a client state parameter value so we're going to say set state and then it's telling me i need the name of the state and then what i want to set it to so i think that that state was uh let's say it was filter say was to do filter then i'm going to set that to and we're going to cheat a little bit here and i'm going to grab it from off screen but i actually want to set that to the user dynamic and then state equals and then we will say filter state autocomplete all right so we're setting the state of the to do filter so let's click into that to do filter it is lowercase okay all right so what we need to do now is we need to connect this client script and i apologize i know there's a lot of steps here we need to connect the client script to my filter to do page event so we're going to use an event handler on that filter to do page event i'm going to click on that it's going to bring up all these different options but under scripts i have filter to do's and i'm going to add that so what we've done now is we've said hey whenever i fire this filter to do event on this page i'm going to call this client script and that's going to set the state of my client state parameter to you know whatever i have set so that's kind of our first step here we've wired all this together now we need to go in and add some buttons to actually make this work so i'm going to minimize that i'm going to save because i save early and often because sometimes i don't and then it comes back and invites me all right so what i'm going to do is i'm going to add another container down here underneath and then in that container let's make it two column and in this column i'm going to add a button and that button is going to be called show completed to do's uh and let's go ahead and in this column i want to justify um space evenly i want to align center there we go that looks good show completed to do's uh and then we're going to connect this to our page event so i'm going to say we're gonna call our page level event handler so i'm gonna call that filter to do event handler and then here my the value of the completed state is complete so i'm gonna hit add and then we're going to come in and add a button here as well and we will call this uh label is show open to do's and we are going to call the same filter to do handler and this is going to be open and let's go ahead and align the center and i think this should work let's go ahead and try it so by default we should be seeing open to do's which i think we are if i say show completed to do's it changes it and this is our complete to do and then if i say show open to do's it shows open if i redo this it stays open go back to complete by clicking again it's complete so just a quick recap because we did a lot of things in a short amount of time here uh we used this client state parameter right so this is a page state value that we bound to this component and then we are manipulating this from these two components so i'm i'm sharing values between all of these components through this client state parameter and i could have done this a couple of different ways like from my to do button i could have added a a new event handler that actually updates that client state parameter but i would had to put in the entire you know user is dynamic me and then the state that i wanted to end up with and you know i end up duplicating things and at this point if i decide that you know hey my app has gotten more complex i have more parameters that i need to put in i can just come and update that in the client script or in the one page parameter so really a good practice to follow from this is define these these page events and then consume them from multiple places instead of you know doing a lot of work from these you know button events and things like that thanks for watching