all right in this ui builder demo we're going to add an input component and a button component and use those to add another task to our work tasks list here on our work management home page we're going to hit on client state parameters data resources client scripts and event handlers and components and their properties so this should be a good picture and how to make all the different parts of ui builder work together so we're going to start with adding an input component into this container here so i'm going to click on the plus sign i'm going to hit input i have this input component here i don't want it to have a label but i do want it to have some placeholder text and we're going to say quick add uh task here and if i click out of that i should see that here yep uh the rest of this looks right uh so that looks good and then what we need to do now is when i enter something into this input box i need to take its value and bind it to a client state parameter so i'm going to click on this little client state icon down here at the bottom left you can think of client state parameters as kind of like the pages scratch pad it's just a variable on my page that's going to hold a value and then i can do something with that value so let's hit add let's call it short description and we'll leave it a string so right now its value is null but i'm going to come back to my component and in my component box on the right here under config these are all my components properties so these are basically the inputs for my components and then on the very right these are my events so this is what my component can do that can interact with other things on the page so you can kind of think of these as as outputs so i'm going to use this input value set so when when i set a value in this input i want to do something with it and what i want to do is i want to update a client state parameter so i only have one it's called short description we just created it and then i want the value to be i could hard code a value in here or i could use this dynamic data binding icon that shows up pretty much everywhere in ui builder and lets you bind data to this input box and that's what we're going to do and so for my component we are using this event handler and my event has a payload and that payload has a name and a value and i want the value of the payload which is going to be the value of my input field so i'm going to hit add i'm going to save this because i save early and often so now we have successfully when i type something into the input box and tab out of it or click out of it i will set the client state parameter to the value of that input box so now we need to do something else we need to say all right well we probably need a button to click on so let's add a button here let's just say button and i think we should call it something like well let's say quick add work uh let's say quick add task because it's a work task all right but before we actually give it an action we have to create a couple of things so the first one is we need a data resource so a data resource is really a way for my page to interact with the server somehow we have a lot of data resources around um querying data but the one we want to do now is we want to update a record so i'm going to choose the update record data resource here i'm going to hit add so this data resource doesn't have any properties other than telling it when it needs to run and we're going to call this through a client script so that's this third icon here so i'm going to click on the client script i'm going to click add we're going to call this quick add task because that's what we've called pretty much everything and before i'm just going to paste in a script here and we'll kind of walk through what that does so for the most part what i've seen out of these ui builder client scripts is they basically manipulate some data and then do something with it so what we're doing here is we're taking that short description remember we once you type something into this input field and tab out of it we're binding it to the client state parameter and this is how we access that client state parameter and then we're also grabbing uh the logged in user's sys id so i can just grab that through this api.context.session.user.sysid so that's you know similar to if you were going to call you know get user get user id that that type of thing and then we're going to construct an encoded query where the assigned to is that user and the short description is the short description that we entered there so this is going to be an encoded query and then we're going to pass that encoded query to my data resource so let's make sure that i have my data resource named correctly so it's called update record one and in this client script we need to change that to update record one and we'll execute that and then we're gonna pass it the table where we want to create a record or or we want to create a record and then we are going to pass it this template fields which is our encoded query and i realize that we used update record instead of create record and what we actually wanted was create record so instead of redoing this whole demo we're just going to redo this so i'm going to add a second data resource we don't need this first one the second one is called create record two so let's go back in here and call it create record two and now uh now this should work here so the last thing that we need to do so we have our data resource and it's executed from this client script where the client script grabs our data creates an encoded query passes it to our data resource so we need to call this client script and we're going to do that from this button so i'm going to look at the events and my button is a simple button it only does one thing it gets clicked and then it does something when it gets clicked so we're going to add a new event handler for the click and we now have under scripts this didn't happen if you back up the video we did not have this quick add task under scripts when we added an event handler to my input my input component we have that now so i'm just going to say quick add task and i'm going to save it all right so we've added quite a few things here let's go ahead and test let's say uh here is a new task exclamation point because we're real happy about it i'm going to add it and then let's hit refresh and here it shows up here so we're only showing five at a time that's why the list didn't get longer but here is my new task that i created and what we can do is we could go back in here we could add another event handler to refresh my list and clear out the value in the quick add task uh that's not what we're going to do in this demo but i can chain together event handlers based on one action so i'd probably do that here but this was a demo showing you how to use a lot of the different parts of ui builder and make them all work together thanks