Version de développement

Cette documentation décrit la version « next » (develop), non encore publiée. Pour la version stable, basculez sur « v5 » dans l'en-tête.

Composants UI

Champs de filtre personnalisés

Choisir les champs proposés par le composant Vue Filter de @framework/ui, aligner son popover et convertir ses conditions en filtres Frappe.

Champs de filtre personnalisés

Le composant Vue Filter du paquet @framework/ui affiche un bouton de filtre et un popover. L'utilisateur y construit des conditions sur les champs d'un DocType. Les champs et les opérateurs viennent des métadonnées du DocType.

import { Filter, serializeFilters, parseFilters } from "@framework/ui/Filter";

Propriétés

Propriété	Type	Défaut	Rôle
`doctype`	`string`	— (obligatoire)	DocType dont les métadonnées donnent les champs et les opérateurs.
`fields`	`(string \| objet)[]`	tous les champs filtrables	Champs proposés, dans cet ordre.
`align`	`"start"` ou `"end"`	`"end"`	Bord du bouton sur lequel le popover s'aligne. `end` convient à un bouton dans une barre d'outils à droite.
`v-model`	`FilterCondition[]`	—	Conditions saisies.

Choisir les champs proposés

Sans fields, le composant propose tous les champs filtrables du DocType, y compris des champs internes. Avec fields, vous choisissez la liste et l'ordre. Chaque entrée est :

une chaîne : le nom d'un champ du DocType ;
un objet : un champ que votre application traite elle-même, sans champ dans les métadonnées.

<Filter
    v-model="filters"
    doctype="Sales Invoice"
    align="start"
    :fields="[
        'customer',
        'posting_date',
        'status',
        { fieldname: 'sales_partner_group', label: 'Groupe de partenaires', fieldtype: 'Link', options: 'Customer Group' },
    ]"
/>

Exemple fictif : sales_partner_group n'existe pas dans Facture de vente. Votre application lit cette condition et la traduit elle-même avant la requête.

Un champ déclaré par objet contient :

Clé	Obligatoire	Rôle
`fieldname`	Oui	Identifiant du champ.
`label`	Oui	Libellé dans la liste des champs.
`fieldtype`	Oui	Type de champ : `Link`, `Data`, `Date`… Il détermine les opérateurs.
`options`	Non	DocType lié pour un champ `Link`, options pour un champ `Select`.

Opérateur et valeur initiaux

Quand l'utilisateur ajoute une condition, l'opérateur initial dépend du type de champ :

Type de champ	Opérateur initial	Valeur initiale
`Select`	égal à	première option
`Link`	égal à (le sélecteur d'enregistrement s'ouvre)	vide
`Check`, nombres	égal à	« Yes » pour `Check`
Dates	entre	vide
Autres	contient (`like`)	vide

Convertir les conditions

Le v-model contient des conditions { fieldname, operator, value } avec des opérateurs lisibles (equals, like, between…). Pour une requête Frappe, convertissez-les :

const wire = serializeFilters(filters.value);
// [["customer", "=", "Maison Verte"], ["posting_date", "between", ["2026-01-01", "2026-03-31"]]]
const back = parseFilters(wire);

serializeFilters ignore les conditions sans valeur. Un champ choisi sans valeur ne filtre donc pas la liste.