Nunjucks filters
The GOV UK Prototype Kit and HMPPS UI applications based on the template both use Nunjucks as a templating language.
Nunjucks provides a number of built filters commonly used for formatting data. These are particularly useful for consistently displaying common data throughout a service. For example, displaying dates in a consistent format or displaying a person's name in a consistent way.
There are a large number of microservices across the HMPPS estate. Each microservice currently has its own set of Nunjucks filters, usually based on a copy of a previous service's filters. This means that there are a large number of duplicated filters across the estate. This is not ideal as it means that each service has to maintain its own set of filters, and it is difficult to ensure that the filters are consistent across the estate.
The HMPPS Design System Node.js package provides a common set of Nunjucks filters that can be used in any HMPPS service. This page lists the available filters and explains how to use them.
Using the filters
HMPPS UI applications based on the template have a `nunjucksSetup.ts` file that configures Nunjucks. Filters can be added in this file by adding the line `njkEnv.addFilter('nameOfFilter', nameOfFilter)` for each filter.
| Filter | Description |
|---|---|
| sentenceCase(word) | Capitalises the first letter of the first word and lowercases the remaining characters e.g. 'a Sentence' would become 'A sentence' |
| nameCase(name) | Capitalises the first letter of each name component including hyphenated names e.g. 'first LAST-lAst would become 'First Last-Last' |
| firstNameSpaceLastName(person: { firstName, lastName }) | Name cases the person's first name and last name with a space inbetween e.g. First Last |
| lastNameCommaFirstName(person: { firstName, lastName }) | Name cases the person's last name and first name with a comma inbetween e.g. Last, First |
| dayMonthYearForwardSlashSeparator(dateString) | UK formatted full date with padding zeroes e.g. 09/03/2023 |
| personProfileName(person: { firstName, lastName }) | The consistent way of displaying a person's name when displaying their profile or linking to it. Currently uses firstNameSpaceLastName |
| personDateOfBirth(dateOfBirth) | The consistent way of displaying a person's date of birth. Currently uses dayMonthYearForwardSlashSeparator |
| personStatus(status) | The consistent way of displaying a person's status e.g. Active in. Currently uses sentenceCase |
| hmppsFormatDate(dateString, format) | Formats a date in ISO format (yyyy-MM-dd) into the requested format |