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

Required Radio Button Colored Red in a Dynamic Form

Avatar

Level 4

Hi again

Okey, like the headline said, I've got some problems with required radio buttons right now. In static fields they have a border when they are required.

In dynamic forms they neither have, nor get any border.

I tried already:

1) to make a border with script (unfortunatelly it takes in the text too and is much smaller than the normal required border and will include the text => looks really ugly)

2) to paint a border with lines (unfortunatelly the box itself overlaps the border only for 0,02mm (couldn't fix it) and it looks damn ugly )

3) Cut the text out, write it in a textfield instead and border the complete box (Best solution right now... though a lot of work and won't look very good either)

Since I needed to change 25 of my forms to dynamic and all of them have some of those required radiobuttons in it, I would appreciate ANY solution that would look a little bit acceptable.

Anybody has any other idea how to get such a border (or anything similar) for these boxes?

Thanx already

Lisa

(PS.: I only use quadratic check-fields

PPS.: Sorry to bother you in the last time that much... I really try )

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi Lisa,

I hope I am understand what you are aiming to achieve.

The form will have the fields highlighted. Required fields will have a red border.

In relation to radio buttons, you also want a red border around the circle.

Attached is a sample, I hope that it is helpful.

On the left are radio buttons that have script in the initialise event, to check if the radio buttons are "required". If they are then the appearance is changed to a red border. If the radio buttons are not required, then the appearance remains as "lowered 3d".

if (scripted_RadioButtonList.validate.nullTest == "error")
{
    xfa.resolveNode("Yes.ui.checkButton.border.edge").stroke = "solid";
    xfa.resolveNode("Yes.ui.checkButton.border.edge").color.value = "255,0,0";
}
else
{
    xfa.resolveNode("Yes.ui.checkButton.border.edge").stroke = "lowered";
}

On the right of the form are radio buttons that are set as required when designing the form. At this design stage you could also set the appearance.

If the script does what you want, then you could develop a loop that would look at all of the radio buttons in the form and set the red border if the radio button is "required".

Good luck,

Niall

View solution in original post

14 Replies

Avatar

Level 6

Hi, Lisa

Some time ago I was working with dynamic form and radiobuttons, and they were highligthted with red border if I made them reqired.

1.JPG

So, I made example form. Maybe it can help.

BR

Avatar

Level 4

Hi Paul

Thanx again, but your form doesn't work here... Though I know how this works

Like I said, fixing the borders all up with a script that borders the whole thing was something I thought about too. But it really looks ugly because the texts coming after are sometimes longer (like a sentence)... It looks really ugly then...

Isn't there any possibility only to colour the borders of the input field or just the tiny bit around it?

Avatar

Level 10

Hi Lisa,

I would be cautious with setting radio buttons to mandatory and solely depending on the red outline. Last year we discovered that the appearance of the red outline varied depending on which version of Acrobat the user opended the file with. This varied from a red circle to a red square. However if a user had version8 or earlier, then the mandatory highlight was NOT visible at all. This meant that users did not realise that a radio button was mandatory and could not understand why the submit failed.

We tend to use a red * in the field captions for mandatory fields (including that of radio buttons).

Good luck,

Niall

Avatar

Level 4

Thanx

That means, the only way possible to somehow fix this thing is really to seperate the boxes from the text and put a border around the whole thing.

If I do it some way else it might get doublerendered. ^^

Lots of work waiting

Avatar

Level 10

Hi Lisa,

Why don't you wrap the radio buttons in a subform. Then set the border of the subform to red and give it a suitable thickness. Also give the subform some margins (0.05in) to give some space around the radio buttons.

This way you are leaving the radio buttons as they are (no separating text from buttons).

One downside is that any script (either in the radio buttons or referring to the radio buttons) would need to be amended to take account of the subform name.

Good luck,

N.

Avatar

Level 4

Yep, thought about something like that first too.(Already tried it)

Though it won't work out.

Not all my radiobuttons are next to each other. Sometimes they are next to each other horizontally, sometimes there are fields between them etc.

The layout also shouldn't be changed much (and can't be changed quite much, since it is stuffed too much).

Also it has to be standardised.

That's why I think delteing the text which belongs to that buttons and add it as normal text. Then add simple bordering to the buttons (without text).

=> little squares around the input boxes, with a standardized placing towards the inputfields and without subforms ;D

(Next point would be: most of my scripts are locked on or towards the radiobuttons ;D subbing them would mean I need to check just toooooooooooo much scripts.)

Thanx though

Lisa

Edit:

PS: has already someone a solution to get rid of a border preprint? ^^

Avatar

Level 10

Have you taken a look at John Brinkman's Exclusion Group posts?

http://blogs.adobe.com/formfeed/2008/12/exclusion_groups_v40.html

Some great stuff, that's a link to the fourth post but it's worth reading the first three as well. There's a script object you can use that does everything for you. Some neat stuff like being able to use subforms as part of exclusion groups.

I'd say too, if radio buttons are getting in your way then don't use them - use checkboxes instead, the supplied script object from John has all you need.

Message was edited by: Jono Moore - fixed link.

Avatar

Level 4

Sorry to say, but I think you got me a bit wrong.

It's not the radiobuttons that got in my way, it is the way they are displayed. (A field to enter information and a text. If you refer with a colour in it and it is in a dynamic form both, the input part and the text will be highlighted.)

I wanted to accomplish the following thing:

Make some kind of radiobutton or checkboxfield where only the little input part is red highlighted (with a border or something).

But neither in radiobuttons nor in checkboxes it works, does it?

Therefor it is no use in using checkboxes I think. If I do wrap those into subforms and highlight those again, not only the input part will be highlighted but also the following text. (That's why I don't understand how subforms could be of any use )

Right now I seperated the input part from the text and just highlighted the input field. Though it still doesn't look as good as I would like it to do.

If I got you wrong plz say so I am a bit tired right now and my English gets worse ;D

I'll have a closer look at those pages you suggested me on tuesday. (I'm a bit in trouble right now)

Thanx for providing me with information though

I'm allways greatfull to learn some new things ;D

(Silly people (like me) just can't learn enough so they could hide how dump they are ;D )

Byebye

Lisa

Avatar

Level 10

The code in John's samples will do that (just colour the input part).

Take a look through his posts and grab the sample files, I think they'll do what you're after.

Good luck!

Avatar

Level 10

Hi Lisa,

Hold tough!!

Here is something that may help...

The script is slightly different for the radio buttons from that for the checkboxes. But not that much.

This will colour the fill of the radio buttons and the checkboxes. I have choosen a light red, as the full red "255,0,0" is too strong. You can change the RGB values to what you want.

When copying the objects to a new form, just check the "xfa.form.page1." reference matches your German object names ;-)

Good luck,

N.

Avatar

Former Community Member

I haven't tried this, but there's a blog entry about this that offers a solution.

http://www.avoka.com/blog/?p=54

Basically it says

"There is a very simple way to preserve the Reader 8 behavior - simply add the following line to the root node of your form:

On Initialize
app.runtimeHighlight = false;"

Avatar

Level 4

okey

Niall and ajipp's solutions didn't work since I have to let the form stay highlighted.

And I still didn't get the scripts Jono linked me to... Sorry if I behave dumb... but could you send me an example?

Probably I'll get it then...

I've got to improve my English very soon or I'll get crazy

Avatar

Correct answer by
Level 10

Hi Lisa,

I hope I am understand what you are aiming to achieve.

The form will have the fields highlighted. Required fields will have a red border.

In relation to radio buttons, you also want a red border around the circle.

Attached is a sample, I hope that it is helpful.

On the left are radio buttons that have script in the initialise event, to check if the radio buttons are "required". If they are then the appearance is changed to a red border. If the radio buttons are not required, then the appearance remains as "lowered 3d".

if (scripted_RadioButtonList.validate.nullTest == "error")
{
    xfa.resolveNode("Yes.ui.checkButton.border.edge").stroke = "solid";
    xfa.resolveNode("Yes.ui.checkButton.border.edge").color.value = "255,0,0";
}
else
{
    xfa.resolveNode("Yes.ui.checkButton.border.edge").stroke = "lowered";
}

On the right of the form are radio buttons that are set as required when designing the form. At this design stage you could also set the appearance.

If the script does what you want, then you could develop a loop that would look at all of the radio buttons in the form and set the red border if the radio button is "required".

Good luck,

Niall

Avatar

Level 4

It was that easy

Works really good

Thanx again for your effort and patience

Lisa