How to guides - Passing data page to page

You may want to use or display data a user has entered over a few screens.

The prototype kit includes a simple way of saving data entered in forms, as well as displaying the saved data.

Data is stored locally on the computer running the prototype and disappears at the end of the session, when the browser window is closed.

You can see an example here

The code for the example can be found in:

docs/views/examples/passing-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>

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 name="know-nhs-number" type="radio" value="Yes" {{ checked("know-nhs-number", "Yes") }}>

Clearing data

To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.

Using the data in Nunjucks macros

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

{{ checkboxes({
  "idPrefix": "condition",
  "name": "condition",
  "fieldset": {
    "legend": {
      "text": "Have you ever had any of these conditions?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "Asthma",
      "text": "Asthma",
      checked: checked("condition", "Asthma")
    },
    {
      "value": "Cancer",
      "text": "Cancer",
      "checked": checked("condition", "Cancer")
    },
    {
      "value": "Lung disease (like emphysema or bronchitis)",
      "text": "Lung disease (like emphysema or bronchitis)",
      "checked": checked("condition", "Lung disease (like emphysema or bronchitis)")
    },
    {
      "value": "Diabetes",
      "text": "Diabetes",
      "checked": checked("condition", "Diabetes")
    }
  ]
}) }}