Pass data from page to page
You may want to use or display data a user has entered over a few screens. The kit automatically stores all data entered, so you can show it later.
To clear the data (for example at the end of a user research session) use the Clear data link in the footer.
An example of what passing data looks like in a prototype
How to use
The kit stores data from inputs using the name
attribute of the input.
For example, if you have this input:
{{ govukInput({
name: 'first-name'
}) }}
You can show what the user entered later on like this:
<p>
{{ data['first-name'] }}
</p>
Showing answers in inputs
If a user goes back to a page where they entered data, they would expect to see the answer they gave.
Most inputs use the value
option:
{{ govukInput({
name: 'first-name',
value: data['first-name']
}) }}
For checkboxes the option is values
, since more than one can be selected.
Setting default data
You can set default data in your prototype. This will appear without the user having to enter anything. For example, if you want to prototype a journey where a user previously saved their responses and returned to it later to review or update the information already in the prototype.
If the user changes this data in the prototype, their new answers will be saved.
Add default data to this file:
app/data/session-data-defaults.js
For example to set default data for the inputs for 'First name' and 'Over 18' in the examples above, you would have this in your session-data-defaults.js
file:
module.exports = {
'first-name': 'Amina',
'over-18': 'yes'
}
Advanced features
Checkboxes and radios using HTML
If you are using the HTML components instead of Nunjucks, you need to use the checked
function for radios and checkboxes. For example:
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" {{ checked('waste','mines') }}>
Using the data on the server
You can access the data on the server in a route function
For example for an input with name="first-name"
:
var firstName = req.session.data['first-name']
Nested values
For complex data you can use nested values, for example:
{{ govukInput({
name: 'claimant[first-name]'
}) }}
You can show what the user entered later on like this:
<p>
{{ data['claimant']['first-name'] }}
</p>
You can set the value in an input like this:
{{ govukInput({
name: 'first-name',
value: data['claimant']['first-name']
}) }}
You can access the data on the server in a route function:
var firstName = req.session.data['claimant']['first-name']
Ignoring inputs
To prevent an input being stored, use an underscore at the start of the name.
{{ govukInput({
name: '_secret'
}) }}
To use this data you'll have to write your own route.