[Music] hello and welcome to ui builder bytes in this video we're going to take a look at client scripting in ui builder this video is going to be embedded in a blog post where i go through some of the client scripting and what some different terms mean and then the most common properties and methods and apis that i've used in ui builder it's all pretty well documented on the developer site if you want to go there and there should be links in this video and on the blog post to the developer site in this scenario we're just going to take a look at some of the different methods it may not be the most practical use case which if you've watched some of these by now you you have realized that we don't do a lot of practical use cases but we're going to basically take this plant status page and when i click this button i want to set a status message here in the stylized text component so you can see that we have this plant status message client state parameter bound to the text property on the stylized text component it's defined here and we have the initial value set as unknown so in my client script i'm going to grab data values from different places on the page i'm going to put them all together into a message and then we're going to set that message as the state which i have found to be probably the most common thing that i do in client scripts is kind of putting some different values together and setting a client state parameter so without further ado let's add a new client script and we'll just call it plan status message so let's go ahead and start so the first thing that i want to do is i want to grab the name of my plant from this required parameter so i have a plant name required parameter our test value is ethyl for this page and so i'm going to say plant name is api dot context and then dot props because this is a page property and then let's select the plant name all right so we have the plant name the next thing i want to do is grab the first name of the logged in user so we'll call this user first name and this is also going to be api.context but it's a different context so we have access to the users session you have lots of different pieces of data in here but we're going to take a look at the user specifically and i want that user's first name all right and then the next thing we are going to do is we're going to access a client script include and use that to put some of our values together so let's go and take a look at my client script include so i'm over in the platform ui i i think i actually went to the name of this table dot list it's uh this is the table name uh sysux client script include uh when you think script include in servicenow as a long time developer i always think you know reusable piece of server-side script in ui builder these are client script includes so they are actually reusable pieces of client-side code so again this is not server-side code it's client-side code but it's a way for you to kind of reuse code and make your pages and ui builder experiences you know make it a little more efficient so in our client script include we're doing a couple of things so i have this get plant name function that we're not going to be using but i just stuck it in here and then is my plant happy is what we're going to use here and so i'm going to pass it a plant name and it's going to tell me my plant is happy again yeah it's it's kind of a ridiculous use case but this is what we're doing so i've got that so now we need to call that so there's a really important step that as i have been doing this demo i keep forgetting and that is i have to tell my client script to use a particular script include so i'm going to hit add and i can't use it until this shows up under here so uh you might i have entered this in selected it and then forgotten to hit add and then wondered why it didn't work you have to hit add and and have it show up there and then once you do that you can call that and so instead of typing it all in i'm going to copy paste and this imports is is the important part here so you're using this imports and then this is the api name of that client script include if we go back here this is this api name you don't you don't generate this you just name your script include and it generates the api name based on your scope and the name of the script include so now we can use these so the last thing we need to do before we can actually set the value is we need to construct this message that we're going to bind to our plant status message client state parameter so let's say let's just call this plant message and we're gonna say hello uh first name and then we're going to use that message so we're going to say is my plant happy and then remember we have to pass it something we're going to pass it plant name all right so this should read hello brad uh what's our plan name ethel is happy today exclamation point so let's uh let's use api dot set state where are you set state there it is so this is our set state method it needs the name of the client state parameter which i know is plant status msg and then we need to pass it a value which is going to be this one [Music] all right and then the last thing we need to do is we need to bind this client script to the button click event on this check status button so it's got one event we're going to add an event handler that directly calls this plant status message client script all right so what should happen here is when i open the page i should get my unknown to show up then when i click the button it's going to run this client script where it's going to grab this plant name it's going to grab my first name it's going to grab the client script include and then we're going to put those together in a plant message and then we're going to set this client state parameter to that message and then it is bound to the stylized text component and unknown should change to our message so let's see if it works moment of truth open so check status all right hello undefined oh my name didn't work that is uh that is unfortunate why did my name dot word not work api context user first name you know what it's cause we didn't name it correctly hello user first name so let's try again there we go hello brad ethel is happy so what if we change the name to something else bob is happy all right so that is working it's dynamic and uh and again so things like uh accessing um the page properties uh accessing uh user session information uh we could also access uh this state that we just that we just set if we wanted to and you know we also used a client script include this plants include one of the other things that i call in the blog post is uh data resource refreshing and executing we actually do that in a different video if you want to see what that looks like but basically if you have a data resource that mutates data so if it creates or updates data you can execute it and then you generally pass it um you pass it a payload basically that it's expecting and then it takes that data and sends it to the server and then if you have a a data source that doesn't mutate data it's just fetching data then you can do a refresh and get it to fetch your data again so that's helpful if you have done an execute and added data to the server and you want to refresh the data that you have on the page you can do that through a refresh all right thanks for joining