Report components Interactive Filters
Contents
<div class='dpr-interactive-filters-section'>
<div class='dpr-selected-filters-container'>
<div class='dpr-selected-filters'>
<h2 id="dpr-selected-filters-label" class="govuk-heading-s govuk-!-margin-bottom-2">Selected filters</h2>
<div id="dpr-selected-filters" aria-labelledby="dpr-selected-filters-label">
<div class="dpr-applied-filters" data-dpr-module="dpr-applied-filters">
<button type="button" aria-label="Remove Radio filter filter" class="dpr-clear-button-styles govuk-body dpr-selected-filter" data-reset='{"keys":["filters.field1"]}'>
<strong class="dpr-selected-filter__name">
Radio filter
</strong>
: two
</button>
<button type="button" aria-label="Remove Multiselect filter" class="dpr-clear-button-styles govuk-body dpr-selected-filter" data-reset='{"keys":["filters.multiselect"]}'>
<strong class="dpr-selected-filter__name">
Multiselect
</strong>
: Value 8.2, Value 8.3
</button>
</div>
</div>
</div>
</div>
<div class='dpr-interactive-save-defaults-actions'>
<form method='post' action='./report/reset-filters'>
<input type="hidden" name="_csrf" value="">
<button type="submit" class="govuk-button dpr-clear-button-styles govuk-link govuk-link--no-visited-state govuk-!-margin-bottom-1 govuk-!-margin-top-1" data-module="govuk-button">
Reset filters
</button>
</form>
<div class="dpr-save-defaults-action">
<button type="submit" class="govuk-button dpr-clear-button-styles govuk-link govuk-link--no-visited-state govuk-!-margin-bottom-2 govuk-!-margin-right-2" data-module="govuk-button" formaction="./report/save-defaults" form="dpr-interactive-filters-form">
Save current filter values as defaults
</button>
</div>
</div>
<div class="dpr-interactive-filters-accordion">
<details class="govuk-details" id="dpr-interactive-filters-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Show filters
</span>
</summary>
<div class="govuk-details__text">
<div class='dpr-interactive-filters'>
<div class="dpr-filters sync-filters-form--hidden">
<form id="dpr-interactive-filters-form" method="POST" action="./report/apply-filters" novalidate>
<input type="hidden" name="_csrf" value="">
<div class="filter-form-container">
<div class="filter-container">
<div id="dpr_filter-wrapper_filters.field1" class="dpr-filter-item">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="filters.field1-hint">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Radio filter
</legend>
<div id="filters.field1-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-radios govuk-radios--small" display-name="Radio filter" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1" name="filters.field1" type="radio" value="one">
<label class="govuk-label govuk-radios__label" for="filters.field1">
One
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1-2" name="filters.field1" type="radio" value="two" checked>
<label class="govuk-label govuk-radios__label" for="filters.field1-2">
Two
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="dpr_filter-wrapper_filters.select" class="dpr-filter-item">
<div class="govuk-form-group">
<label class="govuk-label govuk-label govuk-!-font-weight-bold" for="filters.select">
Select filter
</label>
<div id="filters.select-hint" class="govuk-hint">
(Optional)
</div>
<select class="govuk-select" id="filters.select" name="filters.select" aria-describedby="filters.select-hint" display-name="Select filter">
<option value="" selected disabled>Select your option</option>
<option value="no-filter">None</option>
<option value="value2.1">Value 2.1</option>
<option value="value2.2">Value 2.2</option>
<option value="value2.3">Value 2.3</option>
</select>
</div>
</div>
<div id="dpr_filter-wrapper_filters.autocomplete" class="dpr-filter-item">
<div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="filters.autocomplete">
Autocomplete
</label>
<div id="filters.autocomplete-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-input__wrapper">
<input class="govuk-input autocomplete-text-input-box govuk-input--width-20" id="filters.autocomplete" name="filters.autocomplete" type="search" aria-describedby="filters.autocomplete-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="filtersautocomplete-list" haspopup="true" data-minimum-length="3" data-resource-endpoint="" placeholder="Search" role="combobox" pattern=".+" display-name="Autocomplete" data-static-option-name-value="">
<div class="govuk-input__suffix" aria-hidden="true">🔍</div>
</div>
</div>
<div id="filtersautocomplete-list" class="autocomplete-text-input-list">
<ul role="listbox" aria-label="Autocomplete options">
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Fezzick">
Fezzick
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="inigo-montoya">
Inigo Montoya
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Prince Humperdink">
Prince Humperdink
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="PrBu">
Princess Buttercup
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Westley">
Westley
</button>
</li>
</ul>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.multiselect" class="dpr-filter-item">
<div class="multiselect-container govuk-!-margin-bottom-6" data-dpr-module="multiselect-input" data-filter-id="filters.multiselect">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Multiselect
</legend>
<div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multiselect" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value8.1">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
Value 8.1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value8.2" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
Value 8.2
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value8.3" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
Value 8.3
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value8.4">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
Value 8.4
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.daterange" class="dpr-filter-item">
<div class="govuk-form-group">
<div class="dpr-date-range" data-dpr-module="date-range-input">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Daterange
</legend>
<div id='dpr-date-range' data-field-name='daterange'>
<div class="dpr-daterange__start-end-date-wrapper">
<div class="dpr-daterange__start-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Daterange start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.start">
From
</label>
<div id="filters.daterange.start-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.start" name="filters.daterange.start" type="text" value="01/02/2003" aria-describedby="filters.daterange.start-hint" autocomplete="off">
</div>
</div>
<div class="daterange-set-to-minmax__container">
<a class="govuk-body-s daterange-set-to-minmax" id="daterange-min-helper" data-set-to-input='filters.daterange.start' data-set-min-max-value=01/02/2003 data-set-min-max-trigger='true' href="#">
Set value to minimum date: 01/02/2003
</a>
</div>
</div>
</div>
<div class="dpr-daterange__end-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Daterange end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.end">
To
</label>
<div id="filters.daterange.end-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.end" name="filters.daterange.end" type="text" value="04/05/2006" aria-describedby="filters.daterange.end-hint" autocomplete="off">
</div>
</div>
<div class="daterange-set-to-minmax__container">
<a class="govuk-body-s daterange-set-to-minmax" id="daterange-max-helper" data-set-to-input='filters.daterange.end' data-set-min-max-value=04/05/2007 data-set-min-max-trigger='true' href="#">
Set value to maximum date: 04/05/2007
</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.text" class="dpr-filter-item">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold" for="filters.text">
Text
</label>
<input class="govuk-input govuk-input--width-20" id="filters.text" name="filters.text" type="text" pattern=".+" required="true" display-name="Text">
</div>
</div>
</div>
<div class="filter-actions">
<button type="submit" class="govuk-button govuk-button--primary" data-module="govuk-button">
Apply filters
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</details>
</div>
</div>
{% from "dpr/components/_filters/filters-interactive/view.njk" import dprInteractiveFilters %}
{% set appliedFilters = [
{
displayName: 'Radio filter',
displayValue: 'two',
reset: {
keys: [ "filters.field1" ]
}
},
{
displayName: 'Multiselect',
displayValue: 'Value 8.2, Value 8.3',
reset: {
keys: [ "filters.multiselect" ]
}
}
] %}
{% set templateArgs = {
reportType: "report",
validationErrors: [],
appliedFilters: appliedFilters,
hasDefaults: false,
saveDefaultsEnabled: true }
%}
{% set filters = [
{
text: "Radio filter",
name: 'field1',
id: "radio",
type: "Radio",
options: [
{ value: "one", text: "One" },
{ value: "two", text: "Two" }
],
value: "two"
},
{
text: 'Select filter',
name: 'select',
type: 'Select',
mandatory: false,
options: [
{ value: '', text: 'Select your option', disabled: true, selected: true },
{ disabled: false, text: 'None', value: 'no-filter'},
{value: 'value2.1', text: 'Value 2.1' },
{ value: 'value2.2',text: 'Value 2.2' },
{ value: 'value2.3', text: 'Value 2.3' }
]
},
{
text: 'Autocomplete',
name: 'autocomplete',
type: 'autocomplete',
mandatory: false,
minimumLength: 3,
options: [
{ value: 'Fezzick', text: 'Fezzick' },
{ value: 'inigo-montoya', text: 'Inigo Montoya' },
{ value: 'Prince Humperdink', text: 'Prince Humperdink' },
{ value: 'PrBu', text: 'Princess Buttercup' },
{ value: 'Westley', text: 'Westley' }
]
},
{
mandatory: false,
name: 'multiselect',
options: [
{ text: 'Value 8.1', value: 'value8.1' },
{ text: 'Value 8.2', value: 'value8.2' },
{ text: 'Value 8.3', value: 'value8.3' },
{ text: 'Value 8.4',value: 'value8.4' }
],
text: 'Multiselect',
type: 'multiselect',
value: 'value8.2,value8.3',
values: ['value8.2', 'value8.3']
},
{
text: 'Daterange',
name: 'daterange',
type: 'daterange',
value: {
start: '2003-02-01',
end: '2006-05-04'
},
min: '2003-02-01',
max: '2007-05-04'
},
{
text: 'Text',
name: 'text',
type: 'text',
value: null,
mandatory: true
}
] %}
{{ dprInteractiveFilters(filters, templateArgs) }}
Overview
The filters component is a collection of filter inputs, whose values contribute the query parameters of the URL.
- Updating a filter input will update the relevant query parameter in the URL.
- Clicking
Apply filterswill submit the URL by refreshing the URL. - Clicking
Reset filterswill restore the the input values to their defaults, and update the URL query params accordingly. - Selected filters are displayed and can be individually removed.
When to use
If you have simple filtering requirements (Radio, Select, Date range), then this component is a good way to reduce code complexity.
When not to use
If you have a requirement for more complex filter options, or options that are not supported by this component, then the MoJ filter component may be more suitable.
How to use
Basic filters
Contents
<div class='dpr-interactive-filters-section'>
<div class='dpr-selected-filters-container'>
<div class='dpr-selected-filters'>
<h2 id="dpr-selected-filters-label" class="govuk-heading-s govuk-!-margin-bottom-2">Selected filters</h2>
<div id="dpr-selected-filters" aria-labelledby="dpr-selected-filters-label">
<div class="dpr-applied-filters" data-dpr-module="dpr-applied-filters">
<button type="button" aria-label="Remove Radio filter filter" class="dpr-clear-button-styles govuk-body dpr-selected-filter" data-reset='{"keys":["filters.field1"]}'>
<strong class="dpr-selected-filter__name">
Radio filter
</strong>
: two
</button>
<button type="button" aria-label="Remove Multiselect filter" class="dpr-clear-button-styles govuk-body dpr-selected-filter" data-reset='{"keys":["filters.multiselect"]}'>
<strong class="dpr-selected-filter__name">
Multiselect
</strong>
: Value 8.2, Value 8.3
</button>
</div>
</div>
</div>
</div>
<div class='dpr-interactive-save-defaults-actions'>
<form method='post' action='./report/reset-filters'>
<input type="hidden" name="_csrf" value="">
<button type="submit" class="govuk-button dpr-clear-button-styles govuk-link govuk-link--no-visited-state govuk-!-margin-bottom-1 govuk-!-margin-top-1" data-module="govuk-button">
Reset filters
</button>
</form>
<div class="dpr-save-defaults-action">
<button type="submit" class="govuk-button dpr-clear-button-styles govuk-link govuk-link--no-visited-state govuk-!-margin-bottom-2 govuk-!-margin-right-2" data-module="govuk-button" formaction="./report/save-defaults" form="dpr-interactive-filters-form">
Save current filter values as defaults
</button>
</div>
</div>
<div class="dpr-interactive-filters-accordion">
<details class="govuk-details" id="dpr-interactive-filters-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Show filters
</span>
</summary>
<div class="govuk-details__text">
<div class='dpr-interactive-filters'>
<div class="dpr-filters sync-filters-form--hidden">
<form id="dpr-interactive-filters-form" method="POST" action="./report/apply-filters" novalidate>
<input type="hidden" name="_csrf" value="">
<div class="filter-form-container">
<div class="filter-container">
<div id="dpr_filter-wrapper_filters.field1" class="dpr-filter-item">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="filters.field1-hint">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Radio filter
</legend>
<div id="filters.field1-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-radios govuk-radios--small" display-name="Radio filter" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1" name="filters.field1" type="radio" value="one">
<label class="govuk-label govuk-radios__label" for="filters.field1">
One
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1-2" name="filters.field1" type="radio" value="two" checked>
<label class="govuk-label govuk-radios__label" for="filters.field1-2">
Two
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div id="dpr_filter-wrapper_filters.select" class="dpr-filter-item">
<div class="govuk-form-group">
<label class="govuk-label govuk-label govuk-!-font-weight-bold" for="filters.select">
Select filter
</label>
<div id="filters.select-hint" class="govuk-hint">
(Optional)
</div>
<select class="govuk-select" id="filters.select" name="filters.select" aria-describedby="filters.select-hint" display-name="Select filter">
<option value="" selected disabled>Select your option</option>
<option value="no-filter">None</option>
<option value="value2.1">Value 2.1</option>
<option value="value2.2">Value 2.2</option>
<option value="value2.3">Value 2.3</option>
</select>
</div>
</div>
<div id="dpr_filter-wrapper_filters.autocomplete" class="dpr-filter-item">
<div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="filters.autocomplete">
Autocomplete
</label>
<div id="filters.autocomplete-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-input__wrapper">
<input class="govuk-input autocomplete-text-input-box govuk-input--width-20" id="filters.autocomplete" name="filters.autocomplete" type="search" aria-describedby="filters.autocomplete-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="filtersautocomplete-list" haspopup="true" data-minimum-length="3" data-resource-endpoint="" placeholder="Search" role="combobox" pattern=".+" display-name="Autocomplete" data-static-option-name-value="">
<div class="govuk-input__suffix" aria-hidden="true">🔍</div>
</div>
</div>
<div id="filtersautocomplete-list" class="autocomplete-text-input-list">
<ul role="listbox" aria-label="Autocomplete options">
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Fezzick">
Fezzick
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="inigo-montoya">
Inigo Montoya
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Prince Humperdink">
Prince Humperdink
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="PrBu">
Princess Buttercup
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Westley">
Westley
</button>
</li>
</ul>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.multiselect" class="dpr-filter-item">
<div class="multiselect-container govuk-!-margin-bottom-6" data-dpr-module="multiselect-input" data-filter-id="filters.multiselect">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Multiselect
</legend>
<div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multiselect" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value8.1">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
Value 8.1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value8.2" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
Value 8.2
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value8.3" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
Value 8.3
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value8.4">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
Value 8.4
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.daterange" class="dpr-filter-item">
<div class="govuk-form-group">
<div class="dpr-date-range" data-dpr-module="date-range-input">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Daterange
</legend>
<div id='dpr-date-range' data-field-name='daterange'>
<div class="dpr-daterange__start-end-date-wrapper">
<div class="dpr-daterange__start-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Daterange start" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.start">
From
</label>
<div id="filters.daterange.start-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.start" name="filters.daterange.start" type="text" value="01/02/2003" aria-describedby="filters.daterange.start-hint" autocomplete="off">
</div>
</div>
<div class="daterange-set-to-minmax__container">
<a class="govuk-body-s daterange-set-to-minmax" id="daterange-min-helper" data-set-to-input='filters.daterange.start' data-set-min-max-value=01/02/2003 data-set-min-max-trigger='true' href="#">
Set value to minimum date: 01/02/2003
</a>
</div>
</div>
</div>
<div class="dpr-daterange__end-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Daterange end" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.end">
To
</label>
<div id="filters.daterange.end-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.end" name="filters.daterange.end" type="text" value="04/05/2006" aria-describedby="filters.daterange.end-hint" autocomplete="off">
</div>
</div>
<div class="daterange-set-to-minmax__container">
<a class="govuk-body-s daterange-set-to-minmax" id="daterange-max-helper" data-set-to-input='filters.daterange.end' data-set-min-max-value=04/05/2007 data-set-min-max-trigger='true' href="#">
Set value to maximum date: 04/05/2007
</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div id="dpr_filter-wrapper_filters.text" class="dpr-filter-item">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold" for="filters.text">
Text
</label>
<input class="govuk-input govuk-input--width-20" id="filters.text" name="filters.text" type="text" pattern=".+" required="true" display-name="Text">
</div>
</div>
</div>
<div class="filter-actions">
<button type="submit" class="govuk-button govuk-button--primary" data-module="govuk-button">
Apply filters
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</details>
</div>
</div>
{% from "dpr/components/_filters/filters-interactive/view.njk" import dprInteractiveFilters %}
{% set appliedFilters = [
{
displayName: 'Radio filter',
displayValue: 'two',
reset: {
keys: [ "filters.field1" ]
}
},
{
displayName: 'Multiselect',
displayValue: 'Value 8.2, Value 8.3',
reset: {
keys: [ "filters.multiselect" ]
}
}
] %}
{% set templateArgs = {
reportType: "report",
validationErrors: [],
appliedFilters: appliedFilters,
hasDefaults: false,
saveDefaultsEnabled: true }
%}
{% set filters = [
{
text: "Radio filter",
name: 'field1',
id: "radio",
type: "Radio",
options: [
{ value: "one", text: "One" },
{ value: "two", text: "Two" }
],
value: "two"
},
{
text: 'Select filter',
name: 'select',
type: 'Select',
mandatory: false,
options: [
{ value: '', text: 'Select your option', disabled: true, selected: true },
{ disabled: false, text: 'None', value: 'no-filter'},
{value: 'value2.1', text: 'Value 2.1' },
{ value: 'value2.2',text: 'Value 2.2' },
{ value: 'value2.3', text: 'Value 2.3' }
]
},
{
text: 'Autocomplete',
name: 'autocomplete',
type: 'autocomplete',
mandatory: false,
minimumLength: 3,
options: [
{ value: 'Fezzick', text: 'Fezzick' },
{ value: 'inigo-montoya', text: 'Inigo Montoya' },
{ value: 'Prince Humperdink', text: 'Prince Humperdink' },
{ value: 'PrBu', text: 'Princess Buttercup' },
{ value: 'Westley', text: 'Westley' }
]
},
{
mandatory: false,
name: 'multiselect',
options: [
{ text: 'Value 8.1', value: 'value8.1' },
{ text: 'Value 8.2', value: 'value8.2' },
{ text: 'Value 8.3', value: 'value8.3' },
{ text: 'Value 8.4',value: 'value8.4' }
],
text: 'Multiselect',
type: 'multiselect',
value: 'value8.2,value8.3',
values: ['value8.2', 'value8.3']
},
{
text: 'Daterange',
name: 'daterange',
type: 'daterange',
value: {
start: '2003-02-01',
end: '2006-05-04'
},
min: '2003-02-01',
max: '2007-05-04'
},
{
text: 'Text',
name: 'text',
type: 'text',
value: null,
mandatory: true
}
] %}
{{ dprInteractiveFilters(filters, templateArgs) }}