- You do not know your NHS number. -
- -- You know your NHS number. -
- -
- Your reference number
-
- HDJ2123F
-
- We have sent you a confirmation email. -
- -You can show a user different pages, depending on how they've answered a question. - -
- -The code for the example can be found in:
- -/documentation_routes.js
docs/views/examples/branching+[add text here ] +
+ {% endblock %} + + +{% if pageTitle == "Overview" %}{# first page #} + +{{ pagination({ + nextUrl: "/how-tos/interactive-prototypes/session", + nextPage: "Store data in session" +}) }} + + +{% elif pageTitle == "Store data in session" %} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/index", + previousPage: "Overview", + nextUrl: "/how-tos/interactive-prototypes/pass-data", + nextPage: "Pass data from page to page" +}) }} + + +{% elif pageTitle == "Pass data from page to page" %} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/pass-data", + previousPage: "Store data in session", + nextUrl: "/how-tos/interactive-prototypes/conditional-content", + nextPage: "Change the content within a page based on a user's answers" +}) }} + +{% elif pageTitle == "Change the content within a page based on a user's answers" %} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/pass-data", + previousPage: "Pass data from page to page", + nextUrl: "/how-tos/interactive-prototypes/create-routes", + nextPage: "Create routes" +}) }} + +{% elif pageTitle == "Create routes" %} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/conditional-content", + previousPage: "Change the content within a page based on a user's answers", + nextUrl: "/how-tos/interactive-prototypes/branching-journeys-radios", + nextPage: "Branching using radios" +}) }} + +{# elif pageTitle == "Branching (show different pages based on a user's answers)" #} +{# pagination({ + previousUrl: "/how-tos/interactive-prototypes/create-routes", + previousPage: "Create routes", + nextUrl: "/how-tos/interactive-prototypes/branching-journeys-radios", + nextPage: "Branching using radios" +}) #} + +{% elif pageTitle == "Branching using radios" %} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/create-routes", + previousPage: "Create routes", + nextUrl: "/how-tos/interactive-prototypes/branching-journeys-checkboxes", + nextPage: "Branching using checkboxes" +}) }} + +{% else %} {# pageTitle == "Branching using checkboxes" #} +{{ pagination({ + previousUrl: "/how-tos/interactive-prototypes/branching-journeys-radios", + previousPage: "Branching using radios" +}) }} + +{% endif %} +You can create branches using any form fields, including checkboxes and radios. In this example we will use checkboxes.
+We will look at an example question to ask the user what food they eat. If the user:
+Sending users to different pages based on their answers is called branching.
+Create a page that has a form with checkboxes, using this code:
+<form class="form" action="/food-answer" method="post">
+
+{{'{{' | escape }} checkboxes({
+name: "food",
+values: data["food"],
+fieldset: {
+legend: {
+ text: "What types of food do you eat?",
+ isPageHeading: true,
+ classes: "nhsuk-fieldset__legend--l"
+}
+},
+hint: {
+text: "Select all that apply."
+},
+items: [
+{
+ value: "Meat",
+ text: "Meat"
+},
+{
+ value: "Milk or dairy",
+ text: "Milk or dairy"
+},
+{
+ value: "Bread or rice",
+ text: "Bread or rice"
+},
+{
+ value: "Fruit or vegetables",
+ text: "Fruit or vegetables"
+}
+
+]
+}) }}
+
+{{'{{ button({
+text: "Continue"
+}) }}' | escape }}
+
+</form>
+In the checkboxes component, the name is "food". The name is important - it is where the kit stores the answer to the question. Names cannot have spaces, so use hyphens instead and use lowercase for simplicity.
The button needs to be between the 2 form tags. Do not add an href to the button - this will turn it into a link and means it no longer submits the form.
We need some logic to decide when to send users to different pages. This kind of logic goes in a file called app/routes.js, which is written in JavaScript. Routes tell the kit what to do when the user goes to specific pages.
The route takes the answer the user gave to the question and either sends them to the next question or the ineligible page, depending on their answer.
+ + + +In the page's form tag, we have an action "/food-answer" and a method "post":
+<form class="form" action="/food-answer" method="post">
+The action is where the form data goes and the method is post because we are sending (posting) data.
This will make a post request to the path /food-answer, we will write a route to respond to that request.
We're going to write some logic to process the user's answer to the question.
+We will look at 2 example routes for checkboxes:
+In this first example we will check if the user selected the 'Meat' checkbox. We don't care if they selected any other checkboxes.
+In app/routes.js we need to add a route to process the answer from the form.
/app/routes.jsrouter.post('/food-answer', function(request, response) {
+
+var food = request.session.data['food']
+if (food.includes("Meat")){
+ response.redirect("/meat")
+} else {
+ response.redirect("/next-question")
+}
+})
+Let's look at what each line in the route does.
+ + +router.postThis route is for a post request - the same as the method we set on the form. We use a post request to send the kit new information (like the user's answer to the question).
'/food-answer'This is the path for the route - the same as the action we set on the form.
var food = request.session.data['food']To send users to different pages based on their answers, the kit stores all answers in a variable called request.session.data.
We need the answer to 'What do you export?', so we use the name we set on the component: food
We use var food = to copy request.session.data['food'] to a shorter variable. This makes it easier to type later on.
if (food.includes("Meat")){Answers to checkboxes are stored as lists (called 'arrays') in the kit.
+This code checks whether the array stored for food includes the answer 'Meat'. This is the same as the value we set on one of our checkboxes.
As long as the answer 'Meat' is selected, it does not matter if any other checkbox is also selected. We'll see how to check for a single answer in the 2nd example.
+ +response.redirect("/meat')Because the user's answer includes 'Meat', our response is to redirect them to /fruit - a page with specific questions about fruit.
} else {If the user's answer does not include 'Meat', we use else to set a different response.
response.redirect("/next-question")Our response is to redirect them to /next-question - skipping the page with specific questions about fruit.
Add this line at the top of routes.js:
const util = require('util')
+The util module lets you do some extra checks for the data. You can find read about util on the node.js website.
Then add this route:
+router.post('/food-answer', function(request, response) {
+
+var food = request.session.data['food']
+if (util.deepStrictEqual(food, ['Meat'])){
+ response.redirect("/meat')
+} else {
+ response.redirect("/next-question")
+}
+})
+This is all the same as our first example, but instead of food.includes we have:
util.deepStrictEqual(food, ['Meat'])
+This checks whether the array stored for food only has the answer 'Meat', and no other answer.
+We could also check for 2 specific answers:
+util.deepStrictEqual(food, ['Meat', 'Milk or dairy'])
+Note the order is the same as the checkboxes, that's important - checking ['Milk or dairy', 'Meat'] will not work.
You can create branches from any form fields, including checkboxes and radios. In this example we will use radios.
+Our example question will ask the user where they live. We're going to send them to an 'ineligible' page if they live in any country other than England.
+Sending users to different pages based on their answers is called branching.
+Create a page that has a form with radio buttons, using this code:
+<form class="form" action="/country-answer" method="post">
+
+{{"{{" | escape }} radios({
+name: "country",
+value: data['country'],
+fieldset: {
+legend: {
+ text: "Where do you live?",
+ isPageHeading: true,
+ classes: "nhsuk-fieldset__legend--l"
+}
+},
+items: [
+{
+ value: "England",
+ text: "England"
+},
+{
+ value: "Scotland",
+ text: "Scotland"
+},
+{
+ value: "Wales",
+ text: "Wales"
+},
+{
+ value: "Northern Ireland",
+ text: "Northern Ireland"
+}
+]
+}) }}
+
+{{'{{ button({
+text: "Continue"
+}) }}' | escape }}
+
+</form>
+In the radios component, the name is "country". The name is important - it is where the kit stores the answer to the question. Names cannot have spaces, so use hyphens instead and use lowercase for simplicity.
We need some logic to decide when to send users to different pages. This kind of logic goes in a file called app/routes.js, which is written in JavaScript. Routes tell the kit what to do when the user goes to specific pages.
The route takes the answer the user gave to the question and either sends them to the next question or the ineligible page, depending on their answer.
+ + + +<form class="form" action="/country-answer" method="post">
+The action is where the form data goes and the method is post because we are sending (posting) data.
This will make a post request to the path /country-answer, we will write a route to respond to that request.
We're going to write some logic to process the user's answer to the question.
+If the user lives in England, we'll send them to the next question. If they answer with anything else, we'll send them to the ineligible page.
+In app/routes.js we need to add a route to process the answer from the form.
app/routes.js.router.post('/country-answer', function(request, response) {
+
+var country = request.session.data['country']
+if (country == "England"){
+ response.redirect("/age")
+} else {
+ response.redirect("/ineligible-country")
+}
+})
+Let's look at what each line in the route does.
+ + +router.postThis route is for a post request - the same as the method we set on the form. We use a post request to send the kit new information (like the user's answer to the question).
'/country-answer'This is the path for the route - the same as the 'action' we set on the form.
+ +var country = request.session.data['country']To send users to different pages based on their answers, the kit stores all answers in a variable called request.session.data.
We need the answer to 'Where do you live?', so we use the name we set on the component: country
We use var country = to copy request.session.data['country'] to a shorter variable. This makes it easier to type later on.
if (country == "England"){This code checks whether the answer to country is 'England'. This is the same as the value we set on one of our radios.
Note the double = symbol for checking an answer. A single = makes a copy as we did above.
+ + +response.redirect("/next-question")Because the user's answer is 'England', our response is to redirect them to /next-question - as they are eligible to use the service.
} else {If the user's answer was not 'England', we use else to set a different response.
response.redirect("/ineligible-country")Our response is to redirect them to /ineligible-country - they are not eligible to continue in the service.
To change the content within a page based on a user's answers, you need to know how to pass data from page to page.
+ + +There are 2 ways to show content based on a user's answers. You can either send the user to different pages (called 'branching') or change the content within a page (called 'conditional' content).
+Branching is better when most of the content on the page is different.
+We can use if statements to show conditional content, in the format:
{{'{%' | escape }} if (condition) %}
+The content you want to appear
+{{'{%' | escape }} endif %}
+The content will only appear when your if statement is true.
For example, to show specific content when the user answers Scotland:
+{{'{%' | escape }} if (data['country'] == "Scotland") %}
+<div class="nhsuk-inset-text">
+ This service is also available in Gaelic.
+</div>
+{{'{%' | escape }} endif %}
+An example with conditional content when the answer is Scotland and different content for any other answer:
+{{'{%' | escape }} if (data['country'] == "Scotland") %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is also available in Gaelic.
+</div>
+
+{{'{%' | escape }} else %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is available in other languages.
+</div>
+
+{{'{%' | escape }} endif %}
+An example with conditional content when the answer is Scotland and different content for Wales:
+{{'{%' | escape }} if (data['country'] == "Scotland") %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is also available in Gaelic.
+</div>
+
+{{'{%' | escape }} elseif (data['country'] == "Wales") %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is also available in Welsh.
+</div>
+
+{{'{%' | escape }} endif %}
+An example with the same conditional content for the answer Scotland or Northern Ireland:
+{{'{%' | escape }} if (data['country'] == "Scotland" or data['country'] == "Northern Ireland") %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is also available in Gaelic and Irish.
+</div>
+
+{{'{%' | escape }} endif %}
+An example with conditional content when the answer for 'country' is Scotland and the answer for 'nationality' is French:
+{{'{%' | escape }} if (data['country'] == "Scotland" and data['nationality'] == "French") %}
+
+<div class="nhsuk-inset-text">
+<span class="nhsuk-u-visually-hidden">Information: </span>
+ This service is also available in Gaelic and French.
+</div>
+
+{{'{%' | escape }} endif %}
+An example where the 'country' is Scotland and the content is different based on the 'nationality':
+{{'{%' | escape }} if (data['country'] == "Scotland") %}
+
+<div class="nhsuk-inset-text">
+ <span class="nhsuk-u-visually-hidden">Information: </span>
+
+ {{'{%' | escape }} if (data['nationality'] == "Northern Irish") %}
+
+ This service is also available in Gaelic and Irish.
+
+ {{'{%' | escape }} elseif (data['nationality'] == "French") %}
+
+ This service is also available in Gaelic and French.
+
+ {{'{%' | escape }} endif %}
+
+</div>
+
+{{'{%' | escape }} endif %}
+You may want to make prototypes that are more complex than simple HTML files. For example, you may want to respond to input from a form and show different pages based on answers given by the user (also called branching).
+To do this you will need to create 'routes' - rules for the Prototype Kit to respond to certain web addresses (URLs), in the file app/routes.js
When you enter http://localhost:3000/start in a browser, the browser sends a request to the server - the Prototype Kit. The kit processes that request and sends a response.
The kit looks in the app/views folder for a file called start.html. It adds the NHS.UK header and footer, and sends the whole start page back as a response to the browser.
If the kit cannot find start.html in app/views, it will send an 'Error: not found' page instead.
You can control the response to any request by adding routes to the app/routes.js file. Routes are written in JavaScript.
This is an example of a route:
+router.post('/live-in-uk-answer', function(request, response) {
+
+var liveInUK = request.session.data['live-in-uk']
+if (liveInUK == "Yes"){
+ response.redirect("/next-question")
+} else {
+ response.redirect("/ineligible")
+}
+})
+In this example, the user was asked if they live in the UK, with 'Yes' and 'No' radio buttons to answer.
+This route sends the user to a different page depending on their answer.
+Let's look at each bit of this route code separately.
+ +router.postThe router handles all the requests. There are 2 ways a browser can make a request: 'get' and 'post'.
+This route will only run when the request is post, not get.
+ + +'/live-in-uk-answer'This is called the request path. On the question page, the form has an action with the same path.
function(request, response)This is our function (piece of code) to process the request. It has access to 2 variables (pieces of data):
+var liveInUK = request.session.data['live-in-uk']To send users to different pages based on their answers, the kit stores all answers in a variable called request.session.data.
We need the answer to 'Do you live in the UK?' ['live-in-uk']
We use var liveInUK = to copy request.session.data['live-in-uk'] to a shorter variable. This makes it easier to type later on.
if (liveInUK == "Yes"){This code checks whether the answer to 'Do you live in the UK' is 'Yes'.
+Note the double = symbol for checking an answer. A single = makes a copy as we did above.
+ + +response.redirect("/next-question")Because the user's answer is 'Yes', our response is to redirect them to /next-question - as they are eligible to use the service.
} else {If the user's answer was not 'Yes', we use else to set a different response.
response.redirect("/ineligible")Our response is to redirect them to /ineligible - they are not eligible to continue in the service.
Advanced documentation for routes.
+ + + +{% endblock %} \ No newline at end of file diff --git a/app/views/how-tos/interactive-prototypes/index.html b/app/views/how-tos/interactive-prototypes/index.html new file mode 100644 index 00000000..088fd39b --- /dev/null +++ b/app/views/how-tos/interactive-prototypes/index.html @@ -0,0 +1,42 @@ +{% set pageTitle = "Overview" %} +{% extends "how-tos/interactive-prototypes/_BASE.njk" %} +{% block hub %} + +The kit stores data from all answers that users give in a prototype. This lets you use or show the answers later.
+ ++ +
+If you do not know how data works in the kit: +
++There are different ways of using data to change your prototype: +
+You can also get a basic understanding of how to make prototypes interactive by using the build a basic prototype tutorial. +
' + + +})}} + +{% endblock %} \ No newline at end of file diff --git a/app/views/how-tos/interactive-prototypes/pass-data.html b/app/views/how-tos/interactive-prototypes/pass-data.html new file mode 100644 index 00000000..ef36ad59 --- /dev/null +++ b/app/views/how-tos/interactive-prototypes/pass-data.html @@ -0,0 +1,118 @@ +{% set pageTitle = "Pass data from page to page" %} +{% extends "how-tos/interactive-prototypes/_BASE.njk" %} +{% block hub %} + +The kit stores data from answers that users give in a prototype using the name attribute of the input.
For example, when a user enters their first name you could have this input:
+{{"{{ input({
+ name: 'first-name'
+}) }}" | escape }}
+You can show what the user entered later on like this:
+{{"
+ {{ data['first-name'] }}
+
" | escape }}
+Answers from checkboxes will appear with commas, like 'a,b,c'. To show them as a list, use a for loop:
+{{"
+{% for country in data['countries'] %}
+- {{ country }}
+{% endfor %}
+
" | escape }}
+If a user goes back to a page where they entered data, they would expect to see the answer they gave.
+Most inputs use the value option:
{{"{{ input({
+ name: 'first-name',
+ value: data['first-name']
+}) }}" | escape }}
+For checkboxes the option is values, since more than one can be selected.
You can show content if data is currently blank using or, for example:
{{"{{ data['first-name'] or 'First name not given' }}" | safe }}
+You can also use this in a component. For example to show that a user has not answered an optional question on Check your answers:
+{{"{{ summaryList({
+rows: [
+ {
+ key: {
+ text: 'First name'
+ },
+ value: {
+ text: data['first-name'] or 'First name not given'
+ }
+ }
+]
+})}}" | safe }}
+You can set default data in your prototype. This will appear without the user having to enter anything.
+For example, if you want to test a journey where the user returns to review or update their information.
+If the user changes this data in the prototype, their new answers are saved.
+Add default data to your app/data/session-data-defaults.js file.
For example, to set default data for the 'First name' and 'Over 18' inputs in the passing data example add:
+module.exports = {
+
+'first-name': 'Amina',
+'over-18': 'yes'
+
+}
+You can use links to set data. If you want to test different scenarios, you can have links to set data for each scenario.
+To set data from a link, add a ? to the href followed by the data you want to set:
<a href="/start?first-name=Amina">
+To clear data from a link, as above without the equals sign and the value:
+<a href="/start?first-name">
+To set more than one piece of data in a link, use an & between them:
<a href="/start?first-name=Amina&over-18=yes">
+To clear more than one piece of data in a link, as above without the equals sign and the value:
+<a href="/start?first-name&over-18">
+If the user changes this data in the prototype, their new answers will be saved.
+If you are using the HTML components instead of Nunjucks, you need to use the checked function for radios and checkboxes. For example:
<input class="nhsuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" {{ checked('waste','mines') }}>
+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']
+For complex data you can use nested values, for example:
+{{"{{ input({
+ name: 'claimant[first-name]'
+}) }}" | safe }}
+You can show what the user entered later on like this:
+{{"<p>
+ {{ data['claimant']['first-name'] }}
+</p>" | safe }}
+You can set the value in an input like this:
+{{"{{ input({
+ name: 'first-name',
+ value: data['claimant']['first-name']
+}) }}" | escape }}
+You can access the data on the server in a route function:
+var firstName = req.session.data['claimant']['first-name']
+To prevent an input being stored, use an underscore at the start of the name.
+{{"{{ input({
+ name: '_secret'
+}) }}" | escape }}
+When a user answers questions in your prototype, their answers are stored in session data.
+To clear session data, use the incognito mode or private browsing for each user and close that window when they're done.
+Create a route function in your app/routes.js file and refer to req.session.
For example, when submitting the following (simplified) HTML:
+<input name="first-name" value="Sarah">
+<input name="last-name" value="Philips">
+You'll have a req.session.data object in your route function:
{
+'first-name': 'Sarah',
+'last-name': 'Philips'
+}
+These 2 field values can be accessed in JavaScript as:
+req.session.data['first-name']
+req.session.data['last-name']
+Or in views as:
+{{"{{ data['first-name'] }}
+{{ data['last-name'] }}" | escape }}
+Session data can also be nested for easy grouping. For example answers from multiple family members:
+<input name="claimant[first-name]" value="Sarah">
+<input name="claimant[last-name]" value="Philips">
+
+<input name="partner[first-name]" value="Michael">
+<input name="partner[last-name]" value="Philips">
+You'll have a nested req.session.data object in your route function:
{
+claimant: {
+ 'first-name': 'Sarah',
+ 'last-name': 'Philips'
+},
+partner: {
+ 'first-name': 'Michael',
+ 'last-name': 'Philips'
+}
+}
+These 4 field values can be accessed in your route function as:
+req.session.data['claimant']['first-name']
+req.session.data['claimant']['last-name']
+req.session.data['partner']['first-name']
+req.session.data['partner']['last-name']
+Or in views as:
+{{"{{ data['claimant']['first-name'] }}
+{{ data['claimant']['last-name'] }}
+{{ data['partner']['first-name'] }}
+{{ data['partner']['last-name'] }}" | escape }}
+You may want to use or display data a user has entered over a few screens.
- -The prototype kit 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.
- - - -The code for the example can be found in:
- -docs/views/examples/passing-dataThe 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>{{ data['first-name'] }}</p>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 name="know-nhs-number" type="radio" value="Yes" {{ checked("know-nhs-number", "Yes") }}>To clear the data (for example, at the end of a user research session) click the "Clear data" link in the footer.
- - -Example using the "checked" function in a checkbox component macro:
- -{{ 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")
- }
- ]
-}) }}