View Source Custom Filter

Backpex ships with a set of default filters that can be used to filter the data. In addition to the default filters, you can create custom filters for more advanced use cases.

Creating a Custom Filter

You can create a custom filter by using the filter macro from the BackpexWeb module.. It automatically implements the Backpex.Filter behavior and defines some aliases and imports.

When creating a custom filter, you need to implement the following callbacks: query/3, render/1 and render_form/1. The query/3 function is used to filter the data based on the filter values. It receives the query, the attribute and the values of the filter and should return the filtered query. The render/1 function returns the markup that is used to display the filter on the index view. The render_form/1 function returns the markup that is used to render the filter form on the index view.

Here is an example of a custom select filter:

defmodule MyApp.Filters.CustomSelectFilter do
    use BackpexWeb, :filter

    @impl Backpex.Filter
    def label, do: "Event status"

    @impl Backpex.Filter
    def render(assigns) do
        assigns = assign(assigns, :label, option_value_to_label(options(), assigns.value))

        ~H"""
        <%= @label %>
        """
    end

    @impl Backpex.Filter
    def render_form(assigns) do
        ~H"""
        <.form_field
            type="select"
            selected={selected(@value)}
            options={my_options()}
            form={@form}
            field={@field}
            label=""
        />
        """
    end

    @impl Backpex.Filter
    def query(query, attribute, value) do
        where(query, [x], field(x, ^attribute) == ^value)
    end

    defp option_value_to_label(options, value) do
        Enum.find_value(options, fn {option_label, option_value} ->
        if option_value == value, do: option_label
        end)
    end

    defp my_options, do: [
        {"Select an option...", nil},
        {"Open", :open},
        {"Close", :close},
    ]

    defp selected(""), do: nil
    defp selected(value), do: value
end

In this example, we define a custom select filter that filters the data based on the event status. The query/3 function filters the data based on the selected value.

See Backpex.Filter for available callback functions.