Skip to content

Commit

Permalink
Allow use of Nunjucks macros when passing data
Browse files Browse the repository at this point in the history 
Updated 'how to' instructions to allow for use of Nunjucks macros and
included some missing javascript to allow the passing of data to
work correctly.
  • Loading branch information
@mcheung-nhs
mcheung-nhs committed Feb 6, 2019
1 parent 0dbe616 commit bed492b
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 90 deletions.
2 changes: 1 addition & 1 deletion app/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const router = express.Router();

// Passing data example
router.get('/examples/passing-data', function (req, res) {
res.render('examples/passing-data/index', {'message' : 'Hello world'});
res.render('examples/passing-data/index')
});

// Branching example
Expand Down
154 changes: 78 additions & 76 deletions app/views/examples/passing-data/register-gp-step4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,84 +22,86 @@
<div class="nhsuk-grid-column-two-thirds">

<form action="/examples/passing-data/register-gp-step5" method="post" class="form">
<fieldset class="nhsuk-fieldset" aria-describedby="conditions-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<h1 class="nhsuk-fieldset__heading">
Have you ever had any of these conditions?
</h1>
</legend>
<span id="conditions-hint" class="nhsuk-hint">
Select all that apply.
</span>
<div class="nhsuk-checkboxes">
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-1" name="Asthma" type="checkbox" value="1" {{ checked("Asthma", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-1">
Asthma
</label>
<div class="nhsuk-form-group">
<fieldset class="nhsuk-fieldset" aria-describedby="conditions-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<h1 class="nhsuk-fieldset__heading">
Have you ever had any of these conditions?
</h1>
</legend>
<span class="nhsuk-hint" id="conditions-hint">
Select all that apply
</span>
<div class="nhsuk-checkboxes">
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-1" name="condition" type="checkbox" value="Asthma"{{ checked("condition", "Asthma") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-1">
Asthma
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-2" name="condition" type="checkbox" value="Cancer"{{ checked("condition", "Cancer") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-2">
Cancer
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-3" name="condition" type="checkbox" value="Lung disease (like emphysema or bronchitis)"{{ checked("condition", "Lung disease (like emphysema or bronchitis)") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-3">
Lung disease (like emphysema or bronchitis)
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-4" name="condition" type="checkbox" value="Diabetes"{{ checked("condition", "Diabetes") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-4">
Diabetes
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-5" name="condition" type="checkbox" value="Disabilities, including physical and learning disabilities"{{ checked("condition", "Disabilities, including physical and learning disabilities") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-5">
Disabilities, including physical and learning disabilities
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-6" name="condition" type="checkbox" value="Epilepsy"{{ checked("condition", "Epilepsy") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-6">
Epilepsy
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-7" name="condition" type="checkbox" value="Heart Disease"{{ checked("condition", "Heart Disease") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-7">
Heart Disease
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-8" name="condition" type="checkbox" value="High blood pressure"{{ checked("condition", "High blood pressure") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-8">
High blood pressure
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-9" name="condition" type="checkbox" value="Mental health issues, such as depression"{{ checked("condition", "Mental health issues, such as depression") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-9">
Mental health issues, such as depression
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-10" name="condition" type="checkbox" value="Stroke or mini stroke"{{ checked("condition", "Stroke or mini stroke") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-10">
Stroke or mini stroke
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-11" name="condition" type="checkbox" value="Thyroid problems"{{ checked("condition", "Thyroid problems") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-11">
Thyroid problems
</label>
</div>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-2" name="Cancer" type="checkbox" value="1" {{ checked("Cancer", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-2">
Cancer
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-3" name="Lung disease (like emphysema or bronchitis)" type="checkbox" value="1" {{ checked("Lung disease (like emphysema or bronchitis)", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-3">
Lung disease (like emphysema or bronchitis)
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-4" name="Diabetes" type="checkbox" value="1" {{ checked("Diabetes", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-4">
Diabetes
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-5" name="Disabilities, including physical and learning disabilities" type="checkbox" value="1" {{ checked("Disabilities, including physical and learning disabilities", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-5">
Disabilities, including physical and learning disabilities
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-6" name="Epilepsy" type="checkbox" value="1" {{ checked("Epilepsy", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-6">
Epilepsy
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-7" name="Heart disease" type="checkbox" value="1" {{ checked("Heart disease", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-7">
Heart Disease
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-8" name="High blood pressure" type="checkbox" value="1" {{ checked("High blood pressure", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-8">
High blood pressure
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-9" name="Mental health issues, such as depression" type="checkbox" value="1" {{ checked("Mental health issues, such as depression", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-9">
Mental health issues, such as depression
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-10" name="Stroke or mini stroke" type="checkbox" value="1" {{ checked("Stroke or mini stroke", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-10">
Stroke or mini stroke
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="conditions-11" name="Thyroid problems" type="checkbox" value="1" {{ checked("Thyroid problems", "1") }}>
<label class="nhsuk-label nhsuk-checkboxes__label" for="conditions-11">
Thyroid problems
</label>
</div>
</div>
</fieldset>
</div>
<button class="nhsuk-button nhsuk-u-margin-top-4">Continue</button>
</form>
<div class="nhsuk-back-link">
Expand Down
18 changes: 6 additions & 12 deletions app/views/examples/passing-data/register-gp-step5.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends 'layouts/layout.html' %}

{% block pageTitle %}
Example - passing data from page to page - step 3
Example - passing data from page to page - step 5
{% endblock %}

{% block beforeContent %}
Expand Down Expand Up @@ -87,17 +87,11 @@ <h2>
</dt>
<dd class="app-check-your-answers__answer">
<ul class="nhsuk-list">
{% if data['Asthma'] %}<li>Asthma</li>{% endif %}
{% if data['Cancer'] %}<li>Cancer</li>{% endif %}
{% if data['Lung disease (like emphysema or bronchitis)'] %}<li>Lung disease (like emphysema or bronchitis)</li>{% endif %}
{% if data['Diabetes'] %}<li>Diabetes</li>{% endif %}
{% if data['Disabilities, including physical and learning disabilities'] %}<li>Disabilities, including physical and learning disabilities</li>{% endif %}
{% if data['Epilepsy'] %}<li>Epilepsy</li>{% endif %}
{% if data['Heart disease'] %}<li>Heart disease</li>{% endif %}
{% if data['High blood pressure'] %}<li>High blood pressure</li>{% endif %}
{% if data['Mental health issues, such as depression'] %}<li>Mental health issues, such as depression</li>{% endif %}
{% if data['Stroke or mini stroke'] %}<li>Stroke or mini stroke</li>{% endif %}
{% if data['Thyroid problems'] %}<li>Thyroid problems</li>{% endif %}
{% for item in data['condition'] %}
<li>{{ item }}</li>
{% else %}
<li>No conditions selected</li>
{% endfor %}
</ul>
</dd>
<dd class="app-check-your-answers__change">
Expand Down
2 changes: 2 additions & 0 deletions app/views/includes/scripts.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<script src="/js/main.js"></script>
<script src="/js/jquery-1.11.3.js"></script>
<script src="/js/auto-store-data.js"></script>

<!-- Add any custom scripts -->
42 changes: 42 additions & 0 deletions docs/views/how-tos/passing-data-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,48 @@ <h3>Showing answers in inputs</h3>
<h3>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>Using the data in Nunjucks macros</h3>

<p>Example using the 'checked' function in a checkbox component macro:</p>

<p><pre class="app-pre"><code>&#123;&#123; checkboxes({
"idPrefix": "condition",
"name": "condition",
"fieldset": {
"legend": {
"text": "Have you ever had any of these conditions?",
"classes": "nhsuk-fieldset__legend--l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all that apply"
},
"items": [
{
"value": "Asthma",
"text": "Asthma",
checked: checked("condition", "Asthma")
},
{
"value": "Cancer",
"text": "Cancer",
"checked": checked("condition", "Cancer")
},
{
"value": "Lung disease (like emphysema or bronchitis)",
"text": "Lung disease (like emphysema or bronchitis)",
"checked": checked("condition", "Lung disease (like emphysema or bronchitis)")
},
{
"value": "Diabetes",
"text": "Diabetes",
"checked": checked("condition", "Diabetes")
}
]
}) &#125;&#125;</code></pre></p>

{% include "how-tos/includes/back-button.html" %}

</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,6 @@ exports.getLatestRelease = function () {
}
*/

/*
// Try to match a request to a template, for example a request for /test
// would look for /app/views/test.html
// and /app/views/test/index.html
Expand Down Expand Up @@ -217,6 +216,7 @@ exports.matchRoutes = function (req, res, next) {
renderPath(path, res, next)
}

/*
// Try to match a request to a Markdown file and render it
exports.matchMdRoutes = function (req, res) {
var docsPath = '/../docs/documentation/'
Expand Down

0 comments on commit bed492b

Please sign in to comment.