How to Create Basic Javascript for Advanced PDF Forms - A PDF Javascript Tutorial for Beginners

[Music] all right now we're going to take a look at adding JavaScript to PDFs and the first time to show you is why I don't recommend using the default JavaScript editor that comes with Adobe Acrobat so the first thing we to do is go to prepare a form save this file and I'm going to add a text field now I'm going to rank click here and go to properties go to calculate custom calculation script and then edit and this is the editor that you get so you can move it you can stretch it and here you can type in code now for example I typed some text you notice the cursor disappears so if you want to find the cursor you then have to move the mouse out of the screen so that you can then see it then come back and click where you want to click and I'm add a little if statement here here's a bracket so you'll notice if I press tab it takes me out of the text field and then have to click back into it and then I can start typing again with the tabed in text so that can be a problem or you're trying to tab your code over so it's easier to read so ends it being a whole mess if you're trying to do it here because you have to keep going back and forth then clicking and things like that it just doesn't work very well so that's why I don't recommend using this default editor so I'm going to show you what I do recommend that's a program called notepad++ so we'll pull up the notepad++ website here so you'll see it's at notepad plus- plus.org I really think this is a helpful tool it really makes writing JavaScript for PDF's a lot easier CU it comes with text formatting it colors and highlights different parts of the code so you can clearly see what is what and it also has a lot of other automatic functionality that just makes writing code a lot easier and in PDFs for JavaScript so you're just going to go to the download page get the appropriate file for your computer in your version download that install that like any other normal program then you're going to open up Adobe Acrobat open up any blank file go to menu preferences and then to JavaScript here and then you're going to go to use external Javascript editor and what you do in this case is going to navigate to where you installed notepad++ and enter that here in this field or select it with the browse window then click okay now if we prepare form add our text Field open up the properties go to calculate custom calculation script now you'll see it opens this up which is a much better user interface now we can type our code we can dra a brackets that automatically indents for us automatically moves the brackets over to the left and here we go so now we're all set all right let's move on to adding JavaScript into our PDFs we'll do that in this video [Music] all right so let's start addings in JavaScript to our forms so we get this text field and open up the properties going to calculations we're going to goody we're going to go to custom calculation script and edit so just like how we were calculating things by assigning them to variables and adding and subtracting numbers and multiplying we're going be doing the same thing in JavaScript in a PDF form except for in this case you're going to be working with fields and field data so instead of storing a number you might actually be storing a reference to a field so you can manipulate that field change that Field's value and do kind all kinds of different things to the field hide the field so we'll be doing the exact same things we were doing in Google Chrome except for now we're going to be manipulating field data and data that comes from Fields so one thing that you should know is in this case we're dealing with a document and this document has different properties and different things associated with and so we can talk to those things with JavaScript we can tell them to behave in certain ways we can get what data they have and all kinds of different things so we're going to be walking through that so the first thing I will show you is how to access a field see we have a text field here so how do we get this data from this field so the first thing I'm going to show you so the first thing we have is the this keyword this refers to the document Itself by using this document keyword we can access certain properties in the document to then control things and manipulate the fields now within this document we want to get a field so we're going to use the get field function so a function is just something that that does something in a computer program so in this case get field is a function that is available in the document so the document has the ability for you to get the fields in the document so you can get their data then we have this period in the middle that's how we access the properties of the document so this is something you see in a lot of computer programming languages where you you use a keyword and then use a DOT and then you can access the properties that are associated with that thing so this refers the document the dot tells us that we want to access properties that are in the document and then get field is how we then can then get the field based on the name of the field now we want to use the name of the field to get a reference to that field so in the parentheses here we're going to put quotation marks and then text one I've put this in quotation marks because that tells the program that you're looking for the name of the field if you recall we used variables earlier so you could pass a variable in here so we could remove these quote marks and put text one here the ring come up here we create a variable called text one and we assign it this text string of text one now you say string there on purpose a string is just a literally a string of characters so these all individual characters are strung together into one piece of text and so in programming we call that a string and that's what we have here so putting a quote Mark around the text tells the computer that this is a string and should be interpreted literally so we literally mean the words text one as opposed to the variable text one so now when we use this text variable and put in these parentheses it tells the program to look for the text of text one but we're not going to go we don't need to go that complex we can just come in here and put quotation marks and that'll be fine for now but you can use a variable if you want that's how that could work both of those would work and now that we have the text one field we can use the period to get the value of that field so the value is a property of the field we've used this to get the document we've used get field to get the field and then now we're accessing the properties of that field to get its value and then we're going to use this equal sign to set that value to one and we're going to put semicolon here now this is not something you encountered in Google Chrome when I was showing you there but the best practices for JavaScript is to post semicolon at the end of the line now JavaScript is kind of flexible unlike some of the languages like C++ so they're not going going to require you to put a semicolon there but it is best practice put it there there are some circumstances where you will need to put a semicolon we're probably never going to run into those in this course but it's just good to know and it's good habit to get into the choice put the semicolon there but if you forget about it it's not going to crash your program all right so now that we have this assigned here we're going to save this and close it up close the Field properties and as you can see The Field's already set to number one just like we programmed it but using the method that we used you'll see I can enter D and it won't revert back to one like the program saying it should do so normally you would expect this if you program it to be wand that it'll stay one one even when you enter in something else but doesn't create work that way using theit field method so I'm going to show you is a different way to do this and we're going to go over that in the next video oo [Music] so I'm going to show you a little bit of a different way to do this so we're going to edit this so what we're going to be working with is a keyword called event and what the event keyword does is it gets a reference to any fields that have changed or any fields that are influenced by something changing in the form and so throws an event out and then it will cause your calculations to happen automatically without anything else seem to call it so when you say event. value it will automatically interact with the field that the script is on whereas this dog get field needs something external to call it to make it do its thing so both event. value and this.g field do the same job but they operate a little bit differently and they have different uses so now that we have a vent. value set we go back to the form when we try to change the number no matter what we put in here it always goes back to one because every time you click this it throws an event which then activates the code and makes it change the value to one so as I said earlier both these have value in different uses you usually use event. value when you're manipulating the value of the field that your script is on but if you have a script on a field and you want it to influence the value or get a value from another field that's when you would use this.g field and so we'll Explore More on this in the next [Music] video all right so now we're going to take a look at how to make two different fields interact with each other with jro so I'm going to add another field here and what I'd like to do is I'd like to set up a script so the value of text one gets copied over into the value of text three so first we're going to come in here and delete the script then we're going to come into text three custom calculation script and then we'll edit here so I'm going to move this just so I can see the names a little bit better so now what we want to do is we want to make the value of text 3 equal to the value of text one so if you want to manipulate the value of text 3 from a script that's on text 3 how do we do that that's right event. Val so we're going to type event. value and then we're going to say it's equals now we're going to use the this and get field function to get the value of the other field since it's an external field so we do this. get field text one and we're going want to get the value of that semicolon so now event. value when we change text one get the value of text one and put it into the value of text three so we'll save and close this and you'll see it's already saying one just like the first field now we edit the field here and no matter what we enter the other field is changed to equalent all right so the next thing I want to do is take a look at how we can add calculations into the mix and how we can make these tar to each other and have calculations that work together so we'll do that in the next video [Music] all right so in this video what I'd like to do is use our of discount code that we did before and make a similar tool here in Adobe Acrobat so I'm going to make some Fields here we're going to start with the price then the amount then I'm going add a couple more Fields here we'll get our total field so this one will be the discount this will be the minimum and this will be the final price all right so now what we know we want to have this edit the final price in that field so that's the field that is going to be impacted by the script so that's the field that we should probably put the script on so open up the properties for that go to calculate custom calculation script just going to move this so I can see a little bit better so the first thing I want to do is get a reference to these fields the reason I want to do it this way is I could do this do get field but we're going to be doing that a lot we're going to be having a lot of calculations so we don't want to have to write this do get field over and over over again every time we want to access the value of a field so it can make it easier to store this in a variable so I want talk to you a little bit about variable names so I'm doing this intentionally where I put the first word lowercase and the second word uppercase this just makes it easier to see there's lots of different styles and opinions on how you should do variables and some programming languages they're done one way and other programming languages they're done a different way the key thing is if you're working at a place that wants you do on way just do it that way otherwise I recommend just doing it the way that works best for you some other ways is you could go totally lowercase which might be a little bit harder to read or you can do uppercase for both words there's some programming languages in some communities that do it that way I'm going to stick with just the lowercase first word and the uppercase second word so do price field this.g field we'll do the name of the field and now we'll set up the rest of the variables so we've got the amount field I'll copy and paste this then we'll do the same thing for the other fields got the discount field the minimum field then we'll edit the reference here this needs to be capitalized to match the field name and then minimum oh I get some extra equal sense here let me get rid of those and so the reason why we do this is because we're need to be referring to these fields a lot and getting the values a lot so it's easier to store them as a variable so that's why I do price field. value to access it instead of this.g field. Val and you could do both you could do this.g field and and that would work fine but it's a little bit longer and it takes up space in your code it can be a little harder to read so I'm going to choose to go price field. Val instead of calling the git field function every time we want to reference the value next video we'll start building out our function and copying over the functionality from what we diding from see you there [Music] all right so I'm going to take a look at a quick little script that will allow us to make our data entry easy this count So currently the data entry isn't very intuitive because if the person wants to enter a percentage amount they have to go in and mentally calculate so I want to do 10% so I how to do 0.1 and they enter that in and it doesn't look great doesn't work great for a user experience standpoint so we want to make it so that it makes sense to them if they want to enter in a percentage that it'll look correct and feel correct when they're entering it so we'll open the properties for this go to validate and we're going to delete our existing validation script all right so we're trying to look at the value of the field that the script is on so what we want to use we want to use event. valum so first we'll create a variable we'll call entry and we'll equal it to event. value and in fact let's change this to Value just to keep it consistent so now we've got a reference to Value first thing we want to do is verify that what they're entering is a number so we're not trying trying to take some text and mess with it or try to verify it or calculate anything with it so we open up an if statement going to use our is not a number function and we're going to look at Value now in this case we're just going to make equals z like we did before and we can actually put this all in one line so I'll do our bracket entry equals z actually it's value then we'll do our closing parentheses so now this line is is going to verify that they've actually entered a number and if not that just cancels zero now I want to take a look at the value and if they're entering a number above one we're going to assume that they really mean a percentage they don't mean like 500% if they enter five so would you value is greater than one we'll set up our brackets here now if you recall the way we calculate this we have 5% equals 0.05 so we want to do is have the user enter five and then have the calculation treat as though it's 05 so delete this and we'll write the code and we'll type out our value equals value / 100 and semicolon so what this will do is it'll take whatever the enter divided by 100 if the value is more than one then we want to take our event. value and have an equal value so we'll save and close this oh looks like we get an error looks like and missing a parentheses let's go back and fix that okay yeah it's looking like I'm missing a parenthesis here so you see there's two sets of parentheses here we've got the is not a number with its parentheses and then we've got the if that has its own parentheses so now that's all complete we'll save this and close it try again now you you'll see if we enter five it enters 05 now we can go in double click this get the format change it to percentage now it'll show up the way we expect it now when the user enters 20 it comes out as 20% and you'll see it calculates to 0 2 automatically for you without them having to think about it now if they enter in a small number like this that's less than one it's going to assume they mean .1% % or 0 1% it's not going to do that calculation for them there's different uses for that if you'd like it to operate differently what we could do is we can open this up we can go back in here we can edit the script then if we just get rid of this if check so no matter what they enter it's going to divide it by 100 this will work for everything so if they enter 01 it'll assume they mean 0 1% so let's test this out as you can see it ENT 1% and then changes it to 01 in the back end so how you can get this to work and create a better user experience through validation scripts just a neat little trick to make your forms more userfriendly and more usable aren't so I'll see you in the next section [Music]

Channel: AB Publisher LLC

Views: 85

Keywords: pdf javascript tutorial, pdf javascript acrobat, pdf javascript example, javascript pdf viewer, javascript pdf editor, adobe acrobat pdf editor tutorial, adobe acrobat pdf editing, calculations in pdf fillable forms, dynamic pdf form, dynamic pdf adobe, dynamic ooo pdf, create dynamic pdf, generate dynamic pdf, fillable pdf form using from adobe acrobat, fillable pdf form tutorial, fillable pdf form free, how to make pdf fillable form free

Id: QB38jMH2yxY

Length: 23min 0sec (1380 seconds)

Published: Thu Apr 25 2024