Skip to content

Commit

Permalink
Merge pull request #340 from alphagov/auto-data-session-4
Browse files Browse the repository at this point in the history 
Auto data session 4
  • Loading branch information
@joelanman
joelanman authored Apr 4, 2017
2 parents cd29c12 + 047065a commit 867b9ca
Show file tree
Hide file tree
Showing 15 changed files with 605 additions and 8 deletions.
26 changes: 26 additions & 0 deletions app/assets/javascripts/auto-store-data.js
View file
Original file line number Diff line number Diff line change
@@ -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 type="hidden">')
$input.attr('name', $this.attr('name'))
$input.attr('value', '_unchecked')
$inputs.push($input)
}
})

$(this).prepend($inputs)
})
3 changes: 3 additions & 0 deletions app/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',

Expand Down
4 changes: 4 additions & 0 deletions app/views/includes/scripts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
<script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
<script src="/public/javascripts/govuk/show-hide-content.js"></script>
<script src="/public/javascripts/application.js"></script>

{% if useAutoStoreData %}
<script src="/public/javascripts/auto-store-data.js"></script>
{% endif %}
10 changes: 10 additions & 0 deletions app/views/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,16 @@
with-proposition
{% endblock %}

{% block footer_support_links %}
{% if useAutoStoreData %}
<ul>
<li>
<a href="/prototype-admin/clear-data">Clear data</a>
</li>
</ul>
{% endif %}
{% endblock %}

{% block body_end %}
{% include "includes/scripts.html" %}
<!-- GOV.UK Prototype kit {{releaseVersion}} -->
Expand Down
128 changes: 128 additions & 0 deletions docs/views/examples/pass-data/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-xlarge">
Passing data from page to page
</h1>

<p>
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.
</p>

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

<p>
<a href="/docs/examples/pass-data/vehicle-registration">You can see an example here.</a>
</p>

<p>
The code for the example is in this folder in the prototype kit:
</p>

<pre>
<div class="code">
/docs/views/examples/pass-data

</div>
</pre>

<h2 class="heading-medium">How to use</h2>

<p>The kit stores data from inputs using the name attribute of the input.</p>

<p>For example, if you have this input:</p>

<pre>
<div class="code">
&lt;input name="first-name"&gt;

</div>
</pre>

<p>You can show what the user entered later on like this:</p>

<pre>
<div class="code">
&lt;p&gt;{%raw%}{{ data['first-name'] }}{%endraw%}&lt;/p&gt;

</div>
</pre>


<h3 class="heading-small">
Clearing data
</h3>

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

<h3 class="heading-small">
Showing answers in inputs
</h3>

<p>
If a user goes back to a page where they entered data, they would expect to see the answer they gave.
</p>

<p>For a text input:</p>
<pre>
<div class="code">
&lt;input name="first-name" value="{%raw%}{{ data['first-name'] }}{%endraw%}"&gt;

</div>
</pre>

<p>For a radio or checkbox input you need to use the 'checked' function:</p>
<pre>
<div class="code">
&lt;input type="radio" name="over-18" value="yes" {%raw%}{{ checked('over-18','yes') }}{%endraw%}&gt;

</div>
</pre>

<h2 class="heading-medium">Advanced features</h2>

<h3 class="heading-small">
Using the data on the server
</h3>

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

<pre>
<div class="code">
var firstName = req.session.data['first-name']

</div>
</pre>

<h3 class="heading-small">
Ignoring inputs
</h3>

<p>To prevent an input being stored, use an underscore at the start of the name.</p>

<pre>
<div class="code">
&lt;input name="_secret"&gt;

</div>
</pre>

</div>
</div>
</main>
{% endblock %}
97 changes: 97 additions & 0 deletions docs/views/examples/pass-data/vehicle-check-answers.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
{% extends "layout.html" %}

{% block page_title %}
Check your answers
{% endblock %}

{% block content %}

<main id="content" role="main">

<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">
Check your answers before sending your application
</h1>

<div class="form-group">

<table class="check-your-answers">

<thead>
<tr>
<th colspan="2">
<h2 class="heading-medium">
Vehicle details
</h2>
</th>
<th>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
Registration number
</td>
<td>
{{data['vehicle-registration']}}
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-registration">
Change <span class="visuallyhidden">registration number</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle type
</td>
<td>
{{data['vehicle-type']}}
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-type">
Change <span class="visuallyhidden">vehicle type</span>
</a>
</td>
</tr>
<tr>
<td>
Vehicle features
</td>
<td>
<ul>
{% for feature in data['vehicle-features'] %}
<li>{{ feature }}</li>
{% else %}
<li>No features selected</li>
{% endfor %}
</ul>
</td>
<td class="change-answer">
<a href="/docs/examples/pass-data/vehicle-features">
Change <span class="visuallyhidden">vehicle features</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>

<div class="form-group">
<p>
<a href="/docs/tutorials-and-examples">
Return to prototype kit examples
</a>
</p>
</div>

</div>

</div>

</main>

{% endblock %}
59 changes: 59 additions & 0 deletions docs/views/examples/pass-data/vehicle-features.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/docs/examples/pass-data/vehicle-check-answers" method="post" class="form">

<h1 class="heading-medium">
Which of these applies to your vehicle?
</h1>

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
Which of these applies to your vehicle?
</legend>

<p>
Select all that apply
</p>

<div class="multiple-choice">
<input id="vehicle-feature-heated-seats" name="vehicle-features" type="checkbox" value="Heated seats" {{ checked("vehicle-features", "Heated seats") }}>
<label for="vehicle-feature-heated-seats">Heated seats</label>
</div>

<div class="multiple-choice">
<input id="vehicle-feature-gps" name="vehicle-features" type="checkbox" value="GPS" {{ checked("vehicle-features", "GPS") }}>
<label for="vehicle-feature-gps">GPS</label>
</div>

<div class="multiple-choice">
<input id="vehicle-feature-radio" name="vehicle-features" type="checkbox" value="Radio" {{ checked("vehicle-features", "Radio") }}>
<label for="vehicle-feature-radio">Radio</label>
</div>

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
43 changes: 43 additions & 0 deletions docs/views/examples/pass-data/vehicle-registration.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% extends "layout.html" %}

{% block page_title %}
Example - Passing data
{% endblock %}

{% block content %}
<main id="content" role="main">

{% include "includes/breadcrumb_examples.html" %}

<div class="grid-row">
<div class="column-two-thirds">

<form action="/docs/examples/pass-data/vehicle-type" method="post" class="form">

<h1 class="heading-medium">
What is your vehicle registration number?
</h1>

<div class="form-group">
<fieldset>

<legend class="visuallyhidden">
What is your vehicle registration number?
</legend>

<label class="visually-hidden" for="registration-number">Vehicle registration number</label>
<input class="form-control" id="registration-number" name="vehicle-registration" type="text" value="{{data['vehicle-registration']}}">

</fieldset>
</div>

<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>

</form>

</div>
</div>
</main>
{% endblock %}
Loading

0 comments on commit 867b9ca

Please sign in to comment.