Unable to create Menu Item List Buttons in Forms - Not Working!

[Former Community Member]

Hi guys,

I need desperate help since I have been stuck on these for 2 days and I am unable to move forward!!

I am trying to create a pdf form using Acrobat pro 9 and Adobe LiveCycle Designer ES. Since I am new to this, I have been browsing through numerous sites, forums and tutorials to learn about this. So far, I was able to create the forum with text fields, etc.. I am trying to have a column in my pdf form where the users can simply copy & paste image icons here..I was having difficulty with this already and have done numerous searches in google. In the end, I thought I am better off trying to use the "stamp" tool for this instead of image field. So this is what I did:

1) I already placed the image icons (that the users will be copying & pasting) on my pdfs so users can simply click on it to select the image.

2) I added a new bottom to this form which has the short cut to the menu item "copy" function. I labeled this button as 'Copy' and to this button, I added the following javascript for "Mouseup":

app.execMenuItem("CopyFileToClipboard");

3) Next I created another button that I called 'paste' and this button executes the "Paste Clipboard Image as Stamp Tool" menu. This button has the following javascript:

app.execMenuItem("Annots:Tool:StampFromClipboardMenuItem");

I thought that after doing the above, the user should be able to click on one of the images in the pdf, then click on 'copy' button and in the end click on 'paste' button that will then run an action so user can stamp this copied image to where ever they want in that file. But this is not happening!! I dont why?? Nothing happens when these buttons are clicked. I have made sure that the "Extended features in Adobe Reader..." is enabled and also tried running the above javascripts on my console window to test it and i know that the actual javascript code is not at fault since these functions works when I try the code through the debugger window. But I just cannot figure out why these menu item functions are not working when the buttons I had created are clicked!!! I dont know if what I have done is correct or if there is a easier way to achieve what I am trying to do!! Its a shame there is no simpler way for the end-users to copy and paste images to the columns in the pdf forms.

please help me understand why the above button are not working....any help will be great!!

[radzmar · Accepted solution]

Hi,

both actions will work from the javascript console (ctrl + j in Acrobat) but not from within a form. This is a security restriction.

Most menu items cannot be called via Javascript because Acrobat/Reader does not trust the Javascript within a form.

Details see http://learn.adobe.com/wiki/download/attachments/64389123/AcrobatApplicationSecurity.pdf under 6.3.5 Allowing JS execution through a menu event.

Also, a dynamic LiveCycle form (XFA form) cannot be stamped, as this feature only works in static layouts like Acrobat forms (Acro forms) have.

[Former Community Member]

ah....make sense now..thx for that radzmar..

Can you tell me if there are any other ways to do what I am trying to achieve? Is there a valid way where users and copy and paste the images from a set of images icons listed in the form itself?

[Former Community Member]

hi guys,

I have been looking into this further. I think the best way for me to achieve what I am trying to do is by adding a table with each row with text fields, images fields, etc and then adding a button to add more rows if needed. This works out alright for me since the user can choose different images in each table row with image fields etc.. so this seems like the work around it. I saw this tutorial here that was really good:

http://acrobatusers.com/events/1840/creating-interactive-forms-livecycle-designer-windows-only

So this what I did so far:

1) Created a new dynamic pdf with the text, text fields, etc..Inside this I added a Subform with the content "positioned" .

2) Inside this subform, I placed a table with 1 row and 3 columns.

3) I then added a button for the users to add more row if they want. So I added this javascript to it: Table1._Row1.addInstance(1);

4) I also created a button to remove the row with this javascript:

Table1._Row1.removeInstance(this.parent.index);

I tested the above and everything works. I can add more rows, etc...But I am having trouble here: I want to create this in a way that if user adds new row by clicking on the button, I want the whole table (including its cells) to resize automatically to the size of the parent Subform. Right now, if more rows are added, the contents flows below the subform area and I dont want that. If more rows are added, I want the table to shrink and fit inside the size of the subform. Hope this makes sense...

Is there any way to do this?? plz help..

[Former Community Member]

Hi again,

this is in relation to my previous post.  Just a quick update...

In order to control the size of the table that is generated dynamically, I tried adding this jscript to the table "initialize" property:

this.maxH = "5in";

The above does not work. Is there way to set a max height property to the table so even if more rows are added, they do not go more than the max height in that form? If not, is there a way to divide the row's height based on the number rows added inside a given fixed area?

I have no idea what to do nxt...

[Former Community Member]

You can change the height of the table but the objects inside the table will not shrink for you ...you woudl have to change the height of each object inside if the table. Then (depending on how you defined the form) you can change the height of the table object.

To change the height you woudl need to access teh object this way:

xfa.layout.h("objectname", units)

I think the objects will flow for you so you should not have to worry about the x,y  position of the objects.

Hope that helps

Paul

[Former Community Member]

Hi Paul,

Thanks man...it did help! I think I understand what you mean. I have still been working on it and also saw more video tutorials as well as the other script references available here. Its a lot to grasp and I am getting there really slow like a snail..lol..

This is what I did so far and I am having some problems. Hopefully you can guide me here:

1) Created a table with 2 rows (1 header row and 1 Row1) and 3 columns (2 text fields and 1 image field)

2) I also have the add and remove buttons using the scripts I have already mentioned above.

Problem 1: Now after reading your response, what I thought of trying was: maybe add a script to the cell1 (under Row1) to change its height depending on the number of rows. I noticed that the height of the row1 is pretty much controlled by the height of cell1 so I thought this may work. I have only got about 5 inches workspace area for these rows. Meaning, if there is only 1 row, I want the height to be 5in; if its 2 rows then each row with height 2.5 inch etc....The width does not change, its only the height. So I thought this can be done with some calculation and a script to control the height of these elements. This is the script I have written so far and I am pretty sure this is wrong since its not working. Not sure if its even a valid code. Can u plz hv a look? I added these to the "initialize" event under Cell1 (inside Row1):

var count = Table1.Row1.instanceManager.count;
Table1.Row1.index + 1;          //Do I need this?? What does this do?? 
var rowHeight = xfa.layout.h(Cell1,"in");
Cell1.h = (rowHeight / count) + "in";

Problem 2: I am receiving an error message for the "Add Row" button I had created. This button has this code:

Table1._Row1.addInstance(1);

The button works absolutely fine but when I view the report in Acrobat debugger, I am receiveing the following error messages:

Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Row1 is not defined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
TypeError: Table1._Row1.instanceManager is undefined
1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
ReferenceError: Cell1 is not defined
3:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
GeneralError: Operation failed.
XFAObject.addInstance:1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Incorrect number of parameters calling method 'addInstance'
GeneralError: Operation failed.
XFAObject.addInstance:1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Incorrect number of parameters calling method 'addInstance'
GeneralError: Operation failed.
XFAObject.addInstance:1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Incorrect number of parameters calling method 'addInstance'
GeneralError: Operation failed.
XFAObject.addInstance:1:XFA:form1[0]:#subform[0]:Subform1[0]:Button1[0]:mouseUp
Incorrect number of parameters calling method 'addInstance'

Why is it saying that Cell1 or Row1 is not defined? What does that mean? Where do I go from here?

Thank you for all your help! much appreciated....

[Former Community Member]

Hi paul...

this is in continuation to my last post...I have been poking around a bit more and I was able to get parts of the scripts working. The reason it was not working properly and also the reason for the above errors was because in some places, I have not written the script with the proper heirarchy path. I saw some samples to get an idea and this is the update on this:

Script to resize the table:

I have now added the following script to the "Add Row" button. My intention for this script is to calculate the number of rows in the table and then divide 4 (that is the maximum height I want for the table in inches) with this number and then assign this value to the new row height. Here is the script for the mouseup event:

form1.contentPage.contentbox.Button2::mouseUp - (JavaScript, client)
var count = (Table1.Row1.instanceManager.count) + 1;
Table1.Row1.h = (4 / count) + "in";
Table1._Row1.addInstance(1);

The code sorta works but not exactly the way I would have hoped. I am having the following problems with this now:

1) This script does not adjust the heights of its individual objects elements (or cells).

2) Also, I think the above script only adjusts the height of Row1 only and not the rows that are created later dynamically in the form. How do I improve this? Hopefully you can guide me...

Resizing Dropdown list:

Apart from the above, I also have 1 more question. In my form, I have created a dropdown list. This dropdown list is squeezed inside a 1inch table column. The current width of this dropdown list is 1inch as well. But I want this width to increase when a user clicks on this list so that its contents are fully visible. I added this code for mouseup and it does not work. Is it possible to increase the dropdown list field's width when user click on it?

this.w = "5in";

I am sorry I am asking all these questions. You have no idea how useful all your advise and suggestions will be. Thank you for all help...

[Former Community Member]

This is going to get very complicated ......I suggest that you send me your form and I will get the 1st one working....then you can see how itis done and decide if you want to continue from there. You can send the form to LiveCycle8@gmail.com please include a link back to this thread in your email.

paul

[Former Community Member]

thanks heaps paul...

I have just emailed you my form. Thank you for your support.

BTW, your contribution in this forum is great. I have read some of your other posts here and they have certainly been v helpful in my learning process. Much obliged!

[Former Community Member]

Hi Paul,

This is further to our email correspondence. I am just pasting your email response here since it may be useful to other newbies like me:

"Ok here you go ......I had to add the new row via a script object as the new objects are not completely available until the script ends so I cannot resize the new row from teh current script. 
Then when we resize - we have to resize the row, the cells and the image ....we start with all existing subforms then we do it for the new row that was just added.
Lastly I see that you have a delete row button. This will have to be part of the row otherwise we ill not know which row the user will want to delete .....unless you ask them (which is not good UI design)."

I was really impressed the way you modified the script so the table height does not change when new rows are added. That did help me in understanding the methods and it will certainly be v useful to me in the future. I have been practicing and getting a hang of LS and I have actually decided to redesigned my form since it appears that trying to have a fixed table height is quite a bit of work each time a row is added, removed or changed, etc... Your advise so far have been v helpful and it has helped me in redesigned the form into a different layout. So far so good...However, I just have a few more clarifications regarding some hurdles I am facing:

PS: I have emailed you a sample of my new form now so you can have a look at it.

1) Dynamic Image fields:

In this form, I have a subform that has a dropdown list and next to this, I have an image field. I want to change the image based on the selection in the dropdown list. I found a few samples and tutorials on this already and I tried 2 different approach for this. One works and the other doesnt.

Method that works: What I have done here is, I added all the images in the form and have put their presence to invisible. Then using the javascript, I am making the image visible based on the selection in the dropdown list. I found this method somewhere through googling and it works.

Method that doesnt work: Its similar to the above, but instead of putting all the images in the form, I just inserted 1 image field and then tried to change the url of this dynamic image based on the selection in the drop down list. But this method is not working. I tried inserting this jscript and nothing happens:

switch (this.rawValue)
{  
case "1":
myImages.value.Image.href=http://www.mysiteaddress.com/blah_blah.jpg;
break;
case "2":
myImages.value.Image.href=http://www.mysiteaddress.com/blah_blah2.jpg;
break;
}

The 2nd method does not work. Although I know the method 1 above works and I am currently using it, I am just curious to find out why the 2nd method is not working? Did I get the script wrong or is this feature no longer allowed? I just thought that if the second method works fine, it saves the hassle of putting all the images on the form and then making them hidden. Instead, I just need to put one image field and then dynamically change its image based on the selection. I hope this make sense..please advise..

2) Changing the background colour of the Dropdown list box:

I am trying to change the bg colour of the listbox in the dropdown list object (only the listbox bg color and not the whole background color). So, I added the following script to the mouseEnter event and this works:

var vName = this.somExpression;
var fieldObj = xfa.resolveNode(vName + ".ui.#choiceList.border.fill.color"); 
fieldObj.value = "255,255,225";

My Problem: The above script works so I dont need to change anything there. But, I also want to add another script to the mouseExit event to change the fill color to its default once the mouse leaves the dropdown lists. Initially, this field has no fill colour and the border fill style is none. The fill color is only added during the mouseEnter event. How do I change the bg color fill back to none during mouseExit after the above script is executed on mouseEnter?

(NOTE: If you see my form, I have used the above scripts for the dropdown list only in "boxSubform[0]".)

3) Changing the length of the Dropdown List box:

I only have about 1.6 inches workspace to add this dropdown list box. However, the length of some lists (list items) in this dropdown list box is actually longer and the remaining part is cut out. So, I added the following script to increase the dropdownlist length and it does not work the way I would have hoped...

The script I have written so far:

I added these to the mouseEnter event and it works fine -

form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].MyDropdown::mouseEnter - (JavaScript, client)
this.w = "2in";  //this is to to increase the width of the dropdown list

I added these to the mouseExit event and it works fine too-

form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].MyDropdown::mouseExit - (JavaScript, client)
this.w = "1.625in";

When I tested the form with the above script, this is what happens:

1) First when you move the mouse over this field, the width increases. Similarly the width decreased when you move away.

2) So, even if this is clicked, the list box is opened with this 2inch width so thats good.

3) There are no problems when the mouse is moved over these list items as well. However, this does not look good when the dropdown list item is clicked with its item lists open and then the mouse leaves this area. In this case, as soon as the mouse leaves this area, the mouseExit script runs and hence it makes the drop down list width to shrink eventhough the list items are still open. How do I resolve this? I was thinking about this and I thought the possible way to overcome this is by writing a javascript for the mouseExit event executing something like this:

if this dropdown list is open,
then  this.w = "2in";
else
this.w = "1.625in";

I am not sure how to write a jscript for the above?

(NOTE: If you see my form, I have used the above scripts for the dropdown list in "boxSubform[0]".)

4) Hiding the alternative row shadowing for hidden columns:

If you check out my form, you can notice that I have put the "close" button (button to delete table rows) on the left column and I have also put its presence to "Visible (screen only)". The parent table has got the 'alternative row shadow' checked. What I notice here is, when this page is printed, eventhough the first column's presence is set to "Visible (Screen Only)", it still prints the row shadow for this column and it looks bad. How can I fix this? Any help will be great!

I have already emailed you my new form again so you can have a look.

Thanks again Paul and I cant thank you enough for your help. I am sooo happy to see such a great support and resources available here since it can be a nightmare for some newbies like me... :-)

[Former Community Member]

1. That is expected behavior ….you cannot get external resources (like images) without the users consent after the form has been rendered. So having all of the images that you will use in the form is the way to go .

2. This does not make sense to me …..if you change the color of the background when the field is active and the field only shows this when it is active why bother changing it back…the user will never see it in an inactive state (i.e. the dropdown list does not show unless the field is active). I also think that you should use the enter event and not the mouseEnter event. If the user simply moves his mouse across the field your script is firing …by using the enter event the user shows commitment to the field and then your code fires. Lastly you can do everything in a single line of code making it more efficient – this.ui.choiceList.border.fill.color.value = “255,255,225”

3. This would be resolved by using the enter and exit events instead …..another reason to add to #2

4. Because this is a table the button sits inside of a cell ….you are hiding the button but the cell still remains …it is that cell that is appearing. Wrap your button in a subform (it wil take the whole space of the cell and set the default background to the same color as your page background. This way when you print the button will not appear and the cell background will be the same as the page background.

[Former Community Member]

wow paul, your last post was gold! v helpful!

1) Makes sense now..

2) I liked your suggestion of using the enter event rather than mouseEnter event. At the beginning I was infact wondering why there are so many events similar to each other (for eg. mouseUp & click). But now after trying out different events, it makes sense on how unique each are. Further to your advise, I have now changed the script to the enter event. Its so much better and its not annoying like the mouseEnter event for this. So this part is good, but still having some problems..

Regarding the bg.color: What I noticed here is that, even when the script is for only the enter state, the changes made during the enter state remains even after the exit. So thats why I thought I need to another statement to the exit event to revert the changes back to its original state.

Thats right...but even if the dropdown box is not visible, the box of this field still has the fill color. Meaning, in the exit event when a choice from the list is selected and even if the dropdownbox is closed, the field area box still remains in this new fill color change executed during the enter event.  Does it make sense? So dont I need to add a script here so the bg.color.fill.value goes back to its default? I know its easy to add another script to change the color. But just not sure how do I change the fill back to "none".

I tried that but its not working. I see that the above statement is so much simpler and there is no need for 3 lines of script, but I am not sure why nothing happens. I thought maybe there was a typo, so I also tried this:

 form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].InputKeysDropdown::enter - (JavaScript, client)
this.ui.#choiceList.border.fill.color.value = “255,255,225”;

I am trying to do the same for a textfield as well and this doesnt work neither:

 form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].TextField1::mouseEnter - (JavaScript, client)
this.ui.#textField.border.fill.color.value = “255,255,225”;

Thats weird! no idea on why its not working? am I missing something? I even tried to oneofChild method too..

3) Just like the one above, changing the event to enter rather than mouseEnter did the trick. So I now use this to change the width of the dropdown list when its active and it works fine:

"enter" event:

this.w = "2in";

"exit" event:

this.w = "1.625in";

4) Beautiful....wrapping the button in the table cell to a subform and having the subform background to the page color did the trick!! The row shadow does not appear in this case! Awesome...thanks...

[Former Community Member]

Hi paul,

I think I may have worked it out...

After my last post an hour ago, I was working on this and I now tried the following script:

I now have this script to the "enter" event:

//the following is the script to change the bg colour of the list box
var vName = this.somExpression;
var fieldObj = xfa.resolveNode(vName + ".ui.#choiceList.border.fill"); 
fieldObj.color.value = "255,255,225";
fieldObj.presence = "visible";

This script is for the "exit" event:

//the following is the script to change the bg colour of the list box
var vName = this.somExpression;
var fieldObj = xfa.resolveNode(vName + ".ui.#choiceList.border.fill"); 
fieldObj.presence = "invisible";

So the above script seems to do what I wanted. The fill color that was added become invisible during the exit event and hence it reverts back to its default stage. Hoping its logically correct...

I still havent worked out the reason for why the other simplified version of the above code (the one you had suggested) is not working..I tried replacing the 3 lined code to this and this one sorta works:

this.border.fill.color.value = "255,255,225"; 

but this code doesnt work  like the other one above. With this one, it gives an unwanted black border around the entire field and also it does not the color fill the dropdown box bit. I dont like that...Anyhow, I am v happy with the progress of this form so far. The more I use LC, the more easier it becomes...I love it!

Cheers to all your help mate!

[radzmar]

Fields have two border fill colors, that can be changed.

If you use JavaScript you have to remove the # (i.e. this.ui.#choiceList.border.fill.color.value) from the code, as it doesn't support the # accessor.

Or you put this into the resolveNode function (i.e. this.resolveNode("this.ui.#choiceList.border.fill.color").value = "255,255,255";).

[Former Community Member]

Thank you radzmar..it makes sense now...

Thanks to all of you...i've now completed my first form.Cheers!