Proof of Concept - Pre-selecting components using data object

[36degrees]

This is a rough proof of concept that shows how we could 'extend' the macros from GOV.UK Frontend (with the additions in https://github.com/alphagov/govuk-frontend/pull/2616) to pre-check / select radios, checkboxes and select using the stored data in the data object.

Check out this branch and run it then take a look https://localhost:3000/test for a demo.

A random collection of thoughts in no particular order:

• This currently requires changes to app/views/layout.html which is in 'user land' – not ideal, but that's where we currently do the imports…
• I suspect we'd want to add the filters somewhere else outside of the app directory, but added them for now just to prove it works
• I'm not sure how we'd make this play nicely with the extensions framework, but at the minute the imports from GOV.UK Frontend are hard-coded anyway…
• It'd be trivial to add similar for inputs and textareas, but date input might be harder… 🤔

[lfdebrux]

This is pretty cool!

My main thoughts about this work (and the related piece https://github.com/alphagov/govuk-frontend/pull/2616) is how it is documented. We probably don't want to telling users about multiple methods to achieve the same thing? But then we do have the issue of how do we make sure that they are reading the right documentation for the version of prototype kit they are using...

[joelanman]

re opening as this is something we want to investigate further

[frankieroberto]

I like this! The implementation works how I'd expect it do, ie once you specify a name attribute, there’s no further work to do. Behind the scenes, the prototype kit would just set the value attribute and then pass all the params to the macro from govuk-frontend.

This could still be overridden if you set an explicit value attribute, which would make this largely backwards-compatible?

The only complication would be for "nested" attributes, which either Express or the prototype kit maps to name values using square brackets (I’ve never dug into how this works).

So this:

govukTextInput({"name": "things[a1][name]", ...})

would have to get converted to this:

govukTextInput({"value": data["things"]["a1"]["name"]})

...unless there’s a better way that I don’t know about?

(We use these nested attributes where users need to add multiple of a thing, with a random key generated for each thing that’s then used in the URL route)