Welcome back and congratulations on making it through all of the different lessons.
So I know we've gone through quite a bit of stuff in this lesson we're gonna do a quick overview of
all of the content covered in the earlier lessons how it works and how it all fits together.
Now javascript is mandatory prerequisite for this course.
So understanding a javascript is essential in order people understand the course content.
And this is focused on building the application that we've been working on and building out a fully
functional simple project management app with Apps Scripts and now you can take what you've learned
extend on it and make it even better.
So within the earlier lessons we worked on a few different parts of this project.
So the core of it was a spreadsheet where we're tracking all of our tasks.
So we've got the task ideas so they all have unique ideas.
They all have a task.
Name a start and end date and we calculate that the duration using our app script.
Then also the percentage complete.
So that can be updated in the project as well.
And so this actually gets displayed out when we go into our chart and we visualize it within the web
you url.
So this is a web you are that can be shared.
If you're working on a project if you want everyone to be able to see how far along different tasks
are all of the task information of course is coming from the spreadsheet so you update the spreadsheet
and updates the chart.
So it gives you an information about what is complete and then also there's the dependencies.
So this is an optional column so you can use them you don't have to use them but what it does is it
adds these lines into the chart.
So you see that this one isn't exactly well formatted because I've got the start and end dates a little
bit messed up here.
And when you're of course you're working on a real project you shouldn't have that occurring so you
probably won't see that on a real project.
That's just that we've been entering dummy data so let's go through some of the different functions
that we had of course we did a few testing functions so that we can test our application.
So we had some test data functions as well and this is in order to get things.
Make sure that things are working properly.
We were getting all of the data back from the spreadsheets or connecting to our active spreadsheet selecting
it by the sheet name and then looping through and getting in.
So this condition here is just making sure that we do have some content in the sheet.
Otherwise we we're going to throw an error if we're looking for content starting at row number two.
So that's where we've just got that condition in there and we're going to return null if we don't have
any content.
And if we do have content then first thing we do is we select the range.
So whenever you're trying to get content out of your spreadsheet make sure you do select the range.
So you need to know all of the different range parameters the starting row starting column and also
the last row and the last columns.
That's going to give you that square grid of the content that you're picking up.
So there's also the values.
So the values once you have the sheet data in an object format then you can apply get values method.
And that's going to return back all the values in a multi-dimensional array.
So that's all this function is doing is it's going into the spreadsheet creating a multidimensional
array and returning that.
So we use this in a couple places within the script.
So we're using it within that do get where it's getting out all of the information that we need for
the spreadsheet and we're actually logging that out on the client side in the console.
So we can see this is the data that comes in and then within the client side we restructure it so that
it matches into what Google Gantt chart is expecting so it can draw out the object properly.
So we also need to make sure that we have evaluate because we are passing data with it the evaluate
the data is not going to get rendered out properly so that's what we've got to evaluate and we've got
the H2 metal object which is that template from output and we're simply returning that and this is the
kind of the same thing that we're doing when we're showing the sidebar menu.
So we've got an H table file and in this case we've got the new that we're showing we're getting all
of the tasks.
So this is all of the sheet information.
We're also setting some additional values and we're using these to detect whether the user is using
an existing task or it's creating a new task.
So in this case it's creating a new task and then we also have the existing tasks as well so when we're
selecting and we're getting existing tasks that's where we're going in and we're constructing that sidebar
with the existing tasks.
So we have the update task and we have to update or for that.
And this one as well it's getting the template from new getting the tasks in here it's setting the value
for the role as well as all the data Rowe that's being returned back and it's passing it into the client
side.
And we also have the same evaluate we're setting the title as the task so the user can distinguish between
the two.
And of course we're getting all of the values that are contained within the spreadsheet that correspond
with the values that we're outputting.
So that's what we're doing with an update here.
And that's the big difference between the update or in the new word.
We've got the different ways of adding the data.
So we've got a couple helper functions we're getting a random value so this is producing a unique I.D.
based on the timestamp.
We're doing a base thirty six so that's producing a unique I.D..
And here's one where we're calculating the difference between two different dates.
And we're returning it back within days.
And this is allowing us to create the duration between the two different times.
And we're also using the duration to make sure that we don't have an end time that's before a start
time.
So that's showing the the sidebar.
And then lastly we had one function where we've got the ad data.
So this is picking up data that we're submitting within the form either the new task or the update task.
They're both linking to the same one and it's getting all of that information.
It's determining if this should be a new entry or it's an updated entry so if it has a role value then
it's an updated entry.
If it doesn't have a real value that's a new entry.
It's passing back the data create true and otherwise it's just a default of false.
So that's how we know on the client side whether the user has created a new entry or they're just using
existing entry and there's a calculation for duration.
So we had this one just as attempt to experiment with and show you how the templates work.
And then we've got new.
So this is the little window that pops up here the side window and this is all regular client side code
so regular javascript the only thing that's different is that we're bringing in the Google script data
using these tags and this is unique with an app script where we can bring in content from the Google
script side to the client side and all we're doing is assigning whatever is being returned back here
as the value to correspond with the value that we've got within javascript.
So that gives us the ability to connect those objects and use them on the client side a little bit of
styling there.
And this is the input form here so these are all of the inputs that we see visually.
We've hidden the ideas in the role because these are set automatically if it's an existing role that
has been selected.
So we're loading some of the page objects some of the document objects in the page we're constructing
that dropdown selector and then we're adding click event to the button the submit button.
So what happens is when the button gets clicked then we're running we're doing Google script run which
is submitting the data to the backend.
So it's looking for a function called ad data and it's passing the saver object save or object is just
the listing of all of the input form elements input texture and select.
It's constructing them all into a usable object that we can pick up on the back end using the name and
then assigning to that name object the value that's associated with the input fields.
So that's what saver is doing and with success handler we're returning back on success.
So that's where this function runs whenever the callback is successful we check to see the data that
gets retrieved back if it's been created then we say new one has been made we passed the I.D. we reset
the form and if it's been updated we don't reset the form because we want all of those values to sit
within those fields still so that they both are in sync with what we've got within the spreadsheet and
with within the selection object.
So that's where we do the update task and we don't want these these values to change.
So even though we updated it we don't want those values to change.
So that's why we're not resetting the form at this point.
And then we're passing in a message.
So the user knows what's happened so that the user knows it's been updated and the user can tell that
something has actually happened and you might want to update that and extend on that because that's
not really clear but it's got the functionality the core base functionality is there.
So other than that we are listing out and depending on what the system detects so if we have valid g
s role that means that this is an existing object and that we're loading the update task and it's picking
up all of the information from the data that's been from the Google script side and it's populating
the visual fields adding in the dates and so on and updating the text otherwise we know what's new.
So the form can be completely blank and we just set a new task there.
So those are the options that we have there.
And then lastly with an output this was just a quick way to show you how to do visualization of charts
and graphs from the spreadsheet and create a web app.
So we created a web app which gave us a usable u are L that we can display the chart information.
So this is live data that's coming from our spreadsheet that we're outputting within the U.R.L. so if
you did have a life project and you wanted others to be able to see how far along the project is you
can provide that you URL for them.
So this was just suggestive how to structure it using Gantt.
Now there's a number of other charts that might be better suited for your needs but of course for projects
Gantt is a good way to go because it's got all of the basic information that you need for each one of
the tasks.
So we are looping through the tasks as they are within the spreadsheet and we're restructuring them
we're checking to see if content exists and if it doesn't exist then we set it to null because Google
is expecting some type of value in there so we don't want a blank value.
We want to have a null value and it won't try to create a data out of it and so on.
And then also if there is a value in there we need to construct it as a date because Google is expecting
a data object for a few of the columns and then it's also expecting a numeric value for the milliseconds.
So this is a number that it is expecting for duration.
So we need to calculate that and convert it to milliseconds with the date.
And then lastly.
So we construct we reconstruct each row by row and then added into our main temp array.
And that temporary is the one that's the rebuild of that existing data that was passed in.
So you can see that within the console so that's the data that's passed in.
And then this is the reconstruction of it.
So now we rebuilt it into a new array called temp.
So that array just simply gets added into add rows because it's structured properly.
And then we can set some of the options as needed so that you can set some of the colors and make some
adjustments as needed.
And then lastly we do the visualization of the Gantt chart.
We select an element that it's going to output the chart too.
So that's the only one element that we have on our page.
And then lastly we do a drawing of the chart.
And Google handles all of that within the Google J.S. loader library.
So that's all comes with that chart.
So now it's up to you.
See you can take what you've learned in the earlier lessons apply it extend on it build upon it.
And we've given you all of the core basics that you need in order to get started working with Google
off script create some charts and make your spreadsheets come to life with different options to update
them and get data from the spreadsheets.
Thanks again for taking the course.
If you have any questions or comments I'm always happy to hear from you.
See in the next one.