From f48d9085c1485f92e2d7328f9bb8dfec32b65b7c Mon Sep 17 00:00:00 2001 From: vickytnz Date: Mon, 2 Dec 2024 23:05:06 +0000 Subject: [PATCH 01/12] Added filters page and link from how-tos Filters page that: - adapts the govuk prototype kit guidance for using or making filters https://prototype-kit.service.gov.uk/docs/filters and adapts to an earlier version of the kit (particularly for formatting html in filters) - includes the guidance for dates using xgovuk filters https://prototype-kit.service.gov.uk/docs/date-filters by merging it into the same page I have tried running this all locally and it seems to work --- app/views/how-tos/filters.html | 135 +++++++++++++++++++++++++++++++++ app/views/how-tos/index.html | 2 + 2 files changed, 137 insertions(+) create mode 100644 app/views/how-tos/filters.html diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html new file mode 100644 index 0000000..dd28614 --- /dev/null +++ b/app/views/how-tos/filters.html @@ -0,0 +1,135 @@ +{% extends "layout.html" %} + +{% block pageTitle %} +Use filters to change how answers appear - NHS prototype kit +{% endblock %} + +{% block beforeContent %} + {% include "how-tos/includes/breadcrumb.html" %} +{% endblock %} + +{% block content %} + +
+
+

Use filters to change how answers appear

+ + {{ insetText({ html: ' +

+ To use filters, you need to know how to + pass data from page to page. +

+ ' })}} + +

+ The kit stores data from all answers that users give in a prototype, so + that you can use or show the answers later. To change the format of how + these answers appear, you can apply filters. You can:

+ +
    +
  • use existing Nunjucks filters
    • +
  • create a Nunjucks filter
    • +
  • import filters from other projects
    • +
+

Use existing Nunjucks filters

+

+ You can + use existing Nunjucks filters + in the kit. For example, you can use the Nunjucks + upper filter to change the format of text to upper case: +

+ + 
{{ data['name'] | upper }}
+ +

Create a Nunjucks filter

+

+ Add your own filters to the filters.js file. Filters are + written in JavaScript. +

+ 
module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */
+  const filters = {};
+
+  filters.uppercase = function(content) {
+    return content.toUpperCase()
+  }
+  return filters;
+};
+
+

Then use it on a page like this:

+ 
{{ data['name'] | uppercase }}
+ +

Use HTML in a Nunjucks filter

+

If you want to use HTML in a filter, write the filter:

+ 
{{ " filters.bold = function (content) {
+  return '' + content + '';
+  // remember to use 'safe' after to get the HTML formatting
+}" | escape }}
+

Then use it on a page with the extra filter safe:

+ 
{{"{{ data['name'] | bold | safe }}" | escape }}
+

+ Safe makes the filter format the HTML and not just show the code + {{"" | escape }}. +

+ +

You can also use these filters together:

+ 
{{"{{ data['name'] | upper |  bold | safe }}" | escape }}
+ +

Import filters from other projects

+

+ You can import filters from other projects like the x-govuk Prototype Filters + project. If you want to do this, you will need to install it first - follow the instructions for 'Using with earlier versions of the Prototype Kit'. +

+ +

For example, you can use existing x-govuk date filters to add dates that will change in your prototype.

+

To show today's date when a user submits their application:

+
You submitted your application on {{'{{ "today" | govukDate }}' | safe }} .
+
+

To display a time:

+
You signed into your account at {{'{{ "now" | govukTime }}' | escape }}.
+
+

Change the format of a date

+

You can change how dates appear, so that you display the name of the month instead of a number.

+

To show the month 'March':

+
{{'{{ 3 | monthName }}' | escape }}
+
+

To shorten (or 'truncate') the month 'March' to 'Mar':

+
{{'{{ 3 | monthName("truncate") }}' | escape }}
+
+

Show how many days have passed

+

To show how long it's been since a user submitted their application:

+
{{"{% set dateSubmitted = '2023-09-18' %}"}}
+{{"
You submitted your application {{ dateSubmitted | daysAgo | plural('day') }} ago
" | escape }}
+
+

Show when a user is eligible

+

You can use filters to show when someone is eligible to use your service. For example, if they must be 18 to apply:

+
{{"{% set dateOfBirth = '2010-09-18' %}"}}
+{{"
You can apply for a juggling licence on {{ dateOfBirth | duration(18, 'years') | govukDate }}
" | escape }}
+
+
+
+{% endblock %} diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html index fb17a0a..fadd2db 100755 --- a/app/views/how-tos/index.html +++ b/app/views/how-tos/index.html @@ -91,6 +91,8 @@

General use

  • Using components
  • Passing data page to page
  • Branching – show a different page based on user input
    • +
  • Use filters to change how answers appear
    • +

    Share your prototype

    From 22dfdcc58255e1f58668af86c122bb2d1beb9149 Mon Sep 17 00:00:00 2001 From: vickytnz Date: Tue, 3 Dec 2024 09:36:04 +0000 Subject: [PATCH 02/12] tweaks to filters titles --- app/views/how-tos/filters.html | 16 +++++++++++----- app/views/how-tos/index.html | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html index dd28614..fc5260e 100644 --- a/app/views/how-tos/filters.html +++ b/app/views/how-tos/filters.html @@ -1,7 +1,7 @@ {% extends "layout.html" %} {% block pageTitle %} -Use filters to change how answers appear - NHS prototype kit +Filters - NHS prototype kit {% endblock %} {% block beforeContent %} @@ -12,7 +12,10 @@
    -

    Use filters to change how answers appear

    +

    Filters

    +

    + Change how answers and dates are shown. +

    {{ insetText({ html: '

    @@ -29,7 +32,7 @@

    Use filters to change how answers appear

    • use existing Nunjucks filters
    • create a Nunjucks filter
      • -
    • import filters from other projects
      • +
    • use filters from other projects

    Use existing Nunjucks filters

    @@ -89,14 +92,17 @@

    Use HTML in a Nunjucks filter

    class="app-pre" >{{"{{ data['name'] | upper | bold | safe }}" | escape }} -

    Import filters from other projects

    +

    Use filters from other projects

    You can import filters from other projects like the x-govuk Prototype Filters project. If you want to do this, you will need to install it first - follow the instructions for 'Using with earlier versions of the Prototype Kit'.

    For example, you can use existing x-govuk date filters to add dates that will change in your prototype.

    -

    To show today's date when a user submits their application:

    + +

    Show and format a date

    + +

    To show today's date when a user submits their application:

    You submitted your application on {{'{{ "today" | govukDate }}' | safe }} .
diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html
index fadd2db..1f1a994 100755
--- a/app/views/how-tos/index.html
+++ b/app/views/how-tos/index.html
@@ -91,7 +91,7 @@ 
    General use
    
         
  • Using components
    • 
         
  • Passing data page to page
    • 
         
  • Branching – show a different page based on user input
    • 
-        
  • Use filters to change how answers appear
    • 
+        
  • Filters - change how answers and dates are shown
    • 
 
       
 

From 1c57906dceb482288ff352bc52f86344986cbabe Mon Sep 17 00:00:00 2001
From: vickytnz 
Date: Tue, 3 Dec 2024 13:03:02 +0000
Subject: [PATCH 03/12] remove dates info for now

---
 app/views/how-tos/filters.html | 55 +++++++---------------------------
 app/views/how-tos/index.html   |  2 +-
 2 files changed, 12 insertions(+), 45 deletions(-)

diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html
index fc5260e..50b5613 100644
--- a/app/views/how-tos/filters.html
+++ b/app/views/how-tos/filters.html
@@ -14,7 +14,7 @@
   
    
     
    Filters
    
     
    
-      Change how answers and dates are shown.
+      Change how answers are shown.
       
    
 
     {{ insetText({ html: '
@@ -32,7 +32,7 @@ 
    Filters
    
     
      
       
    • use existing Nunjucks filters
      • 
       
    • create a Nunjucks filter
      • 
-      
    • use filters from other projects
      • 
+      
    • use filters from other projects (recommended for advanced users only)
      • 
     
    
     
    Use existing Nunjucks filters
    
     
    
@@ -92,50 +92,17 @@ 
    Use HTML in a Nunjucks filter
    
       class="app-pre"
     >{{"{{ data['name'] | upper |  bold | safe }}" | escape }}
    -

    Use filters from other projects

    +

    Use filters from other projects (recommended for advanced users only)

    - You can import filters from other projects like the x-govuk Prototype Filters - project. If you want to do this, you will need to install it first - follow the instructions for 'Using with earlier versions of the Prototype Kit'. + If you are confident with Javascript, you can install and import filters from other projects like the X-GOVUK Prototype Filters + project. +

    +

    You will need to change your filters.js file using the the instructions for 'Using with earlier versions of the Prototype Kit'.

    - -

    For example, you can use existing x-govuk date filters to add dates that will change in your prototype.

    - -

    Show and format a date

    - -

    To show today's date when a user submits their application:

    -
    You submitted your application on {{'{{ "today" | govukDate }}' | safe }} .
-
    -

    To display a time:

    -
    You signed into your account at {{'{{ "now" | govukTime }}' | escape }}.
-
    -

    Change the format of a date

    -

    You can change how dates appear, so that you display the name of the month instead of a number.

    -

    To show the month 'March':

    -
    {{'{{ 3 | monthName }}' | escape }}
-
    -

    To shorten (or 'truncate') the month 'March' to 'Mar':

    -
    {{'{{ 3 | monthName("truncate") }}' | escape }}
-
    -

    Show how many days have passed

    -

    To show how long it's been since a user submitted their application:

    -
    {{"{% set dateSubmitted = '2023-09-18' %}"}}
-{{"
    You submitted your application {{ dateSubmitted | daysAgo | plural('day') }} ago
    " | escape }}
-
    -

    Show when a user is eligible

    -

    You can use filters to show when someone is eligible to use your service. For example, if they must be 18 to apply:

    -
    {{"{% set dateOfBirth = '2010-09-18' %}"}}
-{{"
    You can apply for a juggling licence on {{ dateOfBirth | duration(18, 'years') | govukDate }}
    " | escape }}
-
    +

    + Go to the X-GOV.UK GOV.UK Prototype filters project +

    +
    {% endblock %} diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html index 1f1a994..2f6b21a 100755 --- a/app/views/how-tos/index.html +++ b/app/views/how-tos/index.html @@ -91,7 +91,7 @@

    General use

  • Using components
  • Passing data page to page
  • Branching – show a different page based on user input
    • -
  • Filters - change how answers and dates are shown
    • +
  • Filters - change how answers are shown
    • From 8ae18687becc10019e004caa6bda1a2e4373044c Mon Sep 17 00:00:00 2001 From: Vicky Teinaki Date: Tue, 3 Dec 2024 18:25:27 +0000 Subject: [PATCH 04/12] Update app/views/how-tos/filters.html Co-authored-by: Ed Horsford --- app/views/how-tos/filters.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html index 50b5613..1c0a13a 100644 --- a/app/views/how-tos/filters.html +++ b/app/views/how-tos/filters.html @@ -76,7 +76,7 @@

    Use HTML in a Nunjucks filter

    class="app-pre" >{{ " filters.bold = function (content) { return '' + content + ''; - // remember to use 'safe' after to get the HTML formatting + // remember to use the 'safe' filter afterwards to get the HTML formatting }" | escape }}

    Then use it on a page with the extra filter safe:

    Date: Tue, 3 Dec 2024 18:25:41 +0000
Subject: [PATCH 05/12] Update app/views/how-tos/filters.html

Co-authored-by: Ed Horsford 
---
 app/views/how-tos/filters.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html
index 1c0a13a..3eb6e30 100644
--- a/app/views/how-tos/filters.html
+++ b/app/views/how-tos/filters.html
@@ -90,7 +90,7 @@ 
    Use HTML in a Nunjucks filter
    
     
    You can also use these filters together:
    
     
    {{"{{ data['name'] | upper |  bold | safe }}" | escape }}
    
+    >{{ "{{ data['name'] | upper | bold | safe }}" | escape }}

    Use filters from other projects (recommended for advanced users only)

    From a0f0c20c81ab973fd94d3c651522ef07d37f21b5 Mon Sep 17 00:00:00 2001 From: vickytnz Date: Tue, 3 Dec 2024 18:39:47 +0000 Subject: [PATCH 06/12] fixed double 'the' --- app/views/how-tos/filters.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html index 3eb6e30..fc300ac 100644 --- a/app/views/how-tos/filters.html +++ b/app/views/how-tos/filters.html @@ -47,7 +47,7 @@

    Use existing Nunjucks filters

    {{ data['name'] | upper }}
    + >{{ "{{data['name'] | upper }}" | escape }}

    Create a Nunjucks filter

    @@ -97,7 +97,7 @@

    Use filters from other projects (recommended for adv If you are confident with Javascript, you can install and import filters from other projects like the X-GOVUK Prototype Filters project.

    -

    You will need to change your filters.js file using the the instructions for 'Using with earlier versions of the Prototype Kit'. +

    You will need to change your filters.js file using the instructions for 'Using with earlier versions of the Prototype Kit'.

    Go to the X-GOV.UK GOV.UK Prototype filters project From 6bb14cc808936d5aeb9002276d662f1554938d89 Mon Sep 17 00:00:00 2001 From: vickytnz Date: Tue, 3 Dec 2024 19:03:32 +0000 Subject: [PATCH 07/12] Fixed formatting and tweaked coding on safe --- app/views/how-tos/filters.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html index fc300ac..a35127e 100644 --- a/app/views/how-tos/filters.html +++ b/app/views/how-tos/filters.html @@ -59,7 +59,7 @@

    Create a Nunjucks filter

    >module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */ const filters = {}; - filters.uppercase = function(content) { + filters.uppercase = function (content) { return content.toUpperCase() } return filters; @@ -74,7 +74,7 @@

    Use HTML in a Nunjucks filter

    If you want to use HTML in a filter, write the filter:

    {{ " filters.bold = function (content) {
+    >{{"filters.bold = function (content) {
   return '' + content + '';
   // remember to use the 'safe' filter afterwards to get the HTML formatting
 }" | escape }}
    @@ -83,7 +83,7 @@

    Use HTML in a Nunjucks filter

    class="app-pre" >{{"{{ data['name'] | bold | safe }}" | escape }}

    - Safe makes the filter format the HTML and not just show the code + Using safe makes the text show with the HTML formatting and not just the code {{"" | escape }}.

    From b370bda4b29840088c5341501e1fd9bcce3ffdb5 Mon Sep 17 00:00:00 2001 From: vickytnz Date: Wed, 4 Dec 2024 18:56:42 +0000 Subject: [PATCH 08/12] staging version with filters code to sense check --- app/filters.js | 15 ++++++ app/views/how-tos/filters.html | 83 ++++++++++++++++++++++++++++------ 2 files changed, 83 insertions(+), 15 deletions(-) diff --git a/app/filters.js b/app/filters.js index 02dfbe7..211a813 100644 --- a/app/filters.js +++ b/app/filters.js @@ -1,5 +1,20 @@ module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */ const filters = {}; + filters.sentenceCase = function (input){ + // check the input + // blank: do not do anything + if (!input) return ''; + // not text: do not do anything + if (typeof input !== 'string') return input; + // is a string/text + // text: change first character to uppercase and put it back in the string + return input.charAt(0).toUpperCase() + input.slice(1); + }; + + filters.shorten = function(str, count) { + return str.slice(0, count || 5); +}; + return filters; }; diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html index a35127e..840e749 100644 --- a/app/views/how-tos/filters.html +++ b/app/views/how-tos/filters.html @@ -17,12 +17,10 @@

    Filters

    Change how answers are shown.

    - {{ insetText({ html: '

    To use filters, you need to know how to pass data from page to page.

    - ' })}}

    The kit stores data from all answers that users give in a prototype, so @@ -31,7 +29,7 @@

    Filters

    • use existing Nunjucks filters
      • -
    • create a Nunjucks filter
      • +
    • add a filter
    • use filters from other projects (recommended for advanced users only)

    Use existing Nunjucks filters

    @@ -49,27 +47,64 @@

    Use existing Nunjucks filters

    class="app-pre" >{{ "{{data['name'] | upper }}" | escape }} -

    Create a Nunjucks filter

    +

    Add a filter

    Add your own filters to the filters.js file. Filters are - written in JavaScript. + written in JavaScript.

    +

    Creating filters may need help from a developer, but if someone else has made one you can paste them in to your filters.js file.

    +

    For example this filter will let you change the first letter of an answer to upper case, for example from "a test" to "A test".

    + + +

    Add a filter

    +

    + Add your own filters to the filters.js file. Filters are + written in JavaScript. +

    +

    If someone else using the NHS prototype kit has made a filter, you can paste them in to your file.

    +

    For example this filter will let you change text to sentence case, for example from "a test" to "A test".

    + + 
    +filters.sentenceCase = function (input){
+  // check the input
+  // blank: do not do anything
+  if (!input) return ''; 
+   // not text: do not do anything
+  if (typeof input !== 'string') return input;
+  // is a string/text
+  // text: change first character to uppercase and put it back in the string
+  return input.charAt(0).toUpperCase() + input.slice(1); 
+};
    + +

    Go to filters.js and add it after const filters = {}; and before };

    + +

    Check that your file looks like this:

    + 
    module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */
   const filters = {};
 
-  filters.uppercase = function (content) {
-    return content.toUpperCase()
-  }
-  return filters;
-};
-
    + filters.sentenceCase = function (input){ + // check the input + // blank: do not do anything + if (!input) return ''; + // not text: do not do anything + if (typeof input !== 'string') return input; + // is a string/text + // text: change first character to uppercase and put it back in the string + return input.charAt(0).toUpperCase() + input.slice(1); + }; +};

    Then use it on a page like this:

    {{ data['name'] | uppercase }}
    + >{{ "{{ data['name'] | sentenceCase }}" | escape }} + +

    Use HTML in a Nunjucks filter

    If you want to use HTML in a filter, write the filter:

    Use HTML in a Nunjucks filter
 
     
    Use filters from other projects (recommended for advanced users only)
    
     
    
-      If you are confident with Javascript, you can install and import filters from other projects like the X-GOVUK Prototype Filters
-      project.
+      If you are confident with Javascript, you can get filters from other places. 
       
    
-      
    You will need to change your filters.js file using the instructions for 'Using with earlier versions of the Prototype Kit'.
+
+  
+         
    If your filters you are trying to use start with 'add Filter' (for example the Custom Filters in the Nunjucks documentation), you will need to change them to work in the NHS prototype kit.
+          
    
+          For example, if you have a filter like this:
    
+          
    env.addFilter('shorten', function(str, count) {
+          return str.slice(0, count || 5);
+      }); 
    
+       
+      
    change env.addFilter('shorten, function', to filters.shorten = function and remove ) at the end.
    
+      
    The code will then look like this:
    
+      
    filters.shorten = function(str, count) {
+      return str.slice(0, count || 5);
+  };
    
+
+      
    One project with a lot of tools is the XGOV-UK Prototype Filters plugin. If you want to use this plugin, you will need to change your filters.js file using the instructions for 'Using with earlier versions of the Prototype Kit'.
     
    
     
    
       Go to the X-GOV.UK GOV.UK Prototype filters project

From 6ef5774eeede1eb42ef9dee73c4e7e3510764509 Mon Sep 17 00:00:00 2001
From: vickytnz 
Date: Wed, 4 Dec 2024 18:57:07 +0000
Subject: [PATCH 09/12] remove custom filters

---
 app/filters.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/filters.js b/app/filters.js
index 211a813..02dfbe7 100644
--- a/app/filters.js
+++ b/app/filters.js
@@ -1,20 +1,5 @@
 module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */
   const filters = {};
 
-  filters.sentenceCase = function (input){
-    // check the input
-    // blank: do not do anything
-    if (!input) return ''; 
-     // not text: do not do anything
-    if (typeof input !== 'string') return input;
-    // is a string/text
-    // text: change first character to uppercase and put it back in the string
-    return input.charAt(0).toUpperCase() + input.slice(1); 
-  }; 
-
-  filters.shorten = function(str, count) {
-    return str.slice(0, count || 5);
-};
-
   return filters;
 };

From 10998a82b61b4a90361f940a9cc7b9a9fbdd34c6 Mon Sep 17 00:00:00 2001
From: vickytnz 
Date: Wed, 4 Dec 2024 19:10:35 +0000
Subject: [PATCH 10/12] change text display title

---
 app/views/how-tos/filters.html | 2 +-
 app/views/how-tos/index.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html
index 840e749..a85fa73 100644
--- a/app/views/how-tos/filters.html
+++ b/app/views/how-tos/filters.html
@@ -14,7 +14,7 @@
   
    
     
    Filters
    
     
    
-      Change how answers are shown.
+      Change how text is displayed.
       
    
 
     
    
diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html
index 2f6b21a..d3245f4 100755
--- a/app/views/how-tos/index.html
+++ b/app/views/how-tos/index.html
@@ -91,7 +91,7 @@ 
    General use
    
         
  • Using components
    • 
         
  • Passing data page to page
    • 
         
  • Branching – show a different page based on user input
    • 
-        
  • Filters - change how answers are shown
    • 
+        
  • Filters - change how text is displayed
    • 
 
       
 

From 5643a0892000b2b38f323d44bc3540503405c831 Mon Sep 17 00:00:00 2001
From: vickytnz 
Date: Wed, 4 Dec 2024 20:26:00 +0000
Subject: [PATCH 11/12] rewritten to correctly reference the existing file

---
 app/views/how-tos/filters.html | 66 +++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html
index a85fa73..9d34b79 100644
--- a/app/views/how-tos/filters.html
+++ b/app/views/how-tos/filters.html
@@ -52,15 +52,42 @@ 
    Add a filter
    
       Add your own filters to the filters.js file. Filters are
       written in JavaScript. 
     
    
-    
    Creating filters may need help from a developer, but if someone else has made one you can paste them in to your filters.js file.
    
-    
    For example this filter will let you change the first letter of an answer to upper case, for example from "a test" to "A test". 
    
+    
    Creating filters may need help from a developer, but if someone else has made one you can paste them in to your filters.js file. 
+      
+      
    
+      
    Use examples that are already in your filters.js file
    
+      
    
+      You can see some examples in the file.
    
+    
    For example, find and copy this code in your file:
+    
    
 
+    
    +filters.sayHi = function(name,tone) {
+      return (tone == 'formal' ? 'Greetings' : 'Hi') + ' ' + name + '!'
+    }
    
+
+
    Then find this line (usually line 39)
+  
    +------------------------------------------------------------------ */
    
+
+
    
+
+
    Then paste the code you just copied and save your changes. You will be able to the filter on on a page: 
    
+
+
    {{ "{{ 'Joel' | greetings('formal') }}" | escape }} 
    
+  
+  
+  
    It will show as 'Greetings, Joel!'. 
    
+
+
+  
    Use examples from other NHS prototypes
    
 
-    
    Add a filter
    
-    
    
-      Add your own filters to the filters.js file. Filters are
-      written in JavaScript. 
-    
    
     
    If someone else using the NHS prototype kit has made a filter, you can paste them in to your file.
    
     
    For example this filter will let you change text to sentence case, for example from "a test" to "A test". 
    
 
@@ -78,34 +105,15 @@ 
    Add a filter
    
   return input.charAt(0).toUpperCase() + input.slice(1); 
 };
    -

    Go to filters.js and add it after const filters = {}; and before };

    - -

    Check that your file looks like this:

    - 
    module.exports = function (env) { /* eslint-disable-line func-names,no-unused-vars */
-  const filters = {};
-
-  filters.sentenceCase = function (input){
-    // check the input
-    // blank: do not do anything
-    if (!input) return ''; 
-     // not text: do not do anything
-    if (typeof input !== 'string') return input;
-    // is a string/text
-    // text: change first character to uppercase and put it back in the string
-    return input.charAt(0).toUpperCase() + input.slice(1); 
-  }; 
-};
    -

    Then use it on a page like this:

    + +

    When you have added it to your filters.js file, you can use it on a page like this:

    {{ "{{ data['name'] | sentenceCase }}" | escape }}
    -

    Use HTML in a Nunjucks filter

    +

    Make a filter that uses HTML

    If you want to use HTML in a filter, write the filter:

    Date: Wed, 4 Dec 2024 20:31:05 +0000
Subject: [PATCH 12/12] Tweaked the examples to be easier to understand

---
 app/views/how-tos/filters.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/views/how-tos/filters.html b/app/views/how-tos/filters.html
index 9d34b79..1388e80 100644
--- a/app/views/how-tos/filters.html
+++ b/app/views/how-tos/filters.html
@@ -86,10 +86,9 @@ 
    Use examples that are already in your filters.js fil
   
    It will show as 'Greetings, Joel!'. 
    
 
 
-  
    Use examples from other NHS prototypes
    
+  
    Make a filter that changes some text to sentence case
    
 
-    
    If someone else using the NHS prototype kit has made a filter, you can paste them in to your file.
    
-    
    For example this filter will let you change text to sentence case, for example from "a test" to "A test". 
    
+    
    This filter will let you change text to sentence case, for example from "a test" to "A test".