Facet filters (configuration)

Facet filters can help you quickly and easily find information on potentially large data sets. They allow the portal member to select multiple field values from a grid to filter grid records by selected field values.

Facet filters must be pre-configured for the grid pages where you want to use them. Facet filters can be added as an element of a grid or dashboard layout block.

To add facet filters to a grid page

  1. In CMS, go to Contents.
  2. Select the content node, and then select a grid page for which you want to add facet filters.
  3. Select the icon of the selected node (the icon appears when you point to the node title).
  4. Select Layout block in the Create dialog window that appears, and then fill in the grid layout block settings.

    Tip

    If you want facet filters to be displayed next to the grid, ensure that you configure the width settings for the facet filters' layout block and the width settings for the grid so that they both fit the page. Otherwise, the layout block with facet filters will be shown below the grid.

  5. Select Save and publish to save the changes and publish the layout block.
  6. Select the icon, next to the created Layout block, and then select Facet filters.
  7. On the header, enter the name that will be used to identify the facet filters page in CMS.
  8. On the General tab, fill in general settings.
    • Title - Specifies the title of the facet filters pane that will be displayed on the grid page if specified. Specifying the title is optional.
    • Subtitle - Specifies the subtitle of the facet filters pane that will be displayed on the page if specified. Specifying the subtitle is optional.
    • Icon - Specifies the image that will be displayed in front of the title if specified. Adding an icon is optional. When choosing an icon, select any icon library set except umbraco-icon because icons from this icon library are not meant to be used with front end elements – this may cause bugs and visual glitches.
    • Width settings - Specifies the adaptive grid width settings for the facet filters pane per device. The width is automatically adjusted depending on the device the page is opened from. You don't need to configure this for the facet filters pane; instead, configure this for the layout block.

      Note

      For the facet filter to be displayed next to the grid, the widths of the grid and the layout block should be adjusted accordingly. Otherwise, the filter will appear under the grid.

    • Hide element - This setting hides the facet filters pane from the parent page. It can be configured per member group. Select one or several member groups, for which this facet filters pane will be hidden. Alternatively, you can select the ~All~ check box to hide it for all member groups (without the necessity to select every member group's check box) or select the Hide element check box to have all member groups selected at once.
    • Background color - Specifies the color that will be used as background of this facet filters pane.
    • Background image - Specifies the image that will be displayed in the background of this facet filters pane.
    • Description - Specifies a description of this facet filters pane.
    • Navigate-to page - Specifies the portal page that will be displayed when the portal member edits a record. For a facet filters pane, filling in this setting is not required.
    • Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a facet filters pane, filling in this setting is not required.
    • Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a facet filters pane, filling in this setting is not required.
  9. On the Settings tab, specify the settings for the filters pane as described below.
    • Type - Specifies the type of the view for the filters pane:
      • List - In this view, each field with its values, by which you can set filters, is shown on top of each other. In this case, other filter options will by ruled out in parallel field nodes as soon as you start to apply filters by selecting field values.
      • Tree - In this view, initially only one field is shown with its values, by which you can set filters, and all additional fields with their values are shown when you expand a field value. In this case, child filter options will be already filtered by the parent filter node.
    • Facets - Specifies the fields from the grid page data source, the values of which will be available as facet filters. Select the  icon to add a new field, and then fill in the settings as described below. Only add fields, the values of which you want to use as facet filters.
      • Title - Specifies the title of the field filter. Type the title that you to have displayed on the facet filters pane for the field. For example, you can type a field caption here.
      • Field - Specifies a field from the grid page data source, the values of which will be available as facet filters.
      • Show empty value facets - Specifies whether an empty field value will be available as a facet filter. When this setting is enabled, the member will be able to filter records by empty field value.
      • Sorting - Specifies how the facet filter values will be sorted on the facet filters pane.
  10. Select Save and publish to save the changes and publish them on the front end. Optionally, you can select Preview to preview how the page will look like in the front end.

Now you can use the added facet filters pane to filter the records of the parent grid by value of the selected fields.