Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Radio buttons determine which company logo is displayed

Avatar

Level 9

In ES9 I created a form using the Action Builder feature where the first line is two radio buttons for the user to select which of our two companies they work for. Depending on their selection, the corresponding company logo is changed from invisible to visible on the Master Page. This works fine but when a second page is generated dynamically, the logo is only displayed on page one. How do I get to display on all subsequent pages generated?

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi Don,

Basic error on my part. I like using the docReady event because it fires only once, as the form is initially rendered. However that is the problem here. When a new page is rendered, the docReady event does not fire, so the new instance of the ImageField is open.

Simple solution is to move the script from the docReady event to the initialize event of the ImageField. I have amended the sample, same link (http://assure.ly/sUcrHx).

Niall

View solution in original post

10 Replies

Avatar

Level 10

Hi,

Try changing it to an ImageField instead of an image object and set its binding to Global (see Object > Binding palette).

If that works you will need a small script in the ImageField's docReady event:

this.access = "readOnly";

Niall

Avatar

Level 9

I changed both logos to image fields on Master page 1 and set the binding to global. When I click in the company radio bullet, the corresponding logo appears in the header. When a second page is dynamically generated, the logo does not appear on page two and disappears on page one.

I tried creating a Master page 2 and the same thing happens.

I went back to my original design (logos are image fields) and noticed that when a second page is generated, the logo disappears from page one, why?

Avatar

Level 10

Hi,

I believe what is happening is that when a new page is being rendered, it reverts the image objects to their default/initial state (in your case probably hidden).

Have a look at this example: http://assure.ly/mcFrC6. In particular the script on page 1. This demonstrates how you can assign the rawValue of an ImageField to any existing Image object. While the example is on the Design pages, the same approach would be used on a Master page.

  1. Set up an ImageField object on the Master page, without a default image and without a caption.
  2. Set its binding to Global.
  3. Set up two Image objects and link the two logos.
  4. Set these Image objects to hidden.
  5. Then the script would follow the example, where it would set the value of the ImageField to match the value of the appropriate Image object (logo).

I can confirm that this will work, but can't share an example.

Niall

Avatar

Level 9

Hi Niall,

I am trying but not having much success. I don't know Java Script and have been using the Action Builder. I tried using the, "Set the value of a field" choice in the Action Builder but the image field and image objects do not appear in the pop-up select window.

I looked at the script in the example you sent:

 

var vImage = this.name.toString();

displayImage.rawValue = xfa.resolveNode("Imag" + vImage).value.image.value;

but I can't figure out how to set it up so when the user clicks the radio button, the rawValue of the logo1 image object is displayed.

I went into the Click event of the radio button and added the script above. What does the script need to say to have the logo image field display the rawValue of logo1 image object?

Do I add the two image objects (logos) to the Master page or Design page?

Thanks so much for your help!

Avatar

Level 9

I'm using the following script but this still does not work. My Image object is named "ImageYF" and is hidden on the Master page. My image field is named, "displayImage" and I put the script in the Click event of the radio button.

Do I need to somehow refer to the Master page since the radio buttons are on the design page?

var vImage = this.name.toString();

displayImage.rawValue = xfa.resolveNode("Image" + vImage).value.image.value;

Avatar

Level 10

Okay, I have done up a new example, specifically focusing on your requirements: http://assure.ly/sUcrHx.

Hope that helps,

Niall

Avatar

Level 9

Niall,

Yes, that absolutely helped!

Thank you so very much for all your help.

-Don

Avatar

Level 9

Niall,

One problem. When the next page is created dynamically, the logo is not "Read-Only" and you can click to change the image. Any way to fix this?

Thanks again.

-Don

Avatar

Correct answer by
Level 10

Hi Don,

Basic error on my part. I like using the docReady event because it fires only once, as the form is initially rendered. However that is the problem here. When a new page is rendered, the docReady event does not fire, so the new instance of the ImageField is open.

Simple solution is to move the script from the docReady event to the initialize event of the ImageField. I have amended the sample, same link (http://assure.ly/sUcrHx).

Niall

Avatar

Level 9

Niall,

Yes - that fixed it.

Thank you!

-Don