Important

This is the documentation for older versions of the Prototype Kit

Covering versions 7, 8, 9, 10, 11 and 12

Go to latest version

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) click 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:

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

Using the data in Nunjucks macros

Example using the 'checked' function in a checkbox component macro:

{{ govukCheckboxes({
  idPrefix: "vehicle-features",
  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",
      checked: checked("vehicle-features", "Heated seats")
    },
    {
      value: "GPS",
      text: "GPS",
      checked: checked("vehicle-features", "GPS")
    },
    {
      value: "Radio",
      text: "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({
  idPrefix: "vehicle-features",
  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",
      checked: checked("['vehicle1']['vehicle-features']", "Heated seats")
    },
    {
      value: "GPS",
      text: "GPS",
      checked: checked("['vehicle1']['vehicle-features']", "GPS")
    },
    {
      value: "Radio",
      text: "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">