Passing data page to page

The kit stores data from all answers that users give in a prototype. This lets you use or show the answers later.

View an example of what passing data looks like in a prototype.

How to use

When a user answers questions, their answer is saved within the 'data' object using the name attribute of the input.

For example, if you use this input to collect a user’s name:

{{ input({
  label: {
    text: "Full name"
  },
  id: "full-name",
  name: "fullName"
}) }}

You can show what the user entered later on like this:

{{ data.fullName }}

Answers from checkboxes will appear with commas, like 'a,b,c'. To show them as a list, use a for loop:

<ul>
  {% for condition in data.conditions %}
    <li>{{ condition }}</li>
  {% endfor %}
</ul>

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:

{{ input({
  label: {
    text: "Full name"
  },
  id: "full-name",
  name: "fullName",
  value: data.fullName
}) }}

For checkboxes and dates you need to use the values option (plural) instead:

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

Being able to set checkboxes and radios in this way was added in NHS Frontend version 9.2.0.

Clearing data

To clear the data, for example at the end of a user research session, ask the user to close their browser.