[{"data":1,"prerenderedAt":840},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fmenus-deroulants-espresso":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fmenus-deroulants-espresso":839},{"id":4,"title":5,"body":6,"description":824,"extension":825,"meta":826,"navigation":828,"path":835,"seo":836,"stem":837,"__hash__":838},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fmenus-deroulants-espresso.md","Menus déroulants Espresso",{"type":7,"value":8,"toc":817},"minimark",[9,13,35,57,62,264,270,349,352,356,473,490,494,501,706,717,724,728,756,760,813],[10,11,5],"h1",{"id":12},"menus-déroulants-espresso",[14,15,16,17,25,26,30,31,34],"p",{},"Les menus de l'en-tête d'un formulaire ou d'une page utilisent le composant ",[18,19,21],"a",{"href":20},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-ui-espresso",[22,23,24],"code",{},"frappe.ui.Dropdown",". Cela concerne le menu ",[27,28,29],"strong",{},"•••",", le menu ",[27,32,33],{},"Actions"," et les groupes de boutons personnalisés (« Créer », « Vue »…).",[14,36,37,38,41,42,45,46,49,50,49,53,56],{},"Vous ajoutez les éléments avec les méthodes de la page (",[22,39,40],{},"frm.page"," ou ",[22,43,44],{},"page","). La page garde les éléments dans une liste HTML masquée. À chaque ouverture, le menu relit cette liste. Une modification d'un élément (",[22,47,48],{},".text()",", ",[22,51,52],{},".toggle()",[22,54,55],{},".addClass(\"disabled\")",") s'affiche donc à l'ouverture suivante.",[58,59,61],"h2",{"id":60},"ajouter-un-élément-au-menu","Ajouter un élément au menu •••",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","frappe.ui.form.on(\"Customer\", {\n    refresh(frm) {\n        frm.page.add_menu_item(__(\"Voir le relevé\"), () => {\n            frappe.set_route(\"query-report\", \"General Ledger\", { party: frm.doc.name });\n        });\n    },\n});\n","js","",[22,70,71,116,134,176,238,248,254],{"__ignoreMap":68},[72,73,76,80,84,87,89,92,94,98,101,104,108,110,113],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sTEyZ","frappe",[72,81,83],{"class":82},"sMK4o",".",[72,85,86],{"class":78},"ui",[72,88,83],{"class":82},[72,90,91],{"class":78},"form",[72,93,83],{"class":82},[72,95,97],{"class":96},"s2Zo4","on",[72,99,100],{"class":78},"(",[72,102,103],{"class":82},"\"",[72,105,107],{"class":106},"sfazB","Customer",[72,109,103],{"class":82},[72,111,112],{"class":82},",",[72,114,115],{"class":82}," {\n",[72,117,119,123,125,129,132],{"class":74,"line":118},2,[72,120,122],{"class":121},"swJcz","    refresh",[72,124,100],{"class":82},[72,126,128],{"class":127},"sHdIc","frm",[72,130,131],{"class":82},")",[72,133,115],{"class":82},[72,135,137,140,142,144,146,149,151,154,156,158,161,163,165,167,170,174],{"class":74,"line":136},3,[72,138,139],{"class":78},"        frm",[72,141,83],{"class":82},[72,143,44],{"class":78},[72,145,83],{"class":82},[72,147,148],{"class":96},"add_menu_item",[72,150,100],{"class":121},[72,152,153],{"class":96},"__",[72,155,100],{"class":121},[72,157,103],{"class":82},[72,159,160],{"class":106},"Voir le relevé",[72,162,103],{"class":82},[72,164,131],{"class":121},[72,166,112],{"class":82},[72,168,169],{"class":82}," ()",[72,171,173],{"class":172},"spNyl"," =>",[72,175,115],{"class":82},[72,177,179,182,184,187,189,191,194,196,198,201,204,206,208,211,214,217,220,222,225,227,230,233,235],{"class":74,"line":178},4,[72,180,181],{"class":78},"            frappe",[72,183,83],{"class":82},[72,185,186],{"class":96},"set_route",[72,188,100],{"class":121},[72,190,103],{"class":82},[72,192,193],{"class":106},"query-report",[72,195,103],{"class":82},[72,197,112],{"class":82},[72,199,200],{"class":82}," \"",[72,202,203],{"class":106},"General Ledger",[72,205,103],{"class":82},[72,207,112],{"class":82},[72,209,210],{"class":82}," {",[72,212,213],{"class":121}," party",[72,215,216],{"class":82},":",[72,218,219],{"class":78}," frm",[72,221,83],{"class":82},[72,223,224],{"class":78},"doc",[72,226,83],{"class":82},[72,228,229],{"class":78},"name",[72,231,232],{"class":82}," }",[72,234,131],{"class":121},[72,236,237],{"class":82},";\n",[72,239,241,244,246],{"class":74,"line":240},5,[72,242,243],{"class":82},"        }",[72,245,131],{"class":121},[72,247,237],{"class":82},[72,249,251],{"class":74,"line":250},6,[72,252,253],{"class":82},"    },\n",[72,255,257,260,262],{"class":74,"line":256},7,[72,258,259],{"class":82},"}",[72,261,131],{"class":78},[72,263,237],{"class":82},[14,265,266,267,83],{},"Signature : ",[22,268,269],{},"page.add_menu_item(label, click, standard, shortcut, show_parent)",[271,272,273,286],"table",{},[274,275,276],"thead",{},[277,278,279,283],"tr",{},[280,281,282],"th",{},"Paramètre",[280,284,285],{},"Rôle",[287,288,289,300,310,323,337],"tbody",{},[277,290,291,297],{},[292,293,294],"td",{},[22,295,296],{},"label",[292,298,299],{},"Libellé. Un libellé déjà présent n'est pas ajouté une deuxième fois.",[277,301,302,307],{},[292,303,304],{},[22,305,306],{},"click",[292,308,309],{},"Fonction appelée au clic.",[277,311,312,317],{},[292,313,314],{},[22,315,316],{},"standard",[292,318,319,322],{},[22,320,321],{},"true"," place l'élément avec les éléments standard. Sinon, il va dans la zone des actions de l'utilisateur, en haut.",[277,324,325,330],{},[292,326,327],{},[22,328,329],{},"shortcut",[292,331,332,333,336],{},"Raccourci clavier, par exemple ",[22,334,335],{},"\"Ctrl+B\"",". La page lie la touche et l'affiche dans le menu.",[277,338,339,344],{},[292,340,341],{},[22,342,343],{},"show_parent",[292,345,346,348],{},[22,347,321],{}," par défaut : affiche le bouton •••.",[14,350,351],{},"La méthode renvoie le lien jQuery de l'élément.",[58,353,355],{"id":354},"ajouter-un-élément-au-menu-actions","Ajouter un élément au menu Actions",[63,357,359],{"className":65,"code":358,"language":67,"meta":68,"style":68},"frm.page.add_actions_menu_item(__(\"Exporter en PDF\"), () => {\n    frappe.call({\n        method: \"mon_app.api.export_pdf\",\n        args: { name: frm.doc.name },\n    });\n});\n",[22,360,361,397,412,429,456,465],{"__ignoreMap":68},[72,362,363,365,367,369,371,374,376,378,380,382,385,387,389,391,393,395],{"class":74,"line":75},[72,364,128],{"class":78},[72,366,83],{"class":82},[72,368,44],{"class":78},[72,370,83],{"class":82},[72,372,373],{"class":96},"add_actions_menu_item",[72,375,100],{"class":78},[72,377,153],{"class":96},[72,379,100],{"class":78},[72,381,103],{"class":82},[72,383,384],{"class":106},"Exporter en PDF",[72,386,103],{"class":82},[72,388,131],{"class":78},[72,390,112],{"class":82},[72,392,169],{"class":82},[72,394,173],{"class":172},[72,396,115],{"class":82},[72,398,399,402,404,407,409],{"class":74,"line":118},[72,400,401],{"class":78},"    frappe",[72,403,83],{"class":82},[72,405,406],{"class":96},"call",[72,408,100],{"class":121},[72,410,411],{"class":82},"{\n",[72,413,414,417,419,421,424,426],{"class":74,"line":136},[72,415,416],{"class":121},"        method",[72,418,216],{"class":82},[72,420,200],{"class":82},[72,422,423],{"class":106},"mon_app.api.export_pdf",[72,425,103],{"class":82},[72,427,428],{"class":82},",\n",[72,430,431,434,436,438,441,443,445,447,449,451,453],{"class":74,"line":178},[72,432,433],{"class":121},"        args",[72,435,216],{"class":82},[72,437,210],{"class":82},[72,439,440],{"class":121}," name",[72,442,216],{"class":82},[72,444,219],{"class":78},[72,446,83],{"class":82},[72,448,224],{"class":78},[72,450,83],{"class":82},[72,452,229],{"class":78},[72,454,455],{"class":82}," },\n",[72,457,458,461,463],{"class":74,"line":240},[72,459,460],{"class":82},"    }",[72,462,131],{"class":121},[72,464,237],{"class":82},[72,466,467,469,471],{"class":74,"line":250},[72,468,259],{"class":82},[72,470,131],{"class":78},[72,472,237],{"class":82},[14,474,266,475,478,479,482,483,486,487,489],{},[22,476,477],{},"page.add_actions_menu_item(label, click, standard, shortcut, icon, theme)",". Passez ",[22,480,481],{},"theme: \"red\""," pour une action destructive. ",[22,484,485],{},"page.add_action_item(label, click, standard, icon)"," existe aussi. Exemple fictif : ",[22,488,423],{}," est une méthode de votre application.",[58,491,493],{"id":492},"créer-un-groupe-de-boutons","Créer un groupe de boutons",[14,495,496,497,500],{},"Passez le nom du groupe en troisième argument de ",[22,498,499],{},"frm.add_custom_button",". Les boutons d'un même groupe forment un menu déroulant.",[63,502,504],{"className":65,"code":503,"language":67,"meta":68,"style":68},"frappe.ui.form.on(\"Sales Order\", {\n    refresh(frm) {\n        if (frm.doc.docstatus !== 1) return;\n        frm.add_custom_button(__(\"Facture\"), () => creer_facture(frm), __(\"Créer\"));\n        frm.add_custom_button(__(\"Bon de livraison\"), () => creer_livraison(frm), __(\"Créer\"));\n    },\n});\n",[22,505,506,535,547,582,640,694,698],{"__ignoreMap":68},[72,507,508,510,512,514,516,518,520,522,524,526,529,531,533],{"class":74,"line":75},[72,509,79],{"class":78},[72,511,83],{"class":82},[72,513,86],{"class":78},[72,515,83],{"class":82},[72,517,91],{"class":78},[72,519,83],{"class":82},[72,521,97],{"class":96},[72,523,100],{"class":78},[72,525,103],{"class":82},[72,527,528],{"class":106},"Sales Order",[72,530,103],{"class":82},[72,532,112],{"class":82},[72,534,115],{"class":82},[72,536,537,539,541,543,545],{"class":74,"line":118},[72,538,122],{"class":121},[72,540,100],{"class":82},[72,542,128],{"class":127},[72,544,131],{"class":82},[72,546,115],{"class":82},[72,548,549,553,556,558,560,562,564,567,570,574,577,580],{"class":74,"line":136},[72,550,552],{"class":551},"s7zQu","        if",[72,554,555],{"class":121}," (",[72,557,128],{"class":78},[72,559,83],{"class":82},[72,561,224],{"class":78},[72,563,83],{"class":82},[72,565,566],{"class":78},"docstatus",[72,568,569],{"class":82}," !==",[72,571,573],{"class":572},"sbssI"," 1",[72,575,576],{"class":121},") ",[72,578,579],{"class":551},"return",[72,581,237],{"class":82},[72,583,584,586,588,591,593,595,597,599,602,604,606,608,610,612,615,617,619,621,623,626,628,630,633,635,638],{"class":74,"line":178},[72,585,139],{"class":78},[72,587,83],{"class":82},[72,589,590],{"class":96},"add_custom_button",[72,592,100],{"class":121},[72,594,153],{"class":96},[72,596,100],{"class":121},[72,598,103],{"class":82},[72,600,601],{"class":106},"Facture",[72,603,103],{"class":82},[72,605,131],{"class":121},[72,607,112],{"class":82},[72,609,169],{"class":82},[72,611,173],{"class":172},[72,613,614],{"class":96}," creer_facture",[72,616,100],{"class":121},[72,618,128],{"class":78},[72,620,131],{"class":121},[72,622,112],{"class":82},[72,624,625],{"class":96}," __",[72,627,100],{"class":121},[72,629,103],{"class":82},[72,631,632],{"class":106},"Créer",[72,634,103],{"class":82},[72,636,637],{"class":121},"))",[72,639,237],{"class":82},[72,641,642,644,646,648,650,652,654,656,659,661,663,665,667,669,672,674,676,678,680,682,684,686,688,690,692],{"class":74,"line":240},[72,643,139],{"class":78},[72,645,83],{"class":82},[72,647,590],{"class":96},[72,649,100],{"class":121},[72,651,153],{"class":96},[72,653,100],{"class":121},[72,655,103],{"class":82},[72,657,658],{"class":106},"Bon de livraison",[72,660,103],{"class":82},[72,662,131],{"class":121},[72,664,112],{"class":82},[72,666,169],{"class":82},[72,668,173],{"class":172},[72,670,671],{"class":96}," creer_livraison",[72,673,100],{"class":121},[72,675,128],{"class":78},[72,677,131],{"class":121},[72,679,112],{"class":82},[72,681,625],{"class":96},[72,683,100],{"class":121},[72,685,103],{"class":82},[72,687,632],{"class":106},[72,689,103],{"class":82},[72,691,637],{"class":121},[72,693,237],{"class":82},[72,695,696],{"class":74,"line":250},[72,697,253],{"class":82},[72,699,700,702,704],{"class":74,"line":256},[72,701,259],{"class":82},[72,703,131],{"class":78},[72,705,237],{"class":82},[14,707,708,709,712,713,716],{},"Pour retirer un bouton, appelez ",[22,710,711],{},"frm.remove_custom_button(label, group)",". ",[22,714,715],{},"frm.clear_custom_buttons()"," les retire tous.",[14,718,719,720,723],{},"Sur une page qui n'est pas un formulaire, ",[22,721,722],{},"page.add_inner_button(label, action, group)"," fait la même chose.",[58,725,727],{"id":726},"comportement-des-menus","Comportement des menus",[729,730,731,738,744,750],"ul",{},[732,733,734,737],"li",{},[27,735,736],{},"Clavier"," : flèches pour se déplacer, flèche droite et gauche pour les sous-menus, Entrée ou Espace pour choisir, Échap pour fermer et revenir au bouton.",[732,739,740,743],{},[27,741,742],{},"Lettres Alt"," : maintenez Alt pour souligner une lettre par ligne. Alt + cette lettre choisit la ligne. Une ligne désactivée ou qui a un raccourci clavier n'a pas de lettre Alt.",[732,745,746,749],{},[27,747,748],{},"Libellés"," : le libellé est affiché comme texte. Une balise HTML dans un libellé s'affiche telle quelle.",[732,751,752,755],{},[27,753,754],{},"Téléphone"," : les boutons d'un groupe s'affichent dans le menu ••• sous la forme d'une ligne « Groupe » avec un sous-menu.",[58,757,759],{"id":758},"résoudre-un-problème","Résoudre un problème",[271,761,762,772],{},[274,763,764],{},[277,765,766,769],{},[280,767,768],{},"Problème",[280,770,771],{},"Cause probable",[287,773,774,782,796],{},[277,775,776,779],{},[292,777,778],{},"L'élément n'apparaît pas",[292,780,781],{},"Un élément avec le même libellé existe déjà dans ce menu.",[277,783,784,787],{},[292,785,786],{},"Le bouton reste après un changement d'état",[292,788,789,790,793,794,83],{},"Le script ajoute le bouton dans ",[22,791,792],{},"refresh"," sans condition. Testez l'état du document avant ",[22,795,590],{},[277,797,798,801],{},[292,799,800],{},"Le raccourci ne fonctionne pas",[292,802,803,804,806,807,809,810,83],{},"Le raccourci est passé dans une option ",[22,805,329],{}," d'un élément ",[22,808,24],{},". Cette option sert à l'affichage seul : liez la touche avec ",[22,811,812],{},"frappe.ui.keys.add_shortcut",[814,815,816],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":68,"searchDepth":75,"depth":118,"links":818},[819,820,821,822,823],{"id":60,"depth":118,"text":61},{"id":354,"depth":118,"text":355},{"id":492,"depth":118,"text":493},{"id":726,"depth":118,"text":727},{"id":758,"depth":118,"text":759},"Ajouter des éléments aux menus de l'en-tête d'un formulaire ou d'une page (menu •••, menu Actions, groupes de boutons) et comprendre leur comportement.","md",{"icon":827,"reviewed":828,"last_verified":829,"sources":830},"i-mdi-menu-open",true,"2026-11-03",[831,832,833,834],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fpage.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fform\u002Fform.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fmenu.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fdropdown.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fmenus-deroulants-espresso",{"title":5,"description":824},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fmenus-deroulants-espresso","na6g3Bvb32ir-aVsS0JU5qF3vvsxjTVvPnCsHTLdGko",{},1793871739421]