{% extends "layout.html" %} {% block pageTitle %} Pass data from page to page – GOV.UK Prototype Kit {% endblock %} {% block beforeContent %} {% include "includes/breadcrumb_examples.html" %} {% endblock %} {% block content %}

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.

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>{%raw%}{{ data['first-name'] }}{%endraw%}</p>

Or with nested fields:

<p>{%raw%}{{ data['claimant']['first-name'] }}{%endraw%}</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="{%raw%}{{ data['first-name'] }}{%endraw%}">

For a radio or checkbox input you need to use the 'checked' function:

<input type="radio" name="over-18" value="yes" {%raw%}{{ checked("over-18", "yes") }}{%endraw%}>

Or with nested fields:

<input type="radio" name="claimant[over-18]" value="yes" {%raw%}{{ checked("['claimant']['over-18']", "yes") }}{%endraw%}>

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:

{% raw %}
{{ 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")
    }
  ]
}) }}
{% endraw %}

Using the data in Nunjucks macros (nested fields)

Example using the 'checked' function in a checkbox component macro (nested fields for multiple vehicles):

{% raw %}
{{ 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")
    }
  ]
}) }}
{% endraw %}

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">
{% endblock %}