1. What is an instafilter?

An instafilter allows users to filter a list of content on a panel page by keywords.

While it looks like a standard search bar, an instafilter can only match keywords in content the same page, and within the configured section of content (e.g. a list or table).

Use an instafilter when:

  • you have an large list of content that requires search functionality.

An instafilter shouldn't be used when:

  • you only have a small list of content
  • you need complex or customisable search functionality.
Top of page

2. How to create an instafilter

To enable this component, submit an IT request.

Once enabled, instafilters can be created by:

  • site builders.

To create a working instafilter, you'll need to:

  • add the instafilter component to a panel page
  • add a class around the content section to be filtered
  • add a class to each content item which can be filtered.

Step 1: adding the instafilter component

  1. On your panel page, click 'Customize this page' in the black Drupal menu at the bottom of the page, and then select the plus (+) icon in the blue box at the top of the page.
  2. From the left-hand menu, select 'UQ' > 'instaFilter Pane'.
  3. There are no required fields for instafilter panes. Complete as many optional fields as required.
  4. Click 'Finish'. Your instafilter will appear as a search bar.

Step 2: adding classes around the content section

Add the content to be filtered under the instafilter search bar – this might be a list or a table. For a filtered table:

  1. Click the plus (+) icon in the blue box at the top of the page.
  2. In the left-hand menu, select 'UQ' > 'Rich text'.
  3. Select the table icon from the WYSIWYG editor to add a table to your page.
  4. In the 'Table Properties' window, click the 'Advanced' tab.
  5. In the 'Stylesheet classes' field, enter 'instafilta-sections'
  6. Click 'OK' > 'Finish'.

Step 3: adding classes to content items

  1. In your rich text component, select 'Source' in the WYSIWYG editor.
  2. In each of your table rows (<tr>), add the 'instafilta-target' class. E.g. <tr class="instafilta-target">
  3. Select 'Source' again and click 'Finish'.
  4. In the black Drupal menu at the bottom of the page, click 'Save'.

After you finish creating your instafilter, you can add a section style to the panel to finalise the layout.

Top of page

3. How to edit an instafilter

Instafilters can be edited by:

  • site builders.

To edit an instafilter:

  1. Click 'Customize this page' in the black Drupal menu at the bottom of the page.
  2. Click the cog edit icon on the left-hand side of your rich text component.
  3. Edit your content as required. If you add a new row of content, make sure you add the instafilta-target class to that content item.
  4. Click 'Finish'.
  5. In the black Drupal menu at the bottom of the page, click 'Save'.
Top of page

4. Best practice

  • Keep your instafilter content as simple as possible.
  • Because your instafilter will filter results by row, make sure your table content is readable across the entire row.
Top of page

5. Fields

Complete all required fields and as many optional fields as possible to provide the best user experience.

Field name

Required field?

Function

Placeholder text

No

Creates a prompt which will be visible in the search bar (e.g "Enter your graduating year").

Scope

No

Restricts the search field to a section of the page. Used if there are multiple instafilters on the same page such as within tabs.

Targets

No

The class name attached to each item that you want to be filtered. The default option is .instafilta-target. This can be changed if the classes cannot be added to the content, such as in a vertical list.

Sections

No

The class name attached to each of the sections holding the items. The default option is .instafilta-sections. This can be changed if the classes cannot be added to the content, such as in a vertical list.

Top of page