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

custom checkbox or button

Avatar

Level 2

Trying to generate a simple printable form, I have encountered the following problem: I need a square button with two alphabetic characters, which can either be made visible / invisible or highlighted on mouse click. Is it possible to modify a checkbox by using a certain script, so that the checkmark or cross changes into two alphabetic characters? Another option would be to create an image button which shows the two characters and make it visible / invisible on mouse click, so that the background graphics will be alternately visible. Further actions are not required. Thanks in advance for an easy-to-understand solution.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi, It probably won’t be as easy as my last comment implied. You will have to have the complete path from your reset button to the up image, which will include every thing up to the thing that is common in their field references. And, you will have to do that for each up butto.

View solution in original post

12 Replies

Avatar

Level 10

There is a few options for a checkbox, but not a custom image or text, and the same for a button.  But, you can hack something up with two image fields and a button with no appearance and some code to toggle the visibility.

Here's a sample to get show you what I mean, https://sites.google.com/site/livecycledesignercookbooks/home/ImageButton.pdf?attredirects=0&d=1

Bruce

Avatar

Level 2

Thank you for your suggestion, Bruce. Since I am a newbie to LC, I need to bother you once more. I was trying to create that subform, however, the option is greyed out on the insert menu and also on the objects library. Do you have an idea what might be causing that? Thank you for your patience.

Avatar

Level 10

Hi, Do you mean the option to insert a subform?  Very strange I have never seen that before, what has focus in the hierarchy? can you add a screen shot?

Avatar

Level 2

Hi again and thank you for your time. I meanwhiles figured out that the "insert subform" option is not available when a form was created from a pdf file as a background graphic. It displays in the hierarchy as "topmostSubform" with no Master Page at all. However, when I create a new empty form without a background, the "insert subform" option is available, but this does not meet my requirements, since the background design is essential. So it seems that the toggle image button will not work for my kind of document, or is there a way to somehow merge those two types of documents?

Avatar

Level 10

Hi,  When you open the pdf to be used as a background, you can select "Create an Interactive Form with a Flowable Layout", which will allow you to add subforms.  But if you want to stick with an XFAF form then I think you will be out of luck

Avatar

Level 2

Hi again and thank you for your patience. I guess I am getting back on track now. The “flowable layout form” did not give me an option to insert a background graphic, but I could place the required image on a subform. I have now created the three objects (image-up, image-down, button), wrapped them in a separate subform and inserted a script object in it, based on the sample script you gave me initially. Testing the script returns no errors, but it won’t toggle the image button. I suppose, I will have to rename the term “ImageButton” in the script, is this correct? Otherwise, which would be the correct syntax if, let’s say, I name my image buttons “up” and “down”?

Avatar

Level 10

You can leave off the ImageButton part in the script, as long as you have the invisible button as a sibling of your images.  This code goes in the button click event not a script object ... or is that for something else?

But you will need to rename the objects in my sample script to match your form object names, so should be

if (up.presence == "hidden") {
    down.presence = "hidden";
    up.presence = "visible";
} else {
    down.presence = "visible";
    up.presence = "hidden";
}

You should also set the down image to be hidden initially.

Not sure why you would not be getting errors, check under Edit ... Preferences ... JavaScript have you got "Show console on errors and messages" selected.

Avatar

Level 2

Bingo! Thank you so much, it is working now. There is just one little detail left: The reset button should be effective on these toggle buttons, too. Which means, when I click on reset, they all should switch back to the “up” state. Optionally, is there a way to apply the reset to the toggle buttons and all other elements selectively, only for this specific subform, without affecting the rest of the page?

I have found the following syntax:

var f1 = this.parent.somExpression + ".Seminar" + ",";
var f2 = f1 + this.parent.somExpression + ".Date" + ",";
var f3 = f2 + this.parent.somExpression + ".AE";
// ...and pass the variable as a parameter.

xfa.host.resetData(f3);

It works only for the first three elements (Seminar, Date & AE), but no more if I add additional lines for more elements, and I am not sure if it can be customized for the toggle buttons.

Avatar

Level 10

Hi,

The resetData() function only applies to the form data, resetting it back to the default values.  Things like the presence property of a form object are not considered form data.

So you probably need to add the extra code to the reset button click event;

up.presence = "visible";

Also, to get the resetData() function working correctly you need to be very careful in getting the format correct, especially adding the comma between each field, I find this approach easier;

var fields = [];
fields.push(this.parent.somExpression + ".Seminar");
fields.push(this.parent.somExpression + ".Date");
fields.push(this.parent.somExpression + ".AE");
// ...and pass the variable as a parameter.

xfa.host.resetData(fields.join());

The  .join() method handles the commas for you.

Bruce

Avatar

Level 2

Hi Bruce, thanks again for your time. The selective field reset for the subform works perfectly now! However, I am still unable to reset the toggle buttons to the “up” state. I tried to add the up.presence code at the end of the click event of both the subform- and the global-reset buttons, but it won’t reset any of the toggle buttons. Is it possible that I need to add a separate reference to each “up” state which I want to reset to "visible"?

Avatar

Correct answer by
Level 10

Hi, It probably won’t be as easy as my last comment implied. You will have to have the complete path from your reset button to the up image, which will include every thing up to the thing that is common in their field references. And, you will have to do that for each up butto.

Avatar

Level 2

Hi Bruce, thank you again for your feedback. I could apply a series of actions to both reset buttons, targeting the path for the “up” state of each toggle button separately and setting its action to “make visible”. Unfortunately, this must be done one by one, which means some work to do, but at least I can reset the complete row of toggle buttons at one click now. Same procedure as for the subform reset applies also to the global reset button.

All elements seem to be working now. I really appreciate your assistance and apologize for any inconvenience I have been causing you. Thank you for your time & efforts! Good job!