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.
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.