Passing 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) click the "Clear data" link in the footer.
The code for the example is in this folder in the Prototype Kit:
/docs/views/examples/pass-data
How to use
The kit stores data from inputs using the name attribute of the input.
For example, if you have this input:
<input name="first-name">
You can show what the user entered later on like this:
<p>{{ data['first-name'] }}</p>
Or with nested fields:
<p>{{ data['claimant']['first-name'] }}</p>
Clearing data
To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.
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.
For a text input:
<input name="first-name" value="{{ data['first-name'] }}">
For a radio or checkbox input you need to use the 'checked' function:
<input type="radio" name="over-18" value="yes" {{ checked("over-18", "yes") }}>
Or with nested fields:
<input type="radio" name="claimant[over-18]" value="yes" {{ checked("['claimant']['over-18']", "yes") }}>
Setting default data
You can set default values in this file in your prototype folder:
app/data/session-data-defaults.js
Advanced features
Using the data in Nunjucks macros
Example using the 'checked' function in a checkbox component macro:
{{ govukCheckboxes({
name: "vehicle-features",
fieldset: {
legend: {
text: "Which of these applies to your vehicle?"
}
},
hint: {
text: "Select all that apply"
},
items: [
{
value: "Heated seats",
text: "Heated seats",
id: "vehicle-features-heated-seats",
checked: checked("vehicle-features", "Heated seats")
},
{
value: "GPS",
text: "GPS",
id: "vehicle-features-gps",
checked: checked("vehicle-features", "GPS")
},
{
value: "Radio",
text: "Radio",
id: "vehicle-features-radio",
checked: checked("vehicle-features", "Radio")
}
]
}) }}
Using the data in Nunjucks macros (nested fields)
Example using the 'checked' function in a checkbox component macro (nested fields for multiple vehicles):
{{ govukCheckboxes({
name: "vehicle1[vehicle-features]",
fieldset: {
legend: {
text: "Which of these applies to your vehicle?"
}
},
hint: {
text: "Select all that apply"
},
items: [
{
value: "Heated seats",
text: "Heated seats",
id: "vehicle1-vehicle-features-heated-seats",
checked: checked("['vehicle1']['vehicle-features']", "Heated seats")
},
{
value: "GPS",
text: "GPS",
id: "vehicle1-vehicle-features-gps",
checked: checked("['vehicle1']['vehicle-features']", "GPS")
},
{
value: "Radio",
text: "Radio",
id: "vehicle1-vehicle-features-radio",
checked: checked("['vehicle1']['vehicle-features']", "Radio")
}
]
}) }}
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']
Using the data on the server (nested fields)
For example for an input with name="claimant[first-name]":
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.
<input name="_secret">