Closes #7604: Add filter modifier dropdowns for advanced lookup operators #919

New Issue

MrUnknownDE · 2026-04-05T18:49:47+02:00

MrUnknownDE commented

2026-04-05 18:49:47 +02:00

Originally created by @jnovinger on 11/4/2025

Closes: #7604

Implements dynamic filter modifier UI that allows users to select lookup operators (exact, contains, starts with, regex, negation, empty/not empty) directly in filter forms without manual URL parameter editing.

Supports filters for all scalar types and strings, as well as some related object filters. Explicitly does not support filters on fields that use APIWidget. That has been broken out in to follow up work.

How It Works

User selects "contains" ─────────────────┐
                                         │
                                         ▼
┌──────────────────────────────────────────────────────────┐
│  Filter Form (Browser)                                   │
│  ┌────────────────┐  ┌──────────────────────────┐        │
│  │ [Contains ▼]   │  │ Input: ABC               │        │
│  └────────────────┘  └──────────────────────────┘        │
│         │                                                │
│         │ TypeScript handler (filterModifiers.ts)        │
│         ▼                                                │
│  Updates input name: "serial" -> "serial__ic"            │
│  Updates URL param:  ?serial__ic=ABC                     │
└──────────────────────────────────────────────────────────┘
                         │
                         │ Form submission
                         ▼
┌──────────────────────────────────────────────────────────┐
│  Django Backend                                          │
│                                                          │
│  FilterModifierWidget                                    │
│    ↓ Renders modifier dropdown + original widget         │
│                                                          │
│  FilterModifierMixin                                     │
│    ↓ Enhances filterset fields with appropriate lookups  │
│                                                          │
│  FilterSet processes: serial__ic=ABC                     │
│    ↓ Django ORM: .filter(serial__icontains='ABC')        │
│                                                          │
│  Results + Filter Pills                                  │
│    ↓ "Serial: contains ABC [×]"                          │
└─────────────────────────────────���────────────────────────┘

Details

Backend: `FilterModifierWidget`

Wraps any Django form widget with a modifier dropdown. Key method:

def value_from_datadict(self, data, files, name):
    # Check all possible lookup variants (exact, ic, isw, n, etc.)
    for lookup_code, _ in self.lookups:
        param_name = f"{name}__{lookup_code}" if lookup_code != 'exact' else name
        if param_name in data:
            return data.get(param_name)

This allows the widget to find its value regardless of which lookup modifier is active in the URL.

Backend: `FilterModifierMixin`

Automatically enhances filterset form fields based on their type:

CharField -> exact, contains (ic), startswith (isw), endswith (iew), iexact (ie), negation (n), regex, iregex, empty
IntegerField -> exact, gte, lte, gt, lt, negation (n), empty
DecimalField -> exact, gte, lte, gt, lt, negation (n), empty
DateField -> exact, gte, lte, gt, lt, negation (n), empty
ChoiceField -> exact, negation (n), empty
MultipleChoiceField -> exact, negation (n), empty
ModelChoiceField -> exact, negation (n), empty
ColorField -> exact, negation (n), empty
TagFilterField -> exact, negation (n), empty

Frontend: `filterModifiers.ts`

Typescript handler that:

Detects modifier selection change
Updates the associated input's name attribute
Syncs URL parameters when navigating with existing filters

Filter Pills Enhancement

Modified applied_filters template tag to:

Detect lookup modifier in parameter name (serial__ic)
Display human-readable label ("contains") instead of raw lookup code
Maintain correct removal URL (preserves other filters)

Scope & Compatibility

What's changed:

All FilterForm subclasses now have modifier dropdowns
Filter pills show lookup type
URL parameters include lookup suffixes (__ic, __n, etc.)

What's NOT changed:

Existing URL parameters still work (backward compatible)
Django FilterSet behavior unchanged
No database schema changes
No API changes

*Originally created by @jnovinger on 11/4/2025* ### Closes: #7604 Implements dynamic filter modifier UI that allows users to select lookup operators (exact, contains, starts with, regex, negation, empty/not empty) directly in filter forms without manual URL parameter editing. Supports filters for all scalar types and strings, as well as some related object filters. Explicitly does not support filters on fields that use `APIWidget`. That has been broken out in to follow up work. #### How It Works ``` User selects "contains" ─────────────────┐ │ ▼ ┌──────────────────────────────────────────────────────────┐ │ Filter Form (Browser) │ │ ┌────────────────┐ ┌──────────────────────────┐ │ │ │ [Contains ▼] │ │ Input: ABC │ │ │ └────────────────┘ └──────────────────────────┘ │ │ │ │ │ │ TypeScript handler (filterModifiers.ts) │ │ ▼ │ │ Updates input name: "serial" -> "serial__ic" │ │ Updates URL param: ?serial__ic=ABC │ └──────────────────────────────────────────────────────────┘ │ │ Form submission ▼ ┌──────────────────────────────────────────────────────────┐ │ Django Backend │ │ │ │ FilterModifierWidget │ │ ↓ Renders modifier dropdown + original widget │ │ │ │ FilterModifierMixin │ │ ↓ Enhances filterset fields with appropriate lookups │ │ │ │ FilterSet processes: serial__ic=ABC │ │ ↓ Django ORM: .filter(serial__icontains='ABC') │ │ │ │ Results + Filter Pills │ │ ↓ "Serial: contains ABC [×]" │ └─────────────────────────────────��────────────────────────┘ ``` #### Details ##### Backend: `FilterModifierWidget` Wraps any Django form widget with a modifier dropdown. Key method: ```python def value_from_datadict(self, data, files, name): # Check all possible lookup variants (exact, ic, isw, n, etc.) for lookup_code, _ in self.lookups: param_name = f"{name}__{lookup_code}" if lookup_code != 'exact' else name if param_name in data: return data.get(param_name) ``` This allows the widget to find its value regardless of which lookup modifier is active in the URL. ##### Backend: `FilterModifierMixin` Automatically enhances filterset form fields based on their type: - **`CharField`** -> `exact`, `contains` (`ic`), `startswith` (`isw`), `endswith` (`iew`), `iexact` (`ie`), `negation` (`n`), `regex`, `iregex`, `empty` - **`IntegerField`** -> `exact`, `gte`, `lte`, `gt`, `lt`, `negation` (`n`), `empty` - **`DecimalField`** -> `exact`, `gte`, `lte`, `gt`, `lt`, `negation` (`n`), `empty` - **`DateField`** -> `exact`, `gte`, `lte`, `gt`, `lt`, `negation` (`n`), `empty` - **`ChoiceField`** -> `exact`, `negation` (`n`), `empty` - **`MultipleChoiceField`** -> `exact`, `negation` (`n`), `empty` - **`ModelChoiceField`** -> `exact`, `negation` (`n`), `empty` - **`ColorField`** -> `exact`, `negation` (`n`), `empty` - **`TagFilterField`** -> `exact`, `negation` (`n`), `empty` ##### Frontend: `filterModifiers.ts` Typescript handler that: 1. Detects modifier selection change 2. Updates the associated input's `name` attribute 3. Syncs URL parameters when navigating with existing filters ##### Filter Pills Enhancement Modified `applied_filters` template tag to: 1. Detect lookup modifier in parameter name (`serial__ic`) 2. Display human-readable label ("contains") instead of raw lookup code 3. Maintain correct removal URL (preserves other filters) #### Scope & Compatibility **What's changed:** - All `FilterForm` subclasses now have modifier dropdowns - Filter pills show lookup type - URL parameters include lookup suffixes (`__ic`, `__n`, etc.) **What's NOT changed:** - Existing URL parameters still work (backward compatible) - Django `FilterSet` behavior unchanged - No database schema changes - No API changes

MrUnknownDE closed this issue

2026-04-05 18:49:47 +02:00

Sign in to join this conversation.

Branches Tags

main

21455-sql-indexes-audit

21357-register-model-actions

feature

20924-plugin-ui-components

21766-improve-test-coverage-for-sortable-table-columns

21157-export-template-public-models

21025-pre-render-config-contexts

21364-swagger

feature-ip-prefix-link

20911-dropdown-3

fix_module_substitution

21160-filterset

20911-dropdown-2

20044-elevation-stuck-lightmode

7604-filter-modifiers-v3

20660-script-load

19724-graphql

14884-script

19720-macaddress-interface-generic-relation

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/netbox#919

Closes #7604: Add filter modifier dropdowns for advanced lookup operators #919