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.

How do I use a radio button to enable a image

Avatar

Former Community Member

I'm trying to figure out how to use a radio button to enable a banner/background image so I guess my question is two fold:

1. How do I create a background image?

2. How do I use a radio button such that when it = Yes, the background image appears.

Thanks!

6 Replies

Avatar

Level 4

Hey there,

The first methos that comes to mind for me is to use a formvariable to keep track of the background visibility, then have the image in a readOnly image field on the master page. After that, use a little javascript to wire it all up.

How To:

Add a form variable to the form:

- File, Form Properties

- Click "Variables" tab

- Click + button

- Enter a variable name (i.e. BackgroundVisibility)

- Set value to "hidden" (without the quotes)

Add background to Master Page:

- Click "Master Page" tab above form (nevt to "Design View Tab)

     - If "Master Page" Tab isn't visible, Right click on the gray area to the right of the tabs, and make suer "Master Pages" is checked off in the contect menu that appears.

- Insert an Image Field and resize to the area that you want the background image to fill

     - Note* Make sure you use an image field, not an image. Image fields let you use scripts, images don't.

- Format the image field as desired (i.e. remove caption, add border, etc.)

- Select the image to use for the background, by setting the URL field in the image object properties.

- Check "Embed Image Data" check box below URL in image object properties.

- Add an initize script (Javascript) to the image field:

     this.access = "readOnly";

** note the camel case used in "readOnly" it is case sensitive.

- Add a layout:ready script (Javascript) to the image field:

     this.presence = BackgroundVisibility.value;

** Note that BackgroundVisibility should be the same as the name of the variable that you added in the last step.

Wire it all together via script:

- Add a check box to the actual form (not the masterpage)

- Add a change script to the check box

     BackgroundVisibility.value = this.rawValue == 1 ? "visible" : "hidden";

** Again, BackgroundVisibility should be the same name used for the form variable. The above script uses a ternary operator... which is similar to a condensed if/then/else

I know that looks like a lot of work, but that's just because I was being very specific. In actuality, it's just a form variable, an image field, a check box and three one-line scripts. Very simple.

Let me know if you have any issues, or if I didn't explain something well enough.

-Scott

Note*** I just realized that you asked for a radio button, not a check box... the above still works, so long as "Yes" is given a value of 1 on the binding tab of the radio group.

Note the second*** I just added a step to the first bit... Specifically, setting the form variable value to "hidden" this is the default state of the background image.

    

Avatar

Former Community Member

Scott,

Thank you so much for your help. Your instructions were easy to follow and I think I implemented them as stated above, but I still can't get the functionality to work. I swapped out the radio buttons for check boxes that look like radio buttons and set the form variable BackgroundVisability to hidden, but the image still shows up no matter if I enable or disable the check box/radio button. What's the best way to troubleshoot this kind of issue?

Thanks again,

Saskia

Avatar

Level 4

when I was first getting started, the thing that I always forgot to do was to save it as a dynamic xml pdf, instead of a static pdf. You can choose which one you're saving it as in the drop downin the "save as" wizard. If you did save it as a dynamic pdf form, andit still isn't working... let me know and i can provide further instuctuons.

ps... this was sent via my tablet, and the space key doesn't seem to want to behave... sorry

Scott

Avatar

Former Community Member

Scott,

Thanks again for your help. I do have the file saved as a dynamic xml pdf. I'm not super new to forms development, I just don't have a whole lot of scripting experience. The background image still appears no matter if I enable to disable either the Yes or No check box. By default, I do not want the image to appear but it still shows up even though I've set the form variable BackgroundVisiability to hidden. I'm not quite sure what I'm doing wrong. I've checked and rechecked my work against your original post. I'm stumped.

Thanks,

Saskia

Avatar

Level 4

Hello again,

Sorry about that. I followed my own directions, and there was only one hiccup.. The form variable doesn't always like to accept the default value the first time. Double check to make sure that the variable is set to "hidden". Go File > Form Properties > Variables, click on your variable, and make sure the pane to the right has "hidden" in it. Again, it's case sensitive.

The other spot where I can see a potential for an issue is where you mention that you're using two check boxes instead of radio buttons.

There are two ways this can be done. The first uses one check box, the other uses one radio button list with two radio buttons.

1) Checkbox:

     - See above. Note, there is only one checkbox used, and this script is on the change event.

2) Radio buttons:

     - Add two radio button controls to your form, and make sure that they both are contained within the same radio button list in the heirarchy panel.

     - Set one to Yes, the other to No

     - On the binding tab of the radio button list, make sure that the value for Yes is 1, and the value for No is 2

     - On the change event, put the following script:

          BackgroundVisibility.value = this.rawValue == 1 ? "visible" : "hidden";

     *** make sure this change event script is on the radio button list itself, not on one of the child radio button controls. To do this, select the radio button list in the heirarchy panel. You'll know you did it right if you should see three change event headers in the scripting pane, the first one for the list (script goes here) and one for each child radio button.

I have created a sample form that uses a radio button list. If you still have an issue, feel free to message me your email and I will send it your way.

Hope the above helps!

- Scott

Avatar

Former Community Member

Scott,

Thanks again for your help. I checked that the variable value is hidden and I removed one of the check boxes and used the original change event you provided and I still can't get it to work. The background image still shows up no matter what. Do you think I should try using the radio button list? I don't really need to and it seems unnecessarily complicated to use that instead of one check box. Any ideas on how I should proceed from here?

Thanks again,

Saskia