Creating journeys with data

Use and display data a user has entered over a few screens.

The Prototype Rig 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.

How to use

The rig 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 type="radio" name="over-18" value="yes" {{ checked("over-18", "yes") }}>

If data['over-18'] has the value yes, the function will return checked.

Ignoring inputs

To prevent an input being stored, use an underscore at the start of the name.

<input name="_secret">

Using data in Nunjucks components

Example using the checked function in a checkbox component:

{{ 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 data in routes

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

Inspecting data

To see what data has been stored in the session, check the JavaScript console in your web browser.

Clearing data

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