Building a complex custom widget in UX Forms

Conditionally revealing content

Whilst UX Forms already provided checkbox and radio group widgets, as well as the ability to show and hide any widget based on answers to previous questions, we didn’t provide a widget that could combine the two in a single question.

Separate email and phone widgets conditionally visible upon selected checkboxes
Nested email and phone widgets conditionally visible upon selected checkboxes

What does our widget need to do?

Well, we need to be able to include a form field between options in a multiple choice widget, i.e. radio groups and check boxes. We really ought to be able to leverage all the goodness of UX Forms’ built-in widget behaviours like widget compose-ability, validation, rendering, full internationalisation, etc., to build this up.

A properties file defining the choices for our checkboxes. These are passed through to widgets as instances of Messages.

Composing existing widgets and behaviours

Both theCheckbox and RadioGroup widgets are instances of the MultipleChoice trait which adds in behaviour over and above “regular” widgets that is unique to UI components that ask you to choose between multiple options. So we’ll definitely need to make use of this somewhere.

First cut of a trait to handle common behaviour between nested checkboxes and radio buttons
Fleshing out NestingMultipleChoice with pseudo code to show how rendered nested widgets can be added to a widget’s template parameters
Delegating rendering to the multiple choice widget itself

Building the Nesting Checkboxes widget

So now we have a bunch of common behaviour in NestingMultipleChoice, let’s put that to use by actually building a nesting checkboxes widget.

First cut of a working checkboxes widget
Our checkboxes widget now with the special behaviour it needs when rendering itself
A modified checkboxes mustache template showing how to output the additional rendered nested widgets

Putting it all together

Whilst we have a working checkbox that can take nested widgets, to build the example from the top of this article we need to do one more thing — make the input text field appear inset with a grey border. Our GOV.UK theme already has the styles to do this, so it’s a matter of using a different layout template with the existing Input widget to use different css class names on the right elements.

A helper function to declare an Input widget with a different layout template
The definition of the working form built when writing this blog, demonstrating how to use our new NestingCheckboxes, as well as dynamically show/hide an input field depending on which option is selected
The finished section showing a NestingCheckboxes widget containing two input widgets

Want to know more?

Come have a look around https://uxforms.com, follow UX Forms on twitter, or email us at hello@uxforms.com and see how we can make your forms better, together.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
UX Forms

UX Forms

An enterprise-ready cloud platform for webform development. See our website for more: https://uxforms.com