diff --git a/app/assets/javascripts/auto-store-data.js b/app/assets/javascripts/auto-store-data.js new file mode 100644 index 0000000000..4aaf12eb06 --- /dev/null +++ b/app/assets/javascripts/auto-store-data.js @@ -0,0 +1,26 @@ +/* global $ */ +$('body').on('submit', 'form', function (e) { + // On form submit, add hidden inputs for checkboxes so the server knows if + // they've been unchecked. This means we can automatically store and update + // all form data on the server, including checkboxes that are checked, then + // later unchecked + + var $checkboxes = $(this).find('input:checkbox') + + var $inputs = [] + var names = {} + + $checkboxes.each(function () { + var $this = $(this) + + if (!names[$this.attr('name')]) { + names[$this.attr('name')] = true + var $input = $('') + $input.attr('name', $this.attr('name')) + $input.attr('value', '_unchecked') + $inputs.push($input) + } + }) + + $(this).prepend($inputs) +}) diff --git a/app/config.js b/app/config.js index 0b66a53cfa..c88dfc60ec 100644 --- a/app/config.js +++ b/app/config.js @@ -12,6 +12,9 @@ module.exports = { // Enable or disable password protection on production useAuth: 'true', + // Automatically stores form data, and send to all views + useAutoStoreData: 'true', + // Enable or disable built-in docs and examples. useDocumentation: 'true', diff --git a/app/views/includes/scripts.html b/app/views/includes/scripts.html index 899f34f1fa..cb3fa3113e 100644 --- a/app/views/includes/scripts.html +++ b/app/views/includes/scripts.html @@ -4,3 +4,7 @@ + +{% if useAutoStoreData %} + +{% endif %} diff --git a/app/views/layout.html b/app/views/layout.html index bdaf4b1c22..c5d8942beb 100644 --- a/app/views/layout.html +++ b/app/views/layout.html @@ -36,6 +36,16 @@ with-proposition {% endblock %} +{% block footer_support_links %} + {% if useAutoStoreData %} + + {% endif %} +{% endblock %} + {% block body_end %} {% include "includes/scripts.html" %} diff --git a/docs/views/examples/pass-data/index.html b/docs/views/examples/pass-data/index.html new file mode 100644 index 0000000000..7541ad28d9 --- /dev/null +++ b/docs/views/examples/pass-data/index.html @@ -0,0 +1,128 @@ +{% extends "layout.html" %} + +{% block page_title %} + Example - Passing data +{% endblock %} + +{% block content %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +

+ 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>{%raw%}{{ data['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%}>
+
+

+
+ +

Advanced features

+ +

+ Using the data on the server +

+ +

You can access the data on the server in a route, for example for an input with name="first-name":

+ + 
+

+  var firstName = req.session.data['first-name']
+
+

+
+ +

+ Ignoring inputs +

+ +

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

+ + 
+

+  <input name="_secret">
+
+

+
+ +
+
+
+{% endblock %} diff --git a/docs/views/examples/pass-data/vehicle-check-answers.html b/docs/views/examples/pass-data/vehicle-check-answers.html new file mode 100644 index 0000000000..937c1a8d9b --- /dev/null +++ b/docs/views/examples/pass-data/vehicle-check-answers.html @@ -0,0 +1,97 @@ +{% extends "layout.html" %} + +{% block page_title %} +Check your answers +{% endblock %} + +{% block content %} + +
+ +
+
+

+ Check your answers before sending your application +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Vehicle details +

+ 		+
+ Registration number + + {{data['vehicle-registration']}} + + + Change registration number + +
+ Vehicle type + + {{data['vehicle-type']}} + + + Change vehicle type + +
+ Vehicle features + +
    + {% for feature in data['vehicle-features'] %} +
  • {{ feature }}
    • + {% else %} +
  • No features selected
    • + {% endfor %} +
+ 		+ + Change vehicle features + +
+
+ +
+

+ + Return to prototype kit examples + +

+
+ +
+ +
+ +
+ +{% endblock %} diff --git a/docs/views/examples/pass-data/vehicle-features.html b/docs/views/examples/pass-data/vehicle-features.html new file mode 100644 index 0000000000..79aa5af39a --- /dev/null +++ b/docs/views/examples/pass-data/vehicle-features.html @@ -0,0 +1,59 @@ +{% extends "layout.html" %} + +{% block page_title %} + Example - Passing data +{% endblock %} + +{% block content %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +
+ +

+ Which of these applies to your vehicle? +

+ +
+
+ + + Which of these applies to your vehicle? + + +

+ Select all that apply +

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+ +
+ +
+ +
+
+
+{% endblock %} diff --git a/docs/views/examples/pass-data/vehicle-registration.html b/docs/views/examples/pass-data/vehicle-registration.html new file mode 100644 index 0000000000..f40c8059e9 --- /dev/null +++ b/docs/views/examples/pass-data/vehicle-registration.html @@ -0,0 +1,43 @@ +{% extends "layout.html" %} + +{% block page_title %} + Example - Passing data +{% endblock %} + +{% block content %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +
+ +

+ What is your vehicle registration number? +

+ +
+
+ + + What is your vehicle registration number? + + + + + +
+
+ +
+ +
+ +
+ +
+
+
+{% endblock %} diff --git a/docs/views/examples/pass-data/vehicle-type.html b/docs/views/examples/pass-data/vehicle-type.html new file mode 100644 index 0000000000..93e5bf7195 --- /dev/null +++ b/docs/views/examples/pass-data/vehicle-type.html @@ -0,0 +1,55 @@ +{% extends "layout.html" %} + +{% block page_title %} + Example - Passing data +{% endblock %} + +{% block content %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +
+ +

+ What type of vehicle do you have? +

+ +
+
+ + + What type of vehicle do you have? + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+ +
+ +
+ +
+
+
+{% endblock %} diff --git a/docs/views/includes/scripts.html b/docs/views/includes/scripts.html index 8fad6725c5..f85a71254f 100644 --- a/docs/views/includes/scripts.html +++ b/docs/views/includes/scripts.html @@ -4,3 +4,7 @@ + +{% if useAutoStoreData %} + +{% endif %} diff --git a/docs/views/layout.html b/docs/views/layout.html index df9479b1d9..eb28cd6662 100644 --- a/docs/views/layout.html +++ b/docs/views/layout.html @@ -37,6 +37,16 @@ with-proposition {% endblock %} +{% block footer_support_links %} + {% if useAutoStoreData %} + + {% endif %} +{% endblock %} + {% block body_end %} {% include "includes/scripts.html" %} diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html index f3940bd590..ecc97ddb1a 100644 --- a/docs/views/tutorials-and-examples.html +++ b/docs/views/tutorials-and-examples.html @@ -55,6 +55,9 @@

Basic usage

Advanced usage