so now what we need to do instead of hard coding this sheet one sheet two in here which is what
i've done so far we need to basically get all these worksheet names from our spreadsheet
and load them in here inside of this table so that means i'm going to remove all of these
trs i'm probably going to need the body still and we're going to load all of those with javascript
now to be able to load all of those we need some sort of back-end function that's going to give us
all our worksheets so for this i'm going to go back to code gs and let's create that function
so i'm going to call this get worksheets let's actually just call it get worksheet names i guess
so what i'll do here i'll get a reference to our spreadsheet
and in our spreadsheet we should have this get
sheets method that should give us an array of worksheet objects
so because it's an array we should be able to loop through it so i'm going to take that
sheets and for now i'm just going to do four each for a second here and for each worksheet
we're going to run a callback so if i just do console.log
that sheet dot we should have these different methods on each worksheet
one of which should be able to get the name see get sheet name there's also get sheet id i'm gonna
do get sheet name like that so as of right now if i just run this function get worksheet names
okay so apparently we need more permissions for this so let's just do
this
here we go so if you look here it's basically logging each worksheet name from here
see all of these so that's that now what i'm going to do i'm going to store these names in
an array so instead of doing this for each
i'm just going to change it to map so that we create a new array and i'm just going to return
the name of the worksheet
like this and at this point we can just return
those names
so now we have a function in our back end that gets us
the list of our worksheets so i'm going to go to my sidebar html and run that function
and try to load it in
here so we'll go to this html scroll down and we need a script below this metro ui stuff
so i'll open a script tag and here let's start by creating a global variable for us
maybe call it like worksheet and we'll basically just make it
an object now here first we're going to have to store a reference to this table
that we're gonna have to work with so to do that i'm gonna have to add an id to this table
and some unique id should be fine and using that id we should be able to search and find
that table and we need to search and find it not by using our regular like get element by id or
something like that we're gonna use metro ui framework to do this so we'll do metro
dot get plugin
and here i'm going to search for that
table by its id so the pound key meaning the id and this is the id of that table
and the second argument here is the type so that's going to be
a table so we're going to store a reference to this table within this
object so we'll say inside of this we'll have our table i'll use the same name here
and make it equal to this
now this needs to happen though after the page loads
for that i'm gonna create a function inside of this object and i'm going to move this line
over there
so now this function is not going to run until we tell it to run
so the way we're going to do that we're going to add an event listener to our document global
and we're going to listen to this event when the content loads
we're going to run this function right here
so now we should have a reference to our table
so once we have a reference to our table then we can load things inside of that table
by using this method set items and that basically needs to be an array of arrays in here
now to get that array of arrays we need to get them from our back end now i've just realized
this needs to be an array of arrays so let's go modify our function that i've created here
to not be just an array but a ray of arrays so we'll just put each worksheet name in this array
structure like this so with that i should be able to now let's just copy this function name
go back to this and we'll take google dot script dot run and with success handler
we're gonna have a function and we're gonna run this get worksheet names function which when we
run this it should return the results inside of this success handler callback so we'll just
create a function right in here and that function is going to return
this worksheet names so we'll take that and on that we'll have the function
and this worksheet names will be that array of arrays which we need to pass to this so
i'm going to just move this right in here inside of this success handler
and instead of this aoa i'm gonna take our worksheet names and pass it to this
just like that okay so now that we basically set these items with this worksheet names
one other thing we have to do we need to make sure we reload
this table with metro ui so for that we'll take the reference to that table and we should be able
to run this reload method on that table so when we change the data in that table with javascript
we need to reload that table to actually display the results in html so with this i'm going to save
this let's try to run this sidebar and see if it works so i'm going to go back here utilities
run this so we got our worksheets see five of them then we have the page two another
three and here we have the option apparently to change it to ten there we go good and then we can
search now you could modify how many and things like that i assume uh i think it was right in here
see it says row data rows it says 5 so if we do more or less that should modify how many we have
per page but for now i'm happy with this