Google Docs - Apps Script with JavaScript, Macros, Script Editor Tutorial

in this tutorial I'm going to cover Google Docs Apps Script fundamentals we're going to start with a pretty basic document here as you can see we have a little document with a little bit of text if you pay attention for example like this paragraph here is normal text we have this paragraph here which is a heading one so there are different headings this is a subtitle this is title this text is bolded you can see here and basically regular Google Docs stuff I'm sure if you're watching this video you know some Google Docs basics so I'm going to go ahead and open my script editor I'm going to do that by going out our tools and I'm going to find script editor it's right there so I'm going to click on that this should open my script editor and I'm gonna go ahead and do a command plus a couple of times to zoom in I'm gonna start by giving a name for this project so I'm gonna click here give this Google Docs Doc's basics so you can name it anything you want obviously it doesn't really matter it's just a name for this project and here we have our functions so to start with Apps Script fundamentals for Google Docs the main thing we need to understand is the structure of the application and the structure is if we just think about this like Google Docs is similar to Microsoft Word right so if we think about Microsoft Word we usually have the application Microsoft Word you'll have the application that's installed on your system so that's our application then after the application after you open Microsoft Word we'll probably go ahead and open a file so that will be that file what we call opening a file is our document or our file whatever you want to name this so just file so we're going to open our file our application and after that in our file we have all of these text and each line of this text is a paragraph so the way we define a paragraph is when we go someplace and hit enter so once I entered it makes another paragraph or I can delete a paragraph so this first paragraph is this one then the next one is this then the next one is this so each new line basically is a new paragraph so now going back to our script now we need to programmatically be able to talk to our Google document over here now we're going to do that with JavaScript that's the programming language in Apps scripts so we're gonna start with an object called document app so document app is the application so the way I was talking about is let's say the Microsoft Word would be the app so if I do the application now in this application Microsoft Word currently I have this active file that's currently already opened so I can look for that file by looking for get active document active document is going to be our current file that's currently here so that's our gas active document so I'm going to store that in a variable so I'm gonna go here and say var a D for active document that will be I'm gonna go to my document app and get the current active document so now in my current active document I can look for a D dot it's gonna give me different methods that are available now I could add a footer add a header add some different things so what we're going to do right now is simply just get the body of our document so when we talk about getting the body of our document we're basically thinking about getting this part of our document now you could have C on top here you could have a header you could have a footer all the way down in this area but the body is gonna basically the center part the core of your document is your body so I'm going to save that to variable again I'm going to save our doc body equals to this so that should save it to a variable doc body that should get basically all the contents of our documents and again that's not gonna be the first page it's gonna be all pages so if you have multiple pages that's gonna get all the content for this document now I'm gonna go back now I'm gonna access that dot body element and if I do period it's gonna give me methods that are available for this particular body so I'm going to start with one method that you should probably definitely know and that's get paragraphs that's going to get all the paragraphs in this document so as you remember paragraph is basically something that's separated by a line so that should save all these paragraphs to what's called an erase so if you're familiar with JavaScript or really any programming language you probably understand it's an array or a list in some languages that might be cold so I'm going to call var PG z equals 2 that's my paragraphs I called it PG s probably not the best name so let's just not be lazy and type paragraphs here so that's my paragraphs variable now that should return all the paragraphs and paragraphs is an array which means if I for example wanted to see what's in the first paragraph so I can do that by using this logger.log method this is like a troubleshooting tool in Apps scripts if you're not familiar with it you're just gonna go a logger lock and then you can log out the variable to kind of try to see what's in it so if I save this so I'm gonna log the paragraphs that should give me all my paragraphs so I'm gonna save this so you can do command S ctrl s depending on what you know system you're on or you can go on their file save right there save this and now we're going to have to run this now to run this function you can either click the a little button here to run or you can do run run function and open that function either way it's going to be fine so if I click on this if you're running this for the first time you may have to give permissions to your application to access the actual document so I'm going to review permissions and I'm going to give access so I'm gonna get here I'm gonna go under advanced scroll down and go to the project unsafe whatever it says that's fine I'm going to click allow and that should run our script so this point if I go under view and logs I'm gonna get this so basically see I got paragraph paragraph paragraph paragraph I don't know whatever this is so it gives me there are a lot of paragraphs so quite a few and obviously there are because we have all this lines in this document so we should have quite a few paragraphs now to get to the first paragraph that's gonna be the first thing in this array of paragraphs so we can get to it by doing paragraphs 0 and in programming the count starts from 0 which means the first one will be number 0 the second one will be number 1 and so on so if I save this go ahead and run this again if I log it's gonna give me a paragraph whatever that means now in this paragraph 4 so that should give us the first paragraph which should probably be this this looks like it's the first paragraph this looks like it's the header information so this should be our first paragraph that says course name right so in this paragraph now the paragraph is the whole paragraph as easy it's not the text of the paragraph now that paragraph has a text it has styles applied to it it has funds applied to its size for the font it has a lot of different things colors etc alignment everything is applied to this paragraph now if you wanted to get what's text in that paragraph you have to take that paragraph and you do dot and that gives you what you could get or what you could do to that paragraph in our case we're starting with get things so if I do get C I can get alignment get attributes get all these different things but in my particular case what I'm trying to get is get text so if I do get text that should get me the text of that first paragraph so if I save this and run view the log see that's the first paragraph the first paragraph text says course name now if we look at the second one it says report title right so if I go back here and we can get to the second one by changing this 0 to 1 and if I run this go to view my logs report title that's my next paragraph here so the next paragraph after that is this one so that would be number two right to get that and the next paragraph after this is this basically it's an empty line so 0 1 2 3 so if I do 3 and run this see nothing because the paragraph text is basically empty there's no text now if we go ahead and actually type something in here go back and run the same script that should return that text hopefully that makes sense so basically we start by getting the actual paragraph itself and then we can start looking at different things in that paragraph so we can get the text in that paragraph so let's start working with our first paragraph to get some fundamentals going here so the first paragraph is this course name and I'm gonna get to it by using 0 so that gets us our first paragraph text so I'm gonna remove logger.log for the time being and I'm not also gonna use get text so I'm gonna do that and what I'm going to do I'm going to start looking at set attributes and look at set text so set text is going to allow us to change the text in that paragraph currently the text in that paragraph says course name so get text we'll get that text from here in our set text I'm going to actually set the text so currently it's course name let's say I want to change it right so I'm gonna go here and in double quotes to do our string I'm going to type the text for that paragraph my new text just like that I'm going to save this script and run so if we go back see our text is now saying my new text so that's how we can modify the actual text by using our set text I'm going to do this double slashes that will turn this line into a comment in JavaScript and which means that line is not going to run but I want you to be able to see that line now the next thing I'm going to do I'm going to try to use this other method and this one is called get attributes so if I do get attributes so let's actually assign it to a variable so that lets just log that variable to see what we get so I'm gonna save this and run I go back and look at my logs and you can see what this returns is an object in JavaScript and if you don't know what the object is don't worry about it if you do that's extra benefit because you'll be able to do more with Apps Script but we can see that there is a font size set to know we have the styling of the font we have the alignment we can't do a lot of different things line spacing etc so some things are not set which is the ones are setting no which basically means it's taking the default size or the styling or whatever is the default otherwise we can set that to something so for example if we want to set the size of the font C to be a different size we can use this font size in that particular attributes so I'm gonna copy that on size and what I'm going to do here I'm going to just comment this lines I need those for the time being so I actually lost the copy let me go back and copy this again so I'm gonna need that so I will just go ahead and start with these paragraphs not and I'm going to do such attributes instead of get attributes which I was doing so you can see the pattern here if we're trying to get something but do get attributes we're trying to change it with a set of the same thing so the attribute it needs to be an object so I'm going to go ahead and provide this curly brackets for my object syntax and I'm going to say this font size : 40 so let's do that save this I'm gonna go ahead and run the script now and now if I go look at my document see that text of that paragraph be 40 so we set that see the size of the font right here font size is 40 so we can go back now and we could have set any other thing now the way you could set this back to like default you can do font size null and that should set it to default so I'm gonna save this and run go back see it went back to the default font size which apparently here is 11 in this particular document now if we wanted to change the font size for the second paragraph what we do instead of 0 we do 1 right and we set attributes and we decide what the size of that font should be so if I want a really large font I'll go with like 70 or something like that run this and that should set this C to 70 there it is now if we go back we could set multiple things at the same time so I'm gonna comment this out if I just go back to this and now I'm simply going to get attributes and log it out to see what attributes we have right so this will be for our first paragraph now not for the second paragraph which is fine so I'm gonna run this so see font size that's one of the things we changed so we might want to change our horizontal alignment or something like that to something different in addition to our font size so we can do that we can also set our font family as you can see and things like that so if I take horizontal alignment I'm gonna copy that go back here and I don't need these lines although I could leave them they don't really hurt so I'm gonna keep those so here I'm going to do font size 70 comma and then horizontal alignment colon and then I need to provide what the alignment should be and we can do that by doing this so we can't just type like center or something like that so what we have to do we have to get the type of alignment we need and we're gonna get it from our document app from our application so I'm gonna do document app dot horizontal alignment dot and then what type of alignment do I want so if I want to Center this alignment I'll do Center and that should set my alignment to centered so I'm gonna save this now I could run this like this but to make this a little easy to work with I'm going to just move this things to their own wise here like this and you could keep it online it doesn't matter so this is just easier to read so I'm gonna save this this will be c4 I'm gonna change this for the first paragraph so we should set now the first paragraph font size to 70 and make alignment centered currently if we look see the text is really small and it's left aligned so I'm gonna run this go back well we set it to too big now we can't even tell the alignment is actually centered so let's make it a little smaller I'm going to do like 30 or so and you can see now the text is size 30 and alignment is actually now centered so it could change as I was saying multiple things now if I go back let's say we want to change the font family to different font family so I'm going to copy this attribute in this object that's my font family I'm gonna do a comma here because we want to add another one and font family we need to set it to a different font family right so I'm gonna go with document to app font family god and now we have our font families so I'm going to try this one save run so there it is see the font has changed now to this so these are the fonts that we have in here so you could change the font family as you can see some other things we might want to change let's see what are some common things that are going to be important we might be set it to bold right so if I want to change the text to bold so currently see it's not this is not checked it's not bold so if I want to change that I'll do bold and I'll set it to true so that means it's gonna make it bold go back see it's bold and if I change the pull to false that should change it back to not bold and the same thing would happen if you were using this so you can set it to true or false same thing so you can do underline if you want to make it underline you do underline true run see now there is underline so all of these properties hopefully you're starting to get the idea how you work with this the other thing I'm going to mention which is going to be pretty standard probably that you need to know is going to be foreground color so basically that's your text color and background color is the background color so if I do foreground color I'm gonna go here and we need to provide what color we want it to be and the color you could do is going to be basically like a hex color now hex colors you're gonna have to get it from I don't know you can get it from Photoshop if you're using Photoshop you can get it from a lot of editors right to get the hex color if you're not familiar with hex color is we might be able to get it from our browser so if I go to say here to google.com right i right-click on some element here if I'm by the way I'm using Google Chrome so you should be able to do this on most current browsers but definitely you can do this on crops so if you don't have Google Chrome maybe try that if I right click on this particular button and click inspect now over here see for example it gives me the color of that button and see this pound 7-5 7-5 7-5 is the text color over here so if I wanted to change it to something different it would this particular browser I can click on this little icon with a color and change it to some other let's say this red or whatever color I want I can use this color picker and basically find a different color so let's say I want this blue color right so I go and check a blue color that's the code hex code for that color so if you don't have a different application to get your hex codes then you could do this so if I go back and set it to this and it's a text parameters so in double quotes save this I run this I'm gonna go back and there it is my font color now is in that blue that I set from here so again what I did here just to repeat I took this right click inspect on that button and that gives me the color of this button and by the way keep in mind that Google is probably gonna change this page and you can't just rely on just doing this exactly on Google but you could do that on any website right so if you right-click on an element and inspect you should most likely get the color and background color that's applied to that element and then you can go and try to change it and see what you get so really any of this color boxes should work so you click on this go and pick whatever color you want so let's say I'm gonna set it to like green it's gonna more look like I don't know this simply copy that hex code go back and over here 1 pound key say I've run this and now we go back now it's green so we can set our colors like that as well we can also do our background colors if you remember there was background color and it's gonna be the same only instead of foreground color we're going to set our background colors so if I set it to let's say this go back make sure I have the right color here so that's both of those colors run that go back see now have background and foreground color for that text and finally if I basically want to reset these things I just dunno and this should reset it to document default so here we go we went back we set it all to no the only thing that I probably changed some things we changed during the period and then we didn't keep them so for example the underlined text I have that here well I used to have it but now it's not so now we kept it underlined text so if we wanted to reset that too we would go back and find underline so I can go back here and set that to no run and now it's gone to document default so that's for our basic changes you might want to do to text programmatically now the next thing I want to talk about is different heading types or different text types whatever you want to call this so for right now when you look at this lines it says normal text so if I open here we can set it to title subtitle heading 1 heading 2 heading 3 etc so for example if I look at this second line see this one is a title it's not a normal text so that actually is a part of our attributes as well so if we switch this to paragraphs 1 to get attributes I'm going to keep this let it run and reassign the first line that's ok I'm gonna run this so now we should get the second paragraph because now it's 1 so if I check the log see if we look through this well hopefully I'll find it at some point there it is heading it says title so heading is set currently to title right so let's say we want to change this to something different so or by the way if we look for let's say this this element that's our subtitles so if we go back here and change this to two I'm gonna run the same thing now see heading is subtitle now we could change all of that obviously so if I wanted my first paragraph which is this one to become a title like this so I can go here and again in addition to all of those I'm gonna go get my heading so we could keep all of those but I'm gonna get rid of all this so we can take that heading and we're gonna set it to title and we can't it's not text so what you have to do again you have to go through your application and here we're going to get our where is it there this paragraph heading and then we're gonna choose the type of heading we want so if we want title see we can set heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 normal subtitle and title title would be what we are looking for so oops I don't need that semicolon there is an object semicolon is here ending the line so I'm gonna save this run if we go back now this should be C set to title now see this is title this is title now this has different size and everything and this one is bold and has 70 size C if we look it's bold and it's 70 so it has different properties so we could probably match all of that we could probably steal it from this one and match it by the way but we could also set it one by one right so we could do 70 bold and we could do the type of the font so if we want to set it to bold again we have to set multiple things so we're gonna do bold should be true then we're gonna get our font size should be 70 not sure there's anything else but if I save this run this and we got nothing right so why aren't these things working right so what's is happening right now is because we're setting it to title and the title has already all kinds of preset ways it's done and when we do this too it doesn't actually change anything so this should work if we then separately decide to change this bold and font size let's try that if I copy this and then out of line let's say we just change it to title and then we set the size of the paragraph and all of that so now see it worked so what was the difference between the two well the difference is is here if you're familiar with your documents your title has a preset size and everything so for example if I take this which is a heading 1 and I change it to title C this is the way the title is designed that title element so now you can change that later on and say okay I'm gonna change my title and then I'm gonna set it to like this size or change some other things about that title right so you can do all those things I'm gonna undo those but the title element itself isn't changing while you're doing this because you can then change you can take this new title and apply this new title here right and you can say apply it to basically match this so you can just make the title itself change to this size so everywhere else you use the title it's just using the same element so again if you don't know this go back and get into like basics of document editing but for that reason I had to do this separately I had to set it to title and then I had to set all of these attributes so getting back to our heading so for example if you look at this one see this is heading one so this would be our which paragraph 0 1 2 3 4 so if I look at paragraph 4 let's actually take this that's my paragraph 4 and instead of making this a title let's say I want this to be a heading 2 so currently that used to be heading 1 if you look here so if we run this go back see this is a heading 2 now if I want to set it back to heading 1 obviously I can save a run go back and now it's heading 1 again so that's how we can set our heading properties and I think I'm going to end this video on that so that should give you good fundamental understanding how you interact with different paragraphs in your document so you have a document you have your paragraphs you can get different attributes from that paragraph and you can also set those attributes or you can set the text and get to text from that paragraph thanks for watching please subscribe and I'll see you in the next video

Channel: Learn Google Spreadsheets

Views: 27,955

Keywords: Google Docs, Apps Script, JavaScript, Macros, Script Editor, tutorial, VBA, automation

Id: zvDGxx6dwPo

Length: 32min 53sec (1973 seconds)

Published: Sat Sep 08 2018