+ Change how text is displayed. +
+ ++ 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:
+ +
+ 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 }}" | escape }}
+ 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. + +
++ 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!'.
+ + +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);
+};
+
+
+ When you have added it to your filters.js file, you can use it on a page like this:
+{{ "{{ data['name'] | sentenceCase }}" | escape }} If you want to use HTML in a filter, write the filter:
+{{"filters.bold = function (content) {
+ return '' + content + '';
+ // remember to use the 'safe' filter afterwards to get the HTML formatting
+}" | escape }} Then use it on a page with the extra filter safe:
{{"{{ data['name'] | bold | safe }}" | escape }}
+ Using safe makes the text show with the HTML formatting and not just the code
+ {{"" | escape }}.
+
You can also use these filters together:
+{{ "{{ data['name'] | upper | bold | safe }}" | escape }}+ If you are confident with Javascript, you can get filters from other places. +
+ + +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'.
+