Image displayed based on user selection

[Former Community Member]

I'm trying to create a form where a user makes selections on one form, then on the next form images are displayed based on the previous form's input.



Can I have one form that has a few radio buttons that tell the next form what image to display?



It seems like a relatively simple thing to do but I'm at a loss to find the method... can anyone help?

[Former Community Member]

bump

[Former Community Member]

Does it have to be completly different form? B/c if you'd use the same form, that would be a lot easier. Please let me know and I will gladly help you.

[Former Community Member]

Yes, it could be the same form. I'm trying to accomplish this with JavaScript but I don't know enough about the language yet. It doesn't have to be JS but it's the only thing I've come up with so far. I would greatly appreciate your help, Chris!

[Former Community Member]

I've been studying JS a bit and I think I can use a drop down list that says something like:



if (this.rawValue == 1) {

northArrowN.presence = "visible";

}



this doesn't work. The image just stays invisible.



I'm confused by the 'Show' drop down list in the script editor. What event would I use to say "when a selection is made from the dropdown list named 'northArrow'" if that value is '1' change the presence of the imaged named 'northArrowN' to 'visible'



the default presence of the image is 'invisible'



I have 8 images, that are all north arrows pointing in different directions. I want the user to be able to decide which arrow to be printed by some selection method, either radio buttons or a drop down list. I suppose I could also use one image and rotate it based on the selection. I'm just struggling to understand LiveCycle's flavor of JavaScript. I know how to do this with a web page now that I've read some JS tutorials.

[Former Community Member]

Ok, so here's what I've done to get it work (plaese remeber, that it's only for testing purposes):



1. New Form

2. Save it as Dynamic PDF Form

3. Add all the images using Image Field (remember to check "Embed Image Data"). In my example the images present three signs: "s", "s$" and "s$X" (I know they are weird, but heck, it's just an example). The images have following names in the hierarchy: ImageField1, ImageField2 and ImageField3

4. I'm putting the DropDown list into the form. Here's the trick, you can't get the NEW value of the dropdown if you use just .rawValue with change event. You have to use a method from EVENT xfa model. This method is xfa.event.newText and it represents the NEW value of the dropdownlist. Remeber to put text values to the dropdown: s, s$ and s$X

5. Now we have to do some scripting (and as for everybody who's an expert, I know my script sucks but I made it in 2 minutes so be cool about it ^^). Choose the dropdown, choose the CLICK event, change the language to javascript and RUNAT Client. Paste the following script:

var val = xfa.event.newText;

if(val == "s") {

ImageField1.presence = "visible";

ImageField2.presence = "invisible";

ImageField3.presence = "invisible";

}

if(val == "s$") {

ImageField1.presence = "invisible";

ImageField2.presence = "visible";

ImageField3.presence = "invisible";

}

if(val == "s$X") {

ImageField1.presence = "invisible";

ImageField2.presence = "invisible";

ImageField3.presence = "visible";

}



6. Save the form and try it. You can download it at:

http://oceanic.wsisiz.edu.pl/~kordulas/ftp/formularze/tests/images.pdf



My e-mail address is kordulasinski.krzysztof@gmail.com

please contact me if you have some more work ;)

[Former Community Member]

Wow that worked perfect! Thank you, thank you, thank you!



The next stage of my project will be a little more involved but still mostly image based.



Here's what I'm thinking:

I have a large number of images. Each image filename is made of up the variables that describe the properties of each image. I want to create drop downs for each one of the variables. The user selects something from each drop down. As the user makes selections, the values of the remaining drop downs are changed (values eliminated) to reflect only the possible combinations that remain (to avoid creating file names that don't exist in my library of images.) Then the user clicks a 'generate' button and it concatenates each field value and adds a URL to the front and '.jpg' to the end and that image is displayed on another page where the user can fill out the remaining fields and print it. There are far too many images to embed each one so that's why I want to link them.



After writing this I realized how complicated it probably is to make this work properly with LiveCycle. Am I be better off to just forget linking images with variables as filenames and create individual PDFs with each image and copy & paste the fields onto them or is there another way?



Whew... anyone feel like taking a stab at this one?

[Former Community Member]

Basically you always write the script to the change event of the component, where the selection happens. Exception is the calculate event. If you refer to some component in calculate event, it executes every time change comes to the referred component(s).



I've seen an example where was two static images: StaticImage1 and StaticImage2 (invisible). And there was an image field named newImage (empty by default). Two buttons had this kind of scripts:



Button1, click event:

var image = StaticImage1.value.image.value;

newImage.rawValue = image;



Button2, click event:

var image = StaticImage2.value.image.value;

newImage.rawValue = image;



and depending which button you cliked, image changed between StaticImage1 and StaticImage2 in newImage component.