Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Image change from drop down menu selection

Avatar

Level 2

I am very new to LiveCycle ES 8, I am trying to have what I guess may be called a dynamic image in. When you select a value from the drop down menu, the image changes on the other page, to fit the value selected on the previous page. I am not a programmer I am willing to do what i can to get this to work. Any help would be greatly appreciated. Thank You.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi,

It is possible to achieve what you want. You will need a few objects:

  • dropdown list object with script;
  • "image" objects, one for each image you want. These would be set to hidden;
  • "imageField" object. You would only need one of these. The initial value would be null. The script in the dropdown will populate the imageField with the appropriate image object.

When setting up the dropdown list it can be handy to specify values in the binding tab (e.g. 1, 2, 3,...). Then in the script you can refer to the numbers rather than the strings that the user sees in the dropdown.

The imageField1 should be set to access read only in its initialize event:

this.access = "readOnly";

This will prevent the user overriding the image.

When setting up the image1, image2, image3 objects make sure to tick the "embed image data", otherwise the users may not have the images available to them.

You can place similar Javascript in the exit event of the dropdown:

if (this.rawValue == 1) {

     imageField1.rawValue = image1.value.image.value;

} else if (this.rawValue == 2) {

     imageField1.rawValue = image2.value.image.value;

} else if (this.rawValue == 3) {

     imageField1.rawValue = image3.value.image.value;

}

Good luck,

Niall

ps Because the dropdown object and the image objects are on different pages, you will need fully qualified references. If the dropdown is on page1 and the images on page2, the reference would look something like:

     page2.imageField1.rawValue = page2.image1.value.image.value;

View solution in original post

4 Replies

Avatar

Correct answer by
Level 10

Hi,

It is possible to achieve what you want. You will need a few objects:

  • dropdown list object with script;
  • "image" objects, one for each image you want. These would be set to hidden;
  • "imageField" object. You would only need one of these. The initial value would be null. The script in the dropdown will populate the imageField with the appropriate image object.

When setting up the dropdown list it can be handy to specify values in the binding tab (e.g. 1, 2, 3,...). Then in the script you can refer to the numbers rather than the strings that the user sees in the dropdown.

The imageField1 should be set to access read only in its initialize event:

this.access = "readOnly";

This will prevent the user overriding the image.

When setting up the image1, image2, image3 objects make sure to tick the "embed image data", otherwise the users may not have the images available to them.

You can place similar Javascript in the exit event of the dropdown:

if (this.rawValue == 1) {

     imageField1.rawValue = image1.value.image.value;

} else if (this.rawValue == 2) {

     imageField1.rawValue = image2.value.image.value;

} else if (this.rawValue == 3) {

     imageField1.rawValue = image3.value.image.value;

}

Good luck,

Niall

ps Because the dropdown object and the image objects are on different pages, you will need fully qualified references. If the dropdown is on page1 and the images on page2, the reference would look something like:

     page2.imageField1.rawValue = page2.image1.value.image.value;

Avatar

Level 2

Thanks for the rely. I have been busy on other projects but i will give this a try as soon as I get an opportunity.

Avatar

Level 2

Works great. Thank you for the assistance.

Avatar

Former Community Member

Niall,

   I have created a document using this method.  I have created the drop down list and properly generated the binding values.  I have inserted all of the images and checked the imbed image box and set them to hidden.  I have created a Javascript according to the one listed above and have tested it with 3 or 4 items and images and it works fine.  When I increase the number of items inthe drop down and increase the number of images to about 27 items and save the file, the drop down no longer works.  All of my items show up in the list, but it seems the ImageField never changes to the image associated with that dropdown selection value i the script.  I have checked defaults in the form properties and have JavaScript as my default Language, Default Run At Client, Preserve Scripting Changes Auto, PDF Render I have tried Version 6 Static, Version 7 Static, Version 7 Dynamic just for kicks.

Anything you can think of that would cause this? 

Just n FYI.  I did use duplicate to create my images. 

Any help would be appreciated Thank You in advance.