Filters help you narrow down and focus on the data that you're working with. To make it easier for you to narrow down what data you want, you can add an interactive filter as widget. This article can help you navigate end-to-end on how interactive filters as widgets can be configured and customised to filter data within a page or across all pages of the report.


Types of Interactive Filters as Widgets

There are 5 distinct types of interactive filters as widgets that you can choose from. They are as follows:

  1. List
    Select and unselect attributes from a list
    Attributes supported: Text, Number, Date, Date Range

  2. Dropdown
    A dropdown view to select and unselect attributes
    Attributes supported: Text, Searchable Text, Number, Date, Date Range

  3. Button
    An array of buttons that supports selection of attributes
    Attributes supported: Text, Number, Date, Date Range, Boolean

  4. Slider
    A bar that allows sliding with an option to select ranges as filter criteria
    Attributes supported: Number, Date

  5. Toggle
    An option to switch between any two boolean attributes
    Attributes supported: Boolean

Adding an Interactive Filter as Widget to a Report

It allows you to filter reports directly from the report dashboard by adding the interactive filters, just like other widgets.


Here's how: 

  1. Click on 'Add Widget' in the menu bar to the extreme right of the screen.

  2. Drag and drop the empty “Interactive Filter” widget onto the report canvas.

NOTE: You can only do this if you have atleast one or more chart widgets on the report canvas

  1. Click on 'Add Filter' link.

  2. Go to “Choose Filter” and select the attribute type

  3. Choose the type of filter depending on the options available


Summary of Filter Type Vs Attribute:

Filters type Vs Attribute

List

Dropdown

Button

Slider

Toggle

Text

Yes

Yes

Yes

-

-

Text (searchable)

-

Yes

-


-

Number

Yes

Yes

Yes 

Yes 

-

Date

Yes

Yes

Yes

Yes

-

Date Range

Yes

Yes

Yes


-

Boolean

-

-

-

-

Yes


  1. You can configure more controls under advanced options.

  • List and Dropdown filter for string attributes

    • Enable Search - Adds a search bar to search the filter values from within the widget.

    • Select one option at a time - Marking this allows you to choose only one option at a given time from the predefined list of options. Otherwise, you can select multiple options

  • Toggle filter for boolean attributes

    • Switch Toggle - Helps to switch between true or false condition of a boolean attribute

  • Others

    • Select Default Values - By selecting this, you can filter the values the report configures by default.


  1. You can also choose to apply the filter for the full report or to a certain page depending on your preference. You can configure the same on the top right of the screen.

  1. Once configured, the interactive filters as widgets will be available on your reports dashboard. To apply the filter, choose the value by which you want to filter the report and click on the apply button. 

  2. Similarly, if you want to remove the report from the report dashboard, click on the ‘three dots’ icon and select “Remove Widget”


Customise Interactive Filters as Widgets

For different interactive filters as widgets, there are different styling options for you to choose from. You can refer to the table below for more details on each:


Filter Type

Styling options

List

  1. General:
    A. Colour of Text-  Changes the colour of the text present

B. Colour of Selected Text - Changes the colour of the selected value 

C. Colour of Selected Background -Changes the background colour of the selected value



  1. Widget Header : 
    a. Widget Title Colour- Changes the font colour of the widget's title
    b. Show Widget Title - Displays the widget title when enabled and removes the widget title when disabled




  1. Widget Styling : 
    a. Opacity - Changes the transparency of the widget
    b. Background- Changes the background colour of the widget
    c. Border Color- Changes border colour of the widget

d. Border Position- Enables border on the specified edges
e. Border Radius-  Changes the border radius of the widget
f.  Border Weight- Changes the thickness of the border of the widget

g. Padding - Adds empty space inside the border

Dropdown

Same as List Filters

Button

  1. General:
    A. Outline Colour- Changes the outline colour of the button

B. Inactive Text Colour- Changes the font colour of the unselected button(s) 
C. Active background Colour - Changes the background colour of the selected buttons

D. Active text Colour - Changes the font colour of the selected button(s)

E. Inactive background colour- Changes the background colour of the unselected button(s)


  1. Widget Header : 
    a. Widget Title Colour- Changes the font colour of the widget's title
    b. Show Widget Title - Displays the widget title when enabled and removes the widget title when disabled


  1. Widget Styling: 
    a. Opacity - Changes the transparency of the widget
    b. Background- Changes the background colour of the widget
    c. Border Color- Changes border colour of the widget

d. Border Position- Enables border on the specified edges
e. Border Radius-  Changes the border radius of the widget
f.  Border Weight- Changes the thickness of the border of the widget

g. Padding - Adds empty space inside the border

Toggle

  1. General:
    A. Toggle ON colour-  Choose the colour of toggle when turned ON

B. Toggle OFF colour- Choose the colour of toggle when turned OFF


  1. Widget Header : 
    a. Widget Title Colour- Changes the font colour of the widget's title
    b. Show Widget Title - Displays the widget title when enabled and removes the widget title when disabled


  1. Widget Styling : 
    a. Opacity - Changes the transparency of the widget
    b. Background- Changes the background colour of the widget
    c. Border Color- Changes border colour of the widget

d. Border Position- Enables border on the specified edges
e. Border Radius-  Changes the border radius of the widget
f.  Border Weight- Changes the thickness of the border of the widget

g. Padding - Adds empty space inside the border

Slider

  1. General:
    a. Text Colour- Changes the font colour
    b. Slider Colour- Changes the slider's colour

c. Outline Colour- Changes the outline colour of the widget


  1. Widget Header : 
    a. Widget Title Colour- Changes the font colour of the widget's title
    b. Show Widget Title - Displays the widget title when enabled and removes the widget title when disabled


  1. Widget Styling : 
    a. Opacity - Changes the transparency of the widget
    b. Background- Changes the background colour of the widget
    c. Border Color- Changes border colour of the widget

d. Border Position- Enables border on the specified edges
e. Border Radius-  Changes the border radius of the widget
f.  Border Weight- Changes the thickness of the border of the widget

g. Padding - Adds empty space inside the border


NOTE: You can also convert a basic filter into ‘interactive filter as widget’ for date and string attributes. You can do so by clicking on “+” icon of the basic filter and selecting “Apply” 


Similar article: Quick Filters for Widgets


Take me to the Freshdesk, Freshservice, Freshsales, Freshcaller, Freshrelease and Freshteam support portals