Javascript coding within a PDF document

[jacquess52005549]

Good morning,
I've been searching everywhere for a specific set of codes that I can't seem to find. Here's in a nutshell the situation since I don't even know if this is possible:
I have a PDF form that I created with tons of buttons on it for extra information on each field. In other words, when pressed it shows instructions related to that specific field. I have to create that form in a bilingual way and therefore the instructions have to also be bilingual. I though the easiest way to do this without crowding the text box display would be the following:
1- when the information bubble is press, the button would trigger a display that would ask to press English or French.
2- if English is pressed then the English text would display and if French is pressed then the French text only would display.
3- after displaying the text, it would have the usual OK button to close the information text and return to the form.
I managed to create button tool to display the entire text in English and French all at once, but then realized it it way to long and in some cases you can't even see the OK button to get out of it, that's why I thought separating the text would work better, but I have no clue how to create the display to chose FRENCH or ENGLISH selection. Or even better, to display by default the English one with an option at the bottom that would say "Press here for French" "Press OK to return to the form".

[Thom Parker]

It would be good to have a method at the document level for determining language. For example, radio buttons at the top of the first page. 

However if you want the user to make a selection at the time they display the message, then a couple of good options are a popup dialog box or a  popup menu. I like menus. 

https://www.pdfscripting.com/public/Creating-Popup-Menus.cfm

You may want this popup to only appear the first time, that way it's not a constant annoyance. Use a document level variable to determine whether or not the popup language selection is displayed.

[jacquess52005549]

Thank you for this information, it's a real eye oppener on the world of creating menus.

It's definitely in the right direction of what I want to do and as much as it's interesting to see the possibility of creating a menu when the user presses a button, the programmation explained on that page is a bit confusing for me as I'm a beginner with javascript coding and most terms they use they assume that we know what they should be, so I'm still lost into how to proceed after creating a menu.

Here's an example, when they showed how to use the Return Value, I thought that was what I needed for sure, since I want for the user to select either French or English and then according to their selection, a text in the language they select would appear, but I still don't understand how the menu and text to appear are programmed together?

I can't have the menu just once, it's how the form will be designed as a bilingual written all the way through the form, I want to have each time they select an information bubble for each field, to have an option on each field to ask if they want the English or French text and then to have the proper text poping up to them after the selection.

It would be great if you could show me an example on how to accomplish that.  Here's an example of the interaction: there's a field asking them to select a level of security, they don't understand what that implies, so they select the information bubble (button) to have more information, when selecting that button, a menu would appear showing them two options "French" or "English", then if they select French, a text would appear to say "France is a great country" or if they select English, a text would appear to say "England is a great country" and after reading the text, it would have a box at the bottom to click OK to return to the form.

All those answer text are right now programmed in the form into a javascript using "app.alert" command and they work fine, but I wanted to seperate English from French for display space saving.

Javascript options are great, but it gets very complicated if someone like me just start using them 😉  Never the less to say that I really like your menu option and would love to use it if I can only understand how this would work with the return text.

[Thom Parker · Accepted solution]

You have several options for displaying text, an alert, a hidden form field, or, you could put the lanuage text directly into the menu, so you don't have to handle the return value. This is the easiest for both you and the user, as long as the text entries are short.

app.popUpMenu(["English", "England is a great country"], ["Français", "La France est un grand pays"]);

[Thom Parker]

Or if you really want to use the alert boxes,

var cRtn =  app.popUpMenu("English","Français");

if(cRtn == "English")

    app.alert("England is a great country");

else if(cRtn == "Français")

    app.alert("La France est un grand pays");

[jacquess52005549]

Thank you, thank you, thank you, this is exactly what I was looking for.  I'd prefer your first short one, but the text I'd display can be very lenghty since it's for instructions and in most cases I even have multiple paragraphs to show.  Therefore, this version with the app.alert that I was already using is just perfect and does exactly the trick I needed and removes a lot of space being used on the screen when I was having both languages at once. 

Now I can even play with it a bit to design a little different if I wanted to by adding other options etc...

[jacquess52005549]

The coding used worked perfectly.  However, now I'm playing with the form to seek if I can do even better.  You mentioned previously that "It would be good to have a method at the document level for determining language. For example, radio buttons at the top of the first page."  And I'm not disregarding that mention at all, in fact that's what I'm trying to work with right now to rise the form to a different level.  The problem I'm having at this moment is that each text box created on the multitude of fields on the form, are English/French within the same box to make the form functionnally bilingual for the user.  I'd prefer as you mentioned to have them select right from the beginning what language they'd like to use, but is that possible to have one form only and when they select English, then only the English text box would appear and vice versa?  Basically, I don't want to have two seperate forms, and both languages should be dormant in the background and when selected the proper one becomes active?  The problem right now is I can't see any possibility with a radio or any type of buttons, to activate/deactivate text boxes, it allows me to do that only on fields.  Is it even possible to have text boxes hiden or showing according to a selection on the PDF form?

[Thom Parker]

One technique you can use is to create two separate PDF files with the form text and graphics, but no fields.  One for each language.  Then make these "layers" in the form. Radio buttons, or a script somewhere else, can then be used to switch the visibility of  layers depending on the language preference.   The "app" level lanaguage attribute could also be used when the form loads to set the initial language.

Of course, this only works if the words for each language can be arraged so that the form fields can be in exactly the same locations.

[jacquess52005549]

Thank you for the information.  Unfortunately you got me at lost here, I'm not exactly sure what you're talking about, but it does sound like a possible plan, I'd just need instructions on how that's possibly done.

1- You mentioned making two  seperate PDF files, does that mean keeping them seperate all the time or just until I incorporate them both into one PDF?  Because I can't have two forms for this, it needs to be only one form being used by the user at all time.

2- "layers" I have no ideas how that works and how to proceed with that, do you have examples?  Just to give you an ideas, when the user opens up the form, the first thing they see is an instruction box I made in JavaScript which gives them information on how to use the form, I can I assume, easily put right there a button to select the language of their choice or something like what we've worked up ealier with the two selection of English or French.

Here's an overview of what can be seen on one of the pages the thing that requires to be hiden/showing is all the written text you see everywhere on that page but I'd redo each text box to have one for each languages and locate them exactly at the same place for both.  If it would be easier (don't even know if it's possible) I was even thinking I could make one form with each pages duplicated one in English and one in French, and use some kind of script (again if that exist) which would tell the form to either show all odd pages or all even pages to have only the pages of one language showing at the time depending on what they'd select.  Is there such possibility?  If so, then it would be quite easy for me to just remove one language or the other from each page and redo that same thing again for the other.

[Thom Parker]

Here is a screen shot of the "Layers" panel on the left side of the Acrobat DC screen. 

Notice there is a dropdown menu with an option for importing a layer. 

Just try it out to start with. You'll see there is button in the layer's panel that you can use to turn the layer's on and off. 

What you want to do for the form is create a blank PDF of the correct size, then import both PDF's that have the different languages.  Then use a script to hide or show a layer depending on language selection. 

[jacquess52005549]

I never noticed that option before, mind you I never really used that side panel option lol

Let's see if I get this straight before I start.  I'll create one layer of 5 pages in English and one layer of 5 pages in French and save them individually.  The part I'm not exactly sure about is the blank PDF of the correct size, when you say that, do you mean I create let's say a 3rd PDF which would have nothing but the fields and buttons I'd use and the layers to add to it would be the textual part in English and French?  Or do you mean in each layers I'll have everything, text, fields, buttons, graphic repeated in both the English and French layers?  I'm just not sure what you mean by the blank PDF of the correct size.

No matter what, it starting to sound like a possibility if I hear this correctly and it may be the answers of what I'm trying to do.  Also, what would the script be for the button to activate/deactivate each layers?  And finally just to make this clear, once I bring both layers back, that means I wouldn't have to carry on with 3 different documents, it would be only one "core" with 2 layers within?

BTW, in case I didn't mention this before, I really and definitely appreciate all your help with this, I'd be lost.

[Thom Parker]

When it's all done you'll have one document with two content layers.  

Blank document means blank, no content, no fields etc.  Just the correct size and number of pages. Then you import each page as a new layer, onto the correct blank page. Then merge all of the layers of the same language. 

I would suggest giving this a try with a test document to get a feel for how it all works.

Here's an article on scripts for layers (its old, and back then there wasn't an import layers options, but the scripts are the same):

https://acrobatusers.com/tutorials/create_use_layers/ 

[jacquess52005549]

That's actually a nice way to do it with layers.  However, I'm not understanding about the the blank document still.  If I import the layers to a blank document, there's no fields and no buttons at all, layers are just bringing the text and nothing else (unless there's a way that I don't know about?).  Therefore, shouldn't the blank document be a document with just the fields and buttons instead of just blank?  If not, then how do I get the fields and buttons I created in the original form?

[Thom Parker]

By blank I mean the page content, not the form fields.

You start with a blank document, Add the layers, then add form fields. You should be able to either copy them over, or replace pages on the old form with the layered pages. 

Or, if you already have a form with the form fields, then make that form blank (keeping the fields), then add the layers.  It doesn't matter if the PDF has form fields or not in order to add the layers, what's imporant is that the pages do not contain any content. The form fields are a different thing and can be added before or after the layers are added. 

One way to make the pages of the exising Form blank, is to create a PDF with all blank pages and do a page Replacment on the original form with the blank pages. This keeps the fields, but gets rid of the page content. 

[jacquess52005549]

I had to play quite a bit with the script to understand it and get it to work the way I wanted, but I finally got it down to where I wanted.  Thank you for your help with that, I love layers now lol 😉

However, two small things that I now need to manage in view of this huge change.  I use the app.popupmenu at the very oppening of the document to get the user to chose the language, but that doesn't take care of my information bubbles buttons on the form to get only English or only French to come up.  What I've done now is to create two buttons side to side, one in English and one in French.  Is there a way from the javascript being use at the oppening of the document, to give it an indication to hide specific buttons if a certain selection is done (i.e. hide French ones if English is selected)?  That would resolve that situation once and for all.

Second and last thing, the app.popupmenu display a box to select English or French, is there a way to make that menu way bigger?  It sorts of get lost as a tiny thing in the middle of the screen.

Thank you again for your huge help with this.  Here's what I got which works for the entry of the document:

var cRtn = app.popUpMenu("English","Français");
if(cRtn == "English") {
var ocgs = this.getOCGs();
for (var i = 0; i < ocgs.length; i++) {
if (ocgs[i].name == "English") {
ocgs[i].state = true;
}
if (ocgs[i].name == "French") {
ocgs[i].state = false;
}
}
app.alert("IMPORTANT INFORMATION \n" + "\This is a test.",3);
}
else if (cRtn == "Français") {
var ocgs = this.getOCGs();
for (var i = 0; i < ocgs.length; i++) {
if (ocgs[i].name == "English") {
ocgs[i].state = false;
}
if (ocgs[i].name == "French") {
ocgs[i].state = true;
}
}
app.alert("INFORMATION IMPORTANTE \n" + "\ Ceci est un test."
,3);}

UPDATE: I found a script to show/hide buttons:

var ContractInfoEnglish = getField("ContractInfoEnglish");
ContractInfoEnglish.display = display.visible;

However, I have 45 buttons in double (one in English and one in French for each), I'd have to repeat those lines 90 times twice (one for hidden and one for visible), that would take forever and make for a huge script, there's got to be an easier way to do this to bunch up instead of repeating for each one of them?  BTW, those are regular buttons and not radio or anything else, it's just a click and display thing the information thing.

I thought of a way that may work easier, but I have no ideas of the script to use to do it.  I thought maybe I can create a hidden button on the form, that button will have an action of hidding/displaying the information buttons through the form when the checkmark is put in the box.  However, from the JavaScript I wrote at the beginning of the document, how do I insert a command to get a simulation of someone putting a checkmark in that box so it activate the hide/show function?  I saw a few places where it can put a checkmark in the box but it doesn't do the effect of hide/show after.  Basically I think it needs to have a simulation of a mouse up or something like that?

[Thom Parker]

Use Group naming. If all the buttons in a particular language are prefixed using the "." notation, then they can all be controled together.

For exmaple "English.popup1", "English.popup2",  etc.

then this code hides all the english buttons.

this.getField("English").hidden = true;

[jacquess52005549]

Thank you for the information Thom.  For the app.popupMenu, is there a way to block the user from clicking anywhere else then the menu itself?  The proplem I'm having is that the menu is so small they could just click beside it without making a selection of English or French, in which case they'd end up with viewing just the fields and nothing of the text will appear.  If there was a way to not have them leave the screen with the menu until they actually make a selection, that would resolve that problem.

[Thom Parker]

Unfortunately, it is what it is.  From JavaScript you have few or zero options for controlling the UI devices provided by the Acobat DOM. 

You should provide a default value. Never let the intial script go by without assigning a value.  For example, use the "app.language" parameter. 

Also, perhaps the popup menu isn't such a good choice in this case. Popup menus are typically activated with a mouse click on something else. Which is why it always appears at the cursor location. 

An alert box might do better. It's larger than a menu and displays in the center of the screen. Use the checkbox option for the selection.