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.

You can see an example here.

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