How to Create a Sidebar (Pt 2: Passing Values) Google Apps Script Google Sheets – YouTube

google sheets sidebar This is a topic that many people are looking for. star-trek-voyager.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, star-trek-voyager.net would like to introduce to you How to Create a Sidebar (Pt 2: Passing Values) Google Apps Script Google Sheets – YouTube. Following along are instructions in the video below:

“Our last video. We looked at how to create a sidebar in our spreadsheet in in this video. We re gonna look at how to pass values to and from sidebar. So we re gonna start with the function that we created in the last video and with our template file that we re getting we can actually pass different values and we do that by using dot notation you can actually give this any name.

We re gonna say call this initial value. And say initialize why not and now this is passing through to this index file now we need to grab it and do something bits so let s start by getting it need to some javascript here. And we are gonna create a new variable called initial value and we re gonna use built in google apps script tags here that allow us to pull this information we need to call this so it equals this object that we just passed through string value so now we have it passed through and now we need to put it somewhere let s create an input box and way. We ll have a be our initial value go up a box text label music that s important all right so now we have somewhere to put this value.

I m going to actually put it there d. Which is a box and under set the value to show value awesome. So now we are create the value passed it through and then when it grabs all this and evaluate it and put into the sidebar. So let s do that a try voila.

We have an input box that says initialize. This is one method for populating data into the input box another way to do it is to call it asynchronously and google provides a way to do that so let s first give ourselves a button down here and let s see what id do we want to give this button. So. This is gonna get our value.

I ll get value just keep it straightforward awesome and actually while we re at it let s create a close button just to show you another way to do this well look at that a second sorry. That s a getting value so we want to create an event listener to look for this button click. And we re gonna do the x element by id again and listen we re gonna add listener i m looking for click and when somebody clicks we need to create a function and then we need to do something so in this case. We are going to update our value match some static copy and paste this so when somebody clicks on this button our get value button and we want to actually i m jumping ahead here.

.


We want to go get a value so before we do anything we click on the money and we want to say go get the value for us so we re gonna google script dot run and we know that we need to tell what to run so we want to run a function. So let s say get new value so in column. So we re gonna run the function get new value. Which now we need to create this function alright.

So let me click our button. It s going to come over here. And we need to return a value so let s go back to our spreadsheets and we could just have an evaluator book. Let s pull it from the sheets.

Oh. And actually i set something up here that we didn t use. He s pulling an initial value from the range. So let s do that i set that up before i started this video.

So i ll just walk you through real quick. What this is is it we set up a global variable to get our active sheets. And we re getting sheets. Reading the range.

Which is the second row in the first column and we re getting that value so so value is will of new value we ll call it so now you saw how we just put a string here. We can actually just use this function and the conference. Same thing because it s returning going to spreadsheet getting the value and returning that string all right now we need to get a new value to jump back to our button click let s go ahead and copy this but instead of the first column we need to get from the second column. We re gonna save that back over here now we need to do something with it cuz.

.


If we click right now the value isn t going anywhere. It s not doing anything so. What we have to do with our google docs script run once it s gets its value it has returned to somewhere. And the way you do that is using it with success handler and we are going to pass it to a function in the javascript here.

So we ll call our function value. Which means we need a function called shell value and we are passing our new value here document dot get element by id then we want to change the value of our input box with this and then it s gonna be equal the value we just passed we again if you re new to javascript you can give this a name or i can say my value in this case. This would also have to be my value so it is going to again what s gonna happen when we click our button. It is this event listener is going to say hey this button is clicked.

It s gonna run the google. Doc script out run to get new value. It s gonna go over here run our sheep don t get range. It s gonna get the value from here from the second row second column.

We ve told it to and it s going to return it to wit on well if it s successful it s going to return it to the function shell value. And it s going to pass through as an argument and then we are going to run document dot get element by id dot value equals. My value you can also at the same time run. A with failure handler.

If you wanted to and then run a separate function. We re not going to worry about that today but just to show you that it exists. So let s go ahead and open up our don t really need to close that but we re gonna put bar new sidebar and see how this works all right so you ll see we have our initial value of one. But now we have a good value so let s go ahead and get value and there we go to a synchronous asynchronous li.

.


Got that value let s do a couple other things just to show you how other things you can do with a sidebar um. We are gonna add a close button to this just to show you another way to call a function. So let s call this um. What are we calling this doesn t really need name because it s just closing.

We don t need ninety all right they re just gonna do it on click so instead of doing an event listener in the javascript section. Here we re just gonna do it as part of the html call and we re going to use google script. Host dot close. It s closed awesome over here open up our sidebar again see we have clothes button close it and there s that alright so now what we want now we have our value we can get a value last thing we want to do is to be able to set a value when we click something so i ll call it alright.

So we can initialize the sidebar with a value we can go ahead. And we can grab a value and put it into the sidebar now let s send a value back to the spreadsheets. So coming back to our index file first we need a button that s gonna let us do that we ll put it here um. All this set value super creative.

All right now we need a new event listener. So let s just go ahead and copy this gonna work down here alright so when it when we click set value it s gonna listen for a click and then it s gonna run google script out run. But we don t need this right now we want this call sets value all right which means we need a function on our apps. Script side here with a matching name great but we have to pass that value through somehow so before we can pass a value through we need to grab it so let s get our value which is the value element by id wants input box and value and we re not saying value so we re just not going to add the equal sign afterwards take this and we re going to pass.

It as an argument to the set value function. Which is right over here just going to save this now we need to do something here. So we ll do sheet get range. And we put this in the second row.

.


Still. This one is in the third column switch set value set value again. If you re new to this you can give this any name doesn t need to be the value can be any any name you want it could just be value. But don t worry about that right now and so that when we click the set value.

It s gonna call that function pass the our new our input box value to here. Which is then going to set our spreadsheet. You could have a with this with success handler. So if it successfully moves the information.

Then you can alert or sent send something to the sidebar saying hey. It s successful. We re not gonna go over that today. But let s go ahead and have a look at this our sidebar great so we have our initial value.

It s so fun we ll get a value 3. And we ll put in 500. The box and set value there you go set value is there and that is all for this video in the next video. We will look at how to grab a raise and set arrays back to our spreadsheets stay tuned.

” ..

Thank you for watching all the articles on the topic How to Create a Sidebar (Pt 2: Passing Values) Google Apps Script Google Sheets – YouTube. All shares of star-trek-voyager.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
description:

In part 2 of the sidebar tutorial, we learn how to pass values to and from the html sidebar using Google Apps Script.

Part 1 demonstrates the basics of creating a sidebar.
View Part 1: https://www.youtube.com/watch?v=ovrROAyOuGU

tags:
side bar, GAS, Efficient Small Business, How to, Quick tutorial

Leave a Comment