Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update guides to use new 'value' option instead of 'checked' filter #223

Merged
merged 7 commits into from
Feb 14, 2025
Merged

Update guides to use new 'value' option instead of 'checked' filter #223

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7ccb37e
Update guide and tutorial to use new values option
frankieroberto Feb 14, 2025
15376ee
Update example page to no longer used checked()
frankieroberto Feb 14, 2025
445b0b6
Remove unused checked function
frankieroberto Feb 14, 2025
bfcce44
Remove unused require
frankieroberto Feb 14, 2025
73860fe
Fix typo
frankieroberto Feb 14, 2025
34b468c
Fix name
frankieroberto Feb 14, 2025
bd6dbd0
Fix typo
frankieroberto Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ app.use(bodyParser.urlencoded({
// Automatically store all data users enter
if (useAutoStoreData === 'true') {
app.use(utils.autoStoreData);
utils.addCheckedFunction(nunjucksAppEnv);
}

// Warn if node_modules folder doesn't exist
Expand Down
2 changes: 1 addition & 1 deletion app/views/examples/passing-data/passing-data-check-answers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h1>
</dt>
<dd class="nhsuk-summary-list__value">
<ul class="nhsuk-list nhsuk-u-margin-bottom-1">
{% for item in data['condition'] %}
{% for item in data.conditions %}
<li>{{ item }}</li>
{% else %}
<li>No conditions selected</li>
Expand Down
85 changes: 38 additions & 47 deletions app/views/examples/passing-data/passing-data-question-conditions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,54 +22,45 @@
<div class="nhsuk-grid-column-two-thirds">

<form action="/examples/passing-data/passing-data-check-answers" method="post" class="form">
<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>
<div class="nhsuk-hint" id="conditions-hint">
Select all that apply
</div>
<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-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>
</fieldset>
</div>
<button class="nhsuk-button">Continue</button>
</form>
<div class="nhsuk-back-link">
<a href="/examples/passing-data/passing-data-question-contact" class="nhsuk-back-link__link">
<svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34">
<path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
</svg>
Change my previous answer</a>
</div>

{{ checkboxes({
idPrefix: "conditions",
name: "conditions",
fieldset: {
legend: {
text: "Have you ever had any of these conditions?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
},
hint: {
text: "Select all that apply"
},
values: data.conditions,
items: [
{
value: "Asthma",
text: "Asthma"
},
{
value: "Epilepsy",
text: "Epilepsy"
},
{
value: "Heart disease",
text: "Heart disease"
},
{
value: "High blood pressure",
text: "High blood pressure"
}
]
}) }}

{{ button({
text: "Continue"
}) }}
</form>
</div>
</div>
{% endblock %}
Expand Down
63 changes: 31 additions & 32 deletions app/views/examples/passing-data/passing-data-question-contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,38 @@
<div class="nhsuk-grid-column-two-thirds">

<form action="/examples/passing-data/passing-data-question-conditions" method="post" class="form">
<fieldset class="nhsuk-fieldset">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<h1 class="nhsuk-fieldset__heading">
How would you prefer the GP to contact you?
</h1>
</legend>
<div class="nhsuk-form-group">
<div class="nhsuk-radios">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="contact-phone" name="contact" type="radio" value="By phone" {{ checked("contact", "By phone") }}>
<label class="nhsuk-label nhsuk-radios__label" for="contact-phone">By phone</label>
</div>
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="contact-email" name="contact" type="radio" value="By email" {{ checked("contact", "By email") }}>
<label class="nhsuk-label nhsuk-radios__label" for="contact-email">By email</label>
</div>
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="contact-post" name="contact" type="radio" value="By post" {{ checked("contact", "By post") }}>
<label class="nhsuk-label nhsuk-radios__label" for="contact-post">By post</label>
</div>
</div>
</div>
</fieldset>
<button type="submit" class="nhsuk-button">Continue</button>
</form>
<div class="nhsuk-back-link">
<a href="/examples/passing-data/passing-data-question-name" class="nhsuk-back-link__link">
<svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34">
<path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
</svg>
Change my previous answer</a>
</div>

{{ radios({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you prefer the GP to contact you?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
},
value: data.contact,
items: [
{
value: "By phone",
text: "By phone"
},
{
value: "By email",
text: "By email"
},
{
value: "By post",
text: "By post"
}
]
}) }}

{{ button({
text: "Continue"
}) }}
</form>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/views/how-tos/build-basic-prototype/_BASE.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% set exampleServiceName = "Order a test to check if you have magical powers" %}
{% set exampleServiceURL = "magical-powers" %}
{% set exampleStart = { url: "start-page" } %}
{% set exampleRadios = { "url" : "magical-powers", "title" : "Have you felt symptoms of magical powers in the last 30 days?", "legend" : "magical-powers", "summary" : "Symptoms of magical powers" } %}
{% set exampleRadios = { "url" : "magical-powers", "title" : "Have you felt symptoms of magical powers in the last 30 days?", "legend" : "magicalPowers", "summary" : "Symptoms of magical powers" } %}
{% set exampleTextArea = { "url" : "details", "title" : "Tell us your symptoms of magical powers", legend: "details", "summary" : "Details of the symptoms" } %}
{% set exampleCheckAnswers = { url: "check-your-answers", title : "Check your answers" } %}
{% set exampleConfirmation = { url: "confirmation-page", title: "Confirmation" } %}
Expand Down
2 changes: 1 addition & 1 deletion app/views/how-tos/build-basic-prototype/branching.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ <h2 id="create-a-route">Create a route</h2>
router.post('/{{exampleRadios.url}}-answer', function (req, res) {

// Make a variable and give it the value from '{{exampleRadios.legend}}'
var magicPowers = req.session.data['{{exampleRadios.legend}}']
var magicPowers = req.session.data.{{exampleRadios.legend}}

// Check whether the variable matches a condition
if (magicPowers == "yes"){
Expand Down
68 changes: 38 additions & 30 deletions app/views/how-tos/build-basic-prototype/let-user-change-answers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ <h2 id="make-the-change-links-work">Make the "Change" links work</h2>
<ol class="nhsuk-list nhsuk-list--number">
<li>
Find the value
<code class="language-markup">data['{{exampleRadios.legend}}']</code>, then change the
<code class="language-markup">data.{{exampleRadios.legend}}</code>, then change the
the <code class="language-markup">href</code> value from <code class="language-markup">'#'</code> to
<code class="language-markup">'/{{exampleRadios.url}}'</code>
</li>
<li>
Find the value
<code class="language-markup">data['{{exampleTextArea.legend}}']</code>, then change the
<code class="language-markup">data.{{exampleTextArea.legend}}</code>, then change the
the <code class="language-markup">href</code> value from <code class="language-markup">'#'</code> to
<code class="language-markup">'/{{exampleTextArea.url}}'</code>
</li>
Expand All @@ -30,38 +30,46 @@ <h2 id="show-the-users-answer-in-question-1">
Show the user's answer in question&nbsp;1
</h2>
<p>
Radios and checkboxes have a
<code class="language-markup">checked</code> option to set whether they are
selected (checked) or not when the page loads.
Radios let you select which option should be pre-selected by setting a <code class="language-markup">value</code> option to the value of the selected option.
</p>
<p>
Open the <code class="language-markup">{{exampleRadios.url}}.html</code> file
in your <code class="language-markup">app/views</code> folder.
</p>
<p>
For each of the <code class="language-markup">items</code>, we'll add a
<code class="language-markup">checked</code> value, like this:
</p>
<pre tabindex="0"><code class="language-markup" >&#123;
value: "yes",
text: "Yes",
checked: checked("magical-powers", "yes")
&#125;,
&#123;
value: "no",
text: "No",
checked: checked("magical-powers", "no")
&#125;,
&#123;
value: "not sure",
text: "I'm not sure",
checked: checked("magical-powers", "not sure")
&#125;,
</code></pre>
<p>
In each case make sure the spelling is exactly the same as the
<code class="language-markup">value</code>.
Update the radios component to add <code class="language-markup">value: data.magicalPowers</code>, like this:
</p>
<pre
class="app-pre language-markup"><code class="language-markup" >&#123;{ radios({
idPrefix: "magical-powers",
name: "magicalPowers",
fieldset: {
legend: {
text: "{{ exampleRadios.title }}"" ,
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
},
hint: {
html: "For example, things moving when you have strong feelings or hearing someone's thoughts."
},
value: data.magicalPowers,
items: [
{
value: "yes",
text: "Yes"
},
{
value: "no",
text: "No"
},
{
value: "not sure",
text: "I'm not sure"
}
]
}) &#125;&#125;</code></pre>

<p>
<a href="http://localhost:3000/{{exampleRadios.url}}"
>Go to http://localhost:3000/{{exampleRadios.url}}</a
Expand All @@ -73,7 +81,7 @@ <h2 id="show-the-users-answer-in-question-2">
Show the user's answer in question&nbsp;2
</h2>
<p>
Text inputs and textareas have a <code class="language-markup">value</code> to
Text inputs and textareas work in a similar way to radios, adding <code class="language-markup">value</code> to
set what text appears in them when the page loads.
</p>
<p>
Expand All @@ -83,15 +91,15 @@ <h2 id="show-the-users-answer-in-question-2">
</p>
<p>
Go to <code class="language-markup">id: "{{exampleTextArea.legend}}",</code> and add a new line
<code class="language-markup">value: data['{{exampleTextArea.legend}}'],</code>
<code class="language-markup">value: data.{{exampleTextArea.legend}},</code>
like this:
</p>

<pre class="app-pre"><code class="language-markup" >&#123;&#123;
textarea({
name: "{{exampleTextArea.legend}}",
id: "{{exampleTextArea.legend}}",
value: data['{{exampleTextArea.legend}}'],
value: data.{{exampleTextArea.legend}},
label: {
text: "Tell us your symptoms of magical powers",
classes: "nhsuk-label--l",
Expand Down
8 changes: 4 additions & 4 deletions app/views/how-tos/build-basic-prototype/show-users-answers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h2 id="show-the-answer-to-question-1">Show the answer to question 1</h2>
In <code class="language-markup">value</code> on the next line,
change '485 777 3456' to
<code class="language-markup"
>data['{{exampleRadios.legend}}']</code
>data.{{exampleRadios.legend}}</code
>.
</li>
</ol>
Expand All @@ -51,7 +51,7 @@ <h2 id="show-the-answer-to-question-2">Show the answer to question 2</h2>
In the <code class="language-markup">value</code> on the next line,
change 'Kevin Francis' to
<code class="language-markup">
data['{{exampleTextArea.legend}}']</code
data.{{exampleTextArea.legend}}</code
>.
</li>
<li>
Expand Down Expand Up @@ -106,7 +106,7 @@ <h2 class="nhsuk-heading-m">
text: "Magical power symptoms in the last 30 days"
},
value: {
text: data["magical-powers"]
text: data.magical-powers
},
actions: {
items: [
Expand All @@ -123,7 +123,7 @@ <h2 class="nhsuk-heading-m">
text: "Details of symptoms"
},
value: {
text: data["details"]
text: data.details
},
actions: {
items: [
Expand Down
6 changes: 3 additions & 3 deletions app/views/how-tos/build-basic-prototype/use-components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ <h3 id="customise-the-example-code">Customise the example code</h3>
</li>
<li>
In the <code class="language-markup">items: &#123; text:</code> areas delete all the text after "Yes" and "No"

</li>
</ol>
<p>Your component code should now look like this:</p>

<pre
class="app-pre language-markup"><code class="language-markup" >&#123;{ radios({
idPrefix: "example-hints",
name: "example-hints",
idPrefix: "magical-powers",
name: "magicalPowers",
fieldset: {
legend: {
text: "{{ exampleRadios.title }}"" ,
Expand Down
Loading