Customizing Radio Group Buttons Layout

The past week I have been working on customizing the layout of a radio group. Such a group consists of multiple ‘buttons’ of which at most one can be selected at any time.

The output format of our forms is xforms, which is an XML format to describe interactive forms. Such a form is interpreted and handle by a xform engine, which is Orbeon in our case.

In xforms there is a select1 element which handles radio buttons perfectly. There is only one downside, it does not allow any styling beyond that what is capable with CSS. Though Orbeon often adds features to xforms, it has nothing to overcome these limitations at the moment.

That means it was up to us to find a way to workout the shortcomings of xforms.

The generated output can not be directly changed as it acts as a neutral independent format, instead we added a post-processing step to transform the file using XSLT.

The features we had to include consists of:

  • Location of the radio button (left, right and top, middle bottom)
  • Padding around both button and label
  • Borders and background colors
  • Order the buttons in multiple columns according to N-fill or Z-fill
  • Help button, hint and alert
  • Enabling/disabling, hidden/visible

It is clear that this could not be done with the xforms select1 element. For the radio group to be able to be this flexible the only way is to take everything apart and use a table to position everything correctly.

While the table allows us to style the radio group as desired, the more logical features have to be handled in a different way. It is important to note that in xforms elements are bound to a model. This binding has now been removed by using a normal HTML table, instead of the xforms select1 element.

To put the value of the radio group in the model, we can use the Orbeon JavaScript API. There is only one problem with this, we can only set the value of a control and not the model itself directly. Which means we need to add a new, invisible, input field that is bound to the model. Hiding the input in xforms directly disables us from updating the model. By setting the style to “display: none”, we make it invisible in the browser, but still visible in xforms.

Enabling, disabling and making the group visible or hidden relies on xforms as it needs to be dynamic. Having the element wrapped in a xforms group allows us to do this easily. The alert and help button rely on Orbeon by mimicking it’s own elements for this.

It may look like a huge work-around at first, but in fact it is a pretty neat and clever way to introduce a huge amount of flexibility to otherwise boring radio group buttons.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.