[{"data":1,"prerenderedAt":702},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Ffiltres-avances":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Ffiltres-avances":701},{"id":4,"title":5,"body":6,"description":687,"extension":688,"meta":689,"navigation":690,"path":697,"seo":698,"stem":699,"__hash__":700},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Ffiltres-avances.md","Champs de filtre personnalisés",{"type":7,"value":8,"toc":681},"minimark",[9,13,26,82,87,194,198,207,217,414,425,428,511,515,518,598,602,621,671,677],[10,11,5],"h1",{"id":12},"champs-de-filtre-personnalisés",[14,15,16,17,21,22,25],"p",{},"Le composant Vue ",[18,19,20],"code",{},"Filter"," du paquet ",[18,23,24],{},"@framework\u002Fui"," 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.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { Filter, serializeFilters, parseFilters } from \"@framework\u002Fui\u002FFilter\";\n","js","",[18,34,35],{"__ignoreMap":32},[36,37,40,44,48,52,55,58,60,63,66,69,72,76,79],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"s7zQu","import",[36,45,47],{"class":46},"sMK4o"," {",[36,49,51],{"class":50},"sTEyZ"," Filter",[36,53,54],{"class":46},",",[36,56,57],{"class":50}," serializeFilters",[36,59,54],{"class":46},[36,61,62],{"class":50}," parseFilters",[36,64,65],{"class":46}," }",[36,67,68],{"class":42}," from",[36,70,71],{"class":46}," \"",[36,73,75],{"class":74},"sfazB","@framework\u002Fui\u002FFilter",[36,77,78],{"class":46},"\"",[36,80,81],{"class":46},";\n",[83,84,86],"h2",{"id":85},"propriétés","Propriétés",[88,89,90,109],"table",{},[91,92,93],"thead",{},[94,95,96,100,103,106],"tr",{},[97,98,99],"th",{},"Propriété",[97,101,102],{},"Type",[97,104,105],{},"Défaut",[97,107,108],{},"Rôle",[110,111,112,131,149,176],"tbody",{},[94,113,114,120,125,128],{},[115,116,117],"td",{},[18,118,119],{},"doctype",[115,121,122],{},[18,123,124],{},"string",[115,126,127],{},"— (obligatoire)",[115,129,130],{},"DocType dont les métadonnées donnent les champs et les opérateurs.",[94,132,133,138,143,146],{},[115,134,135],{},[18,136,137],{},"fields",[115,139,140],{},[18,141,142],{},"(string | objet)[]",[115,144,145],{},"tous les champs filtrables",[115,147,148],{},"Champs proposés, dans cet ordre.",[94,150,151,156,165,169],{},[115,152,153],{},[18,154,155],{},"align",[115,157,158,161,162],{},[18,159,160],{},"\"start\""," ou ",[18,163,164],{},"\"end\"",[115,166,167],{},[18,168,164],{},[115,170,171,172,175],{},"Bord du bouton sur lequel le popover s'aligne. ",[18,173,174],{},"end"," convient à un bouton dans une barre d'outils à droite.",[94,177,178,183,188,191],{},[115,179,180],{},[18,181,182],{},"v-model",[115,184,185],{},[18,186,187],{},"FilterCondition[]",[115,189,190],{},"—",[115,192,193],{},"Conditions saisies.",[83,195,197],{"id":196},"choisir-les-champs-proposés","Choisir les champs proposés",[14,199,200,201,203,204,206],{},"Sans ",[18,202,137],{},", le composant propose tous les champs filtrables du DocType, y compris des champs internes. Avec ",[18,205,137],{},", vous choisissez la liste et l'ordre. Chaque entrée est :",[208,209,210,214],"ul",{},[211,212,213],"li",{},"une chaîne : le nom d'un champ du DocType ;",[211,215,216],{},"un objet : un champ que votre application traite elle-même, sans champ dans les métadonnées.",[27,218,222],{"className":219,"code":220,"language":221,"meta":32,"style":32},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFilter\n    v-model=\"filters\"\n    doctype=\"Sales Invoice\"\n    align=\"start\"\n    :fields=\"[\n        'customer',\n        'posting_date',\n        'status',\n        { fieldname: 'sales_partner_group', label: 'Groupe de partenaires', fieldtype: 'Link', options: 'Customer Group' },\n    ]\"\n\u002F>\n","vue",[18,223,224,233,251,266,281,296,311,323,335,400,408],{"__ignoreMap":32},[36,225,226,229],{"class":38,"line":39},[36,227,228],{"class":46},"\u003C",[36,230,232],{"class":231},"swJcz","Filter\n",[36,234,236,240,243,245,248],{"class":38,"line":235},2,[36,237,239],{"class":238},"spNyl","    v-model",[36,241,242],{"class":46},"=",[36,244,78],{"class":46},[36,246,247],{"class":50},"filters",[36,249,250],{"class":46},"\"\n",[36,252,254,257,259,261,264],{"class":38,"line":253},3,[36,255,256],{"class":238},"    doctype",[36,258,242],{"class":46},[36,260,78],{"class":46},[36,262,263],{"class":74},"Sales Invoice",[36,265,250],{"class":46},[36,267,269,272,274,276,279],{"class":38,"line":268},4,[36,270,271],{"class":50},"    align",[36,273,242],{"class":46},[36,275,78],{"class":46},[36,277,278],{"class":74},"start",[36,280,250],{"class":46},[36,282,284,287,289,291,293],{"class":38,"line":283},5,[36,285,286],{"class":46},"    :",[36,288,137],{"class":238},[36,290,242],{"class":46},[36,292,78],{"class":46},[36,294,295],{"class":50},"[\n",[36,297,299,302,305,308],{"class":38,"line":298},6,[36,300,301],{"class":46},"        '",[36,303,304],{"class":74},"customer",[36,306,307],{"class":46},"'",[36,309,310],{"class":46},",\n",[36,312,314,316,319,321],{"class":38,"line":313},7,[36,315,301],{"class":46},[36,317,318],{"class":74},"posting_date",[36,320,307],{"class":46},[36,322,310],{"class":46},[36,324,326,328,331,333],{"class":38,"line":325},8,[36,327,301],{"class":46},[36,329,330],{"class":74},"status",[36,332,307],{"class":46},[36,334,310],{"class":46},[36,336,338,341,344,347,350,353,355,357,360,362,364,367,369,371,374,376,378,381,383,385,388,390,392,395,397],{"class":38,"line":337},9,[36,339,340],{"class":46},"        {",[36,342,343],{"class":231}," fieldname",[36,345,346],{"class":46},":",[36,348,349],{"class":46}," '",[36,351,352],{"class":74},"sales_partner_group",[36,354,307],{"class":46},[36,356,54],{"class":46},[36,358,359],{"class":231}," label",[36,361,346],{"class":46},[36,363,349],{"class":46},[36,365,366],{"class":74},"Groupe de partenaires",[36,368,307],{"class":46},[36,370,54],{"class":46},[36,372,373],{"class":231}," fieldtype",[36,375,346],{"class":46},[36,377,349],{"class":46},[36,379,380],{"class":74},"Link",[36,382,307],{"class":46},[36,384,54],{"class":46},[36,386,387],{"class":231}," options",[36,389,346],{"class":46},[36,391,349],{"class":46},[36,393,394],{"class":74},"Customer Group",[36,396,307],{"class":46},[36,398,399],{"class":46}," },\n",[36,401,403,406],{"class":38,"line":402},10,[36,404,405],{"class":50},"    ]",[36,407,250],{"class":46},[36,409,411],{"class":38,"line":410},11,[36,412,413],{"class":50},"\u002F>\n",[14,415,416,417,419,420,424],{},"Exemple fictif : ",[18,418,352],{}," n'existe pas dans ",[421,422,423],"strong",{},"Facture de vente",". Votre application lit cette condition et la traduit elle-même avant la requête.",[14,426,427],{},"Un champ déclaré par objet contient :",[88,429,430,442],{},[91,431,432],{},[94,433,434,437,440],{},[97,435,436],{},"Clé",[97,438,439],{},"Obligatoire",[97,441,108],{},[110,443,444,457,469,491],{},[94,445,446,451,454],{},[115,447,448],{},[18,449,450],{},"fieldname",[115,452,453],{},"Oui",[115,455,456],{},"Identifiant du champ.",[94,458,459,464,466],{},[115,460,461],{},[18,462,463],{},"label",[115,465,453],{},[115,467,468],{},"Libellé dans la liste des champs.",[94,470,471,476,478],{},[115,472,473],{},[18,474,475],{},"fieldtype",[115,477,453],{},[115,479,480,481,483,484,483,487,490],{},"Type de champ : ",[18,482,380],{},", ",[18,485,486],{},"Data",[18,488,489],{},"Date","… Il détermine les opérateurs.",[94,492,493,498,501],{},[115,494,495],{},[18,496,497],{},"options",[115,499,500],{},"Non",[115,502,503,504,506,507,510],{},"DocType lié pour un champ ",[18,505,380],{},", options pour un champ ",[18,508,509],{},"Select",".",[83,512,514],{"id":513},"opérateur-et-valeur-initiaux","Opérateur et valeur initiaux",[14,516,517],{},"Quand l'utilisateur ajoute une condition, l'opérateur initial dépend du type de champ :",[88,519,520,533],{},[91,521,522],{},[94,523,524,527,530],{},[97,525,526],{},"Type de champ",[97,528,529],{},"Opérateur initial",[97,531,532],{},"Valeur initiale",[110,534,535,547,559,574,584],{},[94,536,537,541,544],{},[115,538,539],{},[18,540,509],{},[115,542,543],{},"égal à",[115,545,546],{},"première option",[94,548,549,553,556],{},[115,550,551],{},[18,552,380],{},[115,554,555],{},"égal à (le sélecteur d'enregistrement s'ouvre)",[115,557,558],{},"vide",[94,560,561,567,569],{},[115,562,563,566],{},[18,564,565],{},"Check",", nombres",[115,568,543],{},[115,570,571,572],{},"« Yes » pour ",[18,573,565],{},[94,575,576,579,582],{},[115,577,578],{},"Dates",[115,580,581],{},"entre",[115,583,558],{},[94,585,586,589,596],{},[115,587,588],{},"Autres",[115,590,591,592,595],{},"contient (",[18,593,594],{},"like",")",[115,597,558],{},[83,599,601],{"id":600},"convertir-les-conditions","Convertir les conditions",[14,603,604,605,607,608,611,612,483,615,483,617,620],{},"Le ",[18,606,182],{}," contient des conditions ",[18,609,610],{},"{ fieldname, operator, value }"," avec des opérateurs lisibles (",[18,613,614],{},"equals",[18,616,594],{},[18,618,619],{},"between","…). Pour une requête Frappe, convertissez-les :",[27,622,624],{"className":29,"code":623,"language":31,"meta":32,"style":32},"const wire = serializeFilters(filters.value);\n\u002F\u002F [[\"customer\", \"=\", \"Maison Verte\"], [\"posting_date\", \"between\", [\"2026-01-01\", \"2026-03-31\"]]]\nconst back = parseFilters(wire);\n",[18,625,626,649,655],{"__ignoreMap":32},[36,627,628,631,634,636,639,642,644,647],{"class":38,"line":39},[36,629,630],{"class":238},"const",[36,632,633],{"class":50}," wire ",[36,635,242],{"class":46},[36,637,57],{"class":638},"s2Zo4",[36,640,641],{"class":50},"(filters",[36,643,510],{"class":46},[36,645,646],{"class":50},"value)",[36,648,81],{"class":46},[36,650,651],{"class":38,"line":235},[36,652,654],{"class":653},"sHwdD","\u002F\u002F [[\"customer\", \"=\", \"Maison Verte\"], [\"posting_date\", \"between\", [\"2026-01-01\", \"2026-03-31\"]]]\n",[36,656,657,659,662,664,666,669],{"class":38,"line":253},[36,658,630],{"class":238},[36,660,661],{"class":50}," back ",[36,663,242],{"class":46},[36,665,62],{"class":638},[36,667,668],{"class":50},"(wire)",[36,670,81],{"class":46},[14,672,673,676],{},[18,674,675],{},"serializeFilters"," ignore les conditions sans valeur. Un champ choisi sans valeur ne filtre donc pas la liste.",[678,679,680],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":32,"searchDepth":39,"depth":235,"links":682},[683,684,685,686],{"id":85,"depth":235,"text":86},{"id":196,"depth":235,"text":197},{"id":513,"depth":235,"text":514},{"id":600,"depth":235,"text":601},"Choisir les champs proposés par le composant Vue Filter de @framework\u002Fui, aligner son popover et convertir ses conditions en filtres Frappe.","md",{"reviewed":690,"last_verified":691,"sources":692},true,"2026-11-03",[693,694,695,696],"dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFilter\u002Ftypes.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFilter\u002Findex.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFilter\u002Ffilters.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFilter\u002Foperators.ts","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Ffiltres-avances",{"title":5,"description":687},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Ffiltres-avances","3Ai16R4rBCg7OzpDtWhFDEpreyey-UOlWmglzp20Gvw",{},1793871738218]