Online Programme Filters Data Tag

The Filters data tag is used to indicate if an html element is to be displayed or not depending on the filters selected for the page. See Filters.

The Filters data tag is not normally hard coded into the page template.  Instead, the JSON produced for the page will supply a Filter property for each object in the JSON. The Filter property will contain the filters data tag for that object.

The filters data tag can then be inserted by using the {{Filter}} handlebars:

{{#each Entries}}
  <div {{Filter}}>
    <!-- Show entry details -->
  </div>
{{/each}}

Handlebars that will show each entry but allow the entries to be filterable

When the page is built, any {{Filters}} identifiers will be resolved into a filters data tag:

<div data-filters='Programme=Simple Programme|Date=20250804|EntryDefinition=InvitedSlot'>
  <!-- Filterable content goes here -->
</div>

A div with a resolved {{Filter}} tag showing the Programme, Date and EntryDefinition filters that apply to it

Any html element using the {{Filter}} handlebars will automatically be hidden whenever a filter is selected from filter toolbox that does not apply for that object.

When a div with a filters data tag is hidden, all html within the div is also hidden.

It is possible to group filters together. See Grouping.

Technical Details

The filters data tag contains a list of pipe delimited fiter key/value pairs.

Each filter in the toolbox is made up of a key/value pair

Example

EntryDefinition=InvitedSlot

When a filter is selected in the filters toolbox, each html element with the filters data tag is parsed and the following is checked for every filter key/value pair in the filters data tag

Match	Action
Key does not match	Display the html element*.
Key matches but Values does not match	Hide the html element.
Key matches and Value matches	Show the html element

Note

We choose to display if there is no match on keys because sometimes we have an element that has a limited set of filters on but the element will still need to be displayed. E.g. A Time Slot will have a Date=20191114 filter on it but it will not have an EntryDefinition=Break on it. So if Break is selected then all timeslots would be hidden even if they contain Entrys that have an Entry Definition=Break.

Examples

The following examples show what will happen if the filter of EntryDefinition=InvitedSlot has been selected:

<div data-filters='Organisation=48352'>
  <!-- Filterable content goes here -->
</div>

The div does not has a filter with Key of EntryDefinition so it will be displayed

<div data-filters='Programme=Simple Programme|Date=20250804|EntryDefinition=Break'>
  <!-- Filterable content goes here -->
</div>

The div has a filter with Key of EntryDefinition and value of Break and so it will be hidden

<div data-filters='Programme=Simple Programme|Date=20250804|EntryDefinition=InvitedSlot'>
  <!-- Filterable content goes here -->
</div>

The div has a filter with Key of EntryDefinition and value of Invited Slot and so it will be displayed

Related Articles

Filters