[{"data":1,"prerenderedAt":1415},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fsections-optionnelles":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fsections-optionnelles":1414},{"id":4,"title":5,"body":6,"description":1401,"extension":1402,"meta":1403,"navigation":166,"path":1410,"seo":1411,"stem":1412,"__hash__":1413},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Fsections-optionnelles.md","Sections optionnelles",{"type":7,"value":8,"toc":1392},"minimark",[9,13,21,28,31,36,58,62,65,122,126,399,405,524,528,650,656,723,727,777,781,790,1240,1244,1251,1290,1299,1388],[10,11,5],"h1",{"id":12},"sections-optionnelles",[14,15,16,20],"p",{},[17,18,19],"code",{},"frappe.ui.OptionalSections"," affiche une rangée de boutons d'ajout, un par section optionnelle d'un formulaire. Cliquer sur un bouton affiche la section en ligne, avec un bouton de suppression qui la masque et remet son bouton d'ajout en place. Le composant convient aux formulaires dont la plupart des champs sont facultatifs : les champs obligatoires restent visibles et les autres n'apparaissent que sur demande.",[14,22,23,24,27],{},"Il est également exposé sous la forme pratique ",[17,25,26],{},"frappe.ui.optional_sections(opts)",", qui construit les sections et renvoie l'élément racine.",[14,29,30],{},"Une démonstration est disponible dans l'explorateur de composants du bureau (page « Component Explorer », entrée « Optional Sections »).",[32,33,35],"h2",{"id":34},"prérequis","Prérequis",[37,38,39,47],"ul",{},[40,41,42,43,46],"li",{},"Le code s'exécute dans le bureau (desk), où ",[17,44,45],{},"frappe.ui.button"," est disponible : le composant construit ses boutons avec.",[40,48,49,50,53,54,57],{},"Les deux bundles ",[17,51,52],{},"optional_sections.bundle.js"," et ",[17,55,56],{},"optional_sections.bundle.css"," sont chargés avant l'appel.",[32,59,61],{"id":60},"chargement","Chargement",[14,63,64],{},"Le composant est distribué dans son propre bundle, chargé à la première utilisation afin de ne pas alourdir les bundles du bureau et du site :",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await frappe.require([\"optional_sections.bundle.js\", \"optional_sections.bundle.css\"]);\n","js","",[17,73,74],{"__ignoreMap":71},[75,76,79,83,87,91,95,98,101,104,106,109,112,114,116,119],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"s7zQu","await",[75,84,86],{"class":85},"sTEyZ"," frappe",[75,88,90],{"class":89},"sMK4o",".",[75,92,94],{"class":93},"s2Zo4","require",[75,96,97],{"class":85},"([",[75,99,100],{"class":89},"\"",[75,102,52],{"class":103},"sfazB",[75,105,100],{"class":89},[75,107,108],{"class":89},",",[75,110,111],{"class":89}," \"",[75,113,56],{"class":103},[75,115,100],{"class":89},[75,117,118],{"class":85},"])",[75,120,121],{"class":89},";\n",[32,123,125],{"id":124},"utilisation","Utilisation",[66,127,129],{"className":68,"code":128,"language":70,"meta":71,"style":71},"await frappe.require([\"optional_sections.bundle.js\", \"optional_sections.bundle.css\"]);\n\nconst sections = new frappe.ui.OptionalSections({\n    label: __(\"Ajouter d'autres informations\"),\n    sections: [\n        { title: __(\"Contact\"), content: () => this.make_contact_fields() },\n        { title: __(\"Coordonnées bancaires\"), content: () => this.make_bank_fields() },\n    ],\n    on_remove: (index) => this.clear_fields(index),\n});\nbody.append(sections.$el);\n",[17,130,131,161,168,202,230,241,290,331,339,368,378],{"__ignoreMap":71},[75,132,133,135,137,139,141,143,145,147,149,151,153,155,157,159],{"class":77,"line":78},[75,134,82],{"class":81},[75,136,86],{"class":85},[75,138,90],{"class":89},[75,140,94],{"class":93},[75,142,97],{"class":85},[75,144,100],{"class":89},[75,146,52],{"class":103},[75,148,100],{"class":89},[75,150,108],{"class":89},[75,152,111],{"class":89},[75,154,56],{"class":103},[75,156,100],{"class":89},[75,158,118],{"class":85},[75,160,121],{"class":89},[75,162,164],{"class":77,"line":163},2,[75,165,167],{"emptyLinePlaceholder":166},true,"\n",[75,169,171,175,178,181,184,186,188,191,193,196,199],{"class":77,"line":170},3,[75,172,174],{"class":173},"spNyl","const",[75,176,177],{"class":85}," sections ",[75,179,180],{"class":89},"=",[75,182,183],{"class":89}," new",[75,185,86],{"class":85},[75,187,90],{"class":89},[75,189,190],{"class":85},"ui",[75,192,90],{"class":89},[75,194,195],{"class":93},"OptionalSections",[75,197,198],{"class":85},"(",[75,200,201],{"class":89},"{\n",[75,203,205,209,212,215,217,219,222,224,227],{"class":77,"line":204},4,[75,206,208],{"class":207},"swJcz","    label",[75,210,211],{"class":89},":",[75,213,214],{"class":93}," __",[75,216,198],{"class":85},[75,218,100],{"class":89},[75,220,221],{"class":103},"Ajouter d'autres informations",[75,223,100],{"class":89},[75,225,226],{"class":85},")",[75,228,229],{"class":89},",\n",[75,231,233,236,238],{"class":77,"line":232},5,[75,234,235],{"class":207},"    sections",[75,237,211],{"class":89},[75,239,240],{"class":85}," [\n",[75,242,244,247,250,252,254,256,258,261,263,265,267,270,272,275,278,281,284,287],{"class":77,"line":243},6,[75,245,246],{"class":89},"        {",[75,248,249],{"class":207}," title",[75,251,211],{"class":89},[75,253,214],{"class":93},[75,255,198],{"class":85},[75,257,100],{"class":89},[75,259,260],{"class":103},"Contact",[75,262,100],{"class":89},[75,264,226],{"class":85},[75,266,108],{"class":89},[75,268,269],{"class":93}," content",[75,271,211],{"class":89},[75,273,274],{"class":89}," ()",[75,276,277],{"class":173}," =>",[75,279,280],{"class":89}," this.",[75,282,283],{"class":93},"make_contact_fields",[75,285,286],{"class":85},"() ",[75,288,289],{"class":89},"},\n",[75,291,293,295,297,299,301,303,305,308,310,312,314,316,318,320,322,324,327,329],{"class":77,"line":292},7,[75,294,246],{"class":89},[75,296,249],{"class":207},[75,298,211],{"class":89},[75,300,214],{"class":93},[75,302,198],{"class":85},[75,304,100],{"class":89},[75,306,307],{"class":103},"Coordonnées bancaires",[75,309,100],{"class":89},[75,311,226],{"class":85},[75,313,108],{"class":89},[75,315,269],{"class":93},[75,317,211],{"class":89},[75,319,274],{"class":89},[75,321,277],{"class":173},[75,323,280],{"class":89},[75,325,326],{"class":93},"make_bank_fields",[75,328,286],{"class":85},[75,330,289],{"class":89},[75,332,334,337],{"class":77,"line":333},8,[75,335,336],{"class":85},"    ]",[75,338,229],{"class":89},[75,340,342,345,347,350,354,356,358,360,363,366],{"class":77,"line":341},9,[75,343,344],{"class":93},"    on_remove",[75,346,211],{"class":89},[75,348,349],{"class":89}," (",[75,351,353],{"class":352},"sHdIc","index",[75,355,226],{"class":89},[75,357,277],{"class":173},[75,359,280],{"class":89},[75,361,362],{"class":93},"clear_fields",[75,364,365],{"class":85},"(index)",[75,367,229],{"class":89},[75,369,371,374,376],{"class":77,"line":370},10,[75,372,373],{"class":89},"}",[75,375,226],{"class":85},[75,377,121],{"class":89},[75,379,381,384,386,389,392,394,397],{"class":77,"line":380},11,[75,382,383],{"class":85},"body",[75,385,90],{"class":89},[75,387,388],{"class":93},"append",[75,390,391],{"class":85},"(sections",[75,393,90],{"class":89},[75,395,396],{"class":85},"$el)",[75,398,121],{"class":89},[14,400,401,402,404],{},"La forme courte s'enchaîne directement dans un ",[17,403,388],{}," :",[66,406,408],{"className":68,"code":407,"language":70,"meta":71,"style":71},"body.append(\n    frappe.ui.optional_sections({\n        label: __(\"Ajouter d'autres informations\"),\n        sections: [{ title: __(\"Contact\"), content: \"Champs de contact ici.\" }],\n    })\n);\n",[17,409,410,421,439,460,510,518],{"__ignoreMap":71},[75,411,412,414,416,418],{"class":77,"line":78},[75,413,383],{"class":85},[75,415,90],{"class":89},[75,417,388],{"class":93},[75,419,420],{"class":85},"(\n",[75,422,423,426,428,430,432,435,437],{"class":77,"line":163},[75,424,425],{"class":85},"    frappe",[75,427,90],{"class":89},[75,429,190],{"class":85},[75,431,90],{"class":89},[75,433,434],{"class":93},"optional_sections",[75,436,198],{"class":85},[75,438,201],{"class":89},[75,440,441,444,446,448,450,452,454,456,458],{"class":77,"line":170},[75,442,443],{"class":207},"        label",[75,445,211],{"class":89},[75,447,214],{"class":93},[75,449,198],{"class":85},[75,451,100],{"class":89},[75,453,221],{"class":103},[75,455,100],{"class":89},[75,457,226],{"class":85},[75,459,229],{"class":89},[75,461,462,465,467,470,473,475,477,479,481,483,485,487,489,491,493,495,497,500,502,505,508],{"class":77,"line":204},[75,463,464],{"class":207},"        sections",[75,466,211],{"class":89},[75,468,469],{"class":85}," [",[75,471,472],{"class":89},"{",[75,474,249],{"class":207},[75,476,211],{"class":89},[75,478,214],{"class":93},[75,480,198],{"class":85},[75,482,100],{"class":89},[75,484,260],{"class":103},[75,486,100],{"class":89},[75,488,226],{"class":85},[75,490,108],{"class":89},[75,492,269],{"class":207},[75,494,211],{"class":89},[75,496,111],{"class":89},[75,498,499],{"class":103},"Champs de contact ici.",[75,501,100],{"class":89},[75,503,504],{"class":89}," }",[75,506,507],{"class":85},"]",[75,509,229],{"class":89},[75,511,512,515],{"class":77,"line":232},[75,513,514],{"class":89},"    }",[75,516,517],{"class":85},")\n",[75,519,520,522],{"class":77,"line":243},[75,521,226],{"class":85},[75,523,121],{"class":89},[32,525,527],{"id":526},"options","Options",[529,530,531,547],"table",{},[532,533,534],"thead",{},[535,536,537,541,544],"tr",{},[538,539,540],"th",{},"Option",[538,542,543],{},"Type",[538,545,546],{},"Description",[548,549,550,566,584,601,620,636],"tbody",{},[535,551,552,558,563],{},[553,554,555],"td",{},[17,556,557],{},"sections",[553,559,560],{},[17,561,562],{},"Array",[553,564,565],{},"Sections optionnelles du formulaire, décrites ci-dessous.",[535,567,568,573,578],{},[553,569,570],{},[17,571,572],{},"label",[553,574,575],{},[17,576,577],{},"string",[553,579,580,581,90],{},"Texte affiché au-dessus des boutons d'ajout, par exemple ",[17,582,583],{},"__(\"Ajouter d'autres informations\")",[535,585,586,591,595],{},[553,587,588],{},[17,589,590],{},"remove_label",[553,592,593],{},[17,594,577],{},[553,596,597,598,90],{},"Libellé du bouton de suppression de chaque section. Par défaut : ",[17,599,600],{},"__(\"Remove\")",[535,602,603,608,613],{},[553,604,605],{},[17,606,607],{},"on_add",[553,609,610],{},[17,611,612],{},"function",[553,614,615,616,619],{},"Appelée avec ",[17,617,618],{},"(index, section)"," après l'ajout d'une section.",[535,621,622,627,631],{},[553,623,624],{},[17,625,626],{},"on_remove",[553,628,629],{},[17,630,612],{},[553,632,615,633,635],{},[17,634,618],{}," après la suppression d'une section. La suppression masque la section mais conserve son contenu : réinitialisez vos champs dans ce rappel.",[535,637,638,643,647],{},[553,639,640],{},[17,641,642],{},"css_class",[553,644,645],{},[17,646,577],{},[553,648,649],{},"Classes supplémentaires ajoutées à l'élément racine.",[14,651,652,653,655],{},"Chaque entrée de ",[17,654,557],{}," accepte les options suivantes :",[529,657,658,668],{},[532,659,660],{},[535,661,662,664,666],{},[538,663,540],{},[538,665,543],{},[538,667,546],{},[548,669,670,684,708],{},[535,671,672,677,681],{},[553,673,674],{},[17,675,676],{},"title",[553,678,679],{},[17,680,577],{},[553,682,683],{},"Intitulé de la section, également utilisé comme libellé de son bouton d'ajout. Affiché comme texte, jamais comme HTML.",[535,685,686,691,705],{},[553,687,688],{},[17,689,690],{},"content",[553,692,693,696,697,696,700,702,703],{},[17,694,695],{},"Element",", ",[17,698,699],{},"JQuery",[17,701,612],{}," ou ",[17,704,577],{},[553,706,707],{},"Corps de la section. Une fonction est appelée avec l'instance du composant, une seule fois au premier affichage de la section, et doit renvoyer un élément. Une chaîne est affichée comme texte, jamais comme HTML.",[535,709,710,715,720],{},[553,711,712],{},[17,713,714],{},"added",[553,716,717],{},[17,718,719],{},"boolean",[553,721,722],{},"Affiche la section dès le départ.",[32,724,726],{"id":725},"comportement","Comportement",[37,728,729,732,735,749,752,774],{},[40,730,731],{},"Cliquer sur un bouton d'ajout affiche la section en ligne, dans l'ordre déclaré, et masque le bouton ; le bouton de suppression masque la section et remet le bouton d'ajout en place.",[40,733,734],{},"Le contenu d'une section n'est construit qu'à son premier affichage.",[40,736,737,738,741,742,702,745,748],{},"À l'ajout, le focus est placé sur le premier champ de la section (",[17,739,740],{},"input"," autre qu'une case à cocher ou un champ caché, ",[17,743,744],{},"select",[17,746,747],{},"textarea","), ou à défaut sur le premier bouton de la section. À la suppression, le focus revient au bouton d'ajout.",[40,750,751],{},"La rangée des boutons d'ajout est masquée dès que toutes les sections sont ajoutées.",[40,753,754,755,702,758,761,762,765,766,769,770,773],{},"Chaque section porte l'attribut ",[17,756,757],{},"data-state=\"added\"",[17,759,760],{},"data-state=\"removed\"",". La racine porte la classe ",[17,763,764],{},"es-optional-sections"," et les éléments internes suivent la convention ",[17,767,768],{},"es-optional-sections__*"," (par exemple ",[17,771,772],{},"es-optional-sections__buttons",").",[40,775,776],{},"Les intitulés et les contenus textuels sont rendus comme du texte brut : le composant n'interprète jamais de HTML.",[32,778,780],{"id":779},"exemple-avec-des-champs","Exemple avec des champs",[14,782,783,784,786,787,789],{},"Lorsque la section contient des champs, construisez-les dans ",[17,785,690],{}," et réinitialisez-les dans ",[17,788,626],{},", car la suppression conserve le contenu :",[66,791,793],{"className":68,"code":792,"language":70,"meta":71,"style":71},"let fields;\n\nbody.append(\n    frappe.ui.optional_sections({\n        label: __(\"Ajouter d'autres informations\"),\n        sections: [\n            {\n                title: __(\"Contact\"),\n                content: () => {\n                    const section_body = document.createElement(\"div\");\n                    fields = new frappe.ui.FieldGroup({\n                        body: section_body,\n                        fields: [\n                            { fieldtype: \"Data\", fieldname: \"email\", label: __(\"E-mail\") },\n                            { fieldtype: \"Column Break\", fieldname: \"column\" },\n                            { fieldtype: \"Data\", fieldname: \"mobile\", label: __(\"Mobile\") },\n                        ],\n                    });\n                    fields.make();\n                    return section_body;\n                },\n            },\n        ],\n        on_remove: () => fields.set_values({ email: \"\", mobile: \"\" }),\n    })\n);\n",[17,794,795,805,809,819,835,855,863,868,889,903,935,959,971,981,1036,1068,1117,1125,1135,1150,1160,1166,1172,1180,1226,1233],{"__ignoreMap":71},[75,796,797,800,803],{"class":77,"line":78},[75,798,799],{"class":173},"let",[75,801,802],{"class":85}," fields",[75,804,121],{"class":89},[75,806,807],{"class":77,"line":163},[75,808,167],{"emptyLinePlaceholder":166},[75,810,811,813,815,817],{"class":77,"line":170},[75,812,383],{"class":85},[75,814,90],{"class":89},[75,816,388],{"class":93},[75,818,420],{"class":85},[75,820,821,823,825,827,829,831,833],{"class":77,"line":204},[75,822,425],{"class":85},[75,824,90],{"class":89},[75,826,190],{"class":85},[75,828,90],{"class":89},[75,830,434],{"class":93},[75,832,198],{"class":85},[75,834,201],{"class":89},[75,836,837,839,841,843,845,847,849,851,853],{"class":77,"line":232},[75,838,443],{"class":207},[75,840,211],{"class":89},[75,842,214],{"class":93},[75,844,198],{"class":85},[75,846,100],{"class":89},[75,848,221],{"class":103},[75,850,100],{"class":89},[75,852,226],{"class":85},[75,854,229],{"class":89},[75,856,857,859,861],{"class":77,"line":243},[75,858,464],{"class":207},[75,860,211],{"class":89},[75,862,240],{"class":85},[75,864,865],{"class":77,"line":292},[75,866,867],{"class":89},"            {\n",[75,869,870,873,875,877,879,881,883,885,887],{"class":77,"line":333},[75,871,872],{"class":207},"                title",[75,874,211],{"class":89},[75,876,214],{"class":93},[75,878,198],{"class":85},[75,880,100],{"class":89},[75,882,260],{"class":103},[75,884,100],{"class":89},[75,886,226],{"class":85},[75,888,229],{"class":89},[75,890,891,894,896,898,900],{"class":77,"line":341},[75,892,893],{"class":93},"                content",[75,895,211],{"class":89},[75,897,274],{"class":89},[75,899,277],{"class":173},[75,901,902],{"class":89}," {\n",[75,904,905,908,911,914,917,919,922,924,926,929,931,933],{"class":77,"line":370},[75,906,907],{"class":173},"                    const",[75,909,910],{"class":85}," section_body",[75,912,913],{"class":89}," =",[75,915,916],{"class":85}," document",[75,918,90],{"class":89},[75,920,921],{"class":93},"createElement",[75,923,198],{"class":207},[75,925,100],{"class":89},[75,927,928],{"class":103},"div",[75,930,100],{"class":89},[75,932,226],{"class":207},[75,934,121],{"class":89},[75,936,937,940,942,944,946,948,950,952,955,957],{"class":77,"line":380},[75,938,939],{"class":85},"                    fields",[75,941,913],{"class":89},[75,943,183],{"class":89},[75,945,86],{"class":85},[75,947,90],{"class":89},[75,949,190],{"class":85},[75,951,90],{"class":89},[75,953,954],{"class":93},"FieldGroup",[75,956,198],{"class":207},[75,958,201],{"class":89},[75,960,962,965,967,969],{"class":77,"line":961},12,[75,963,964],{"class":207},"                        body",[75,966,211],{"class":89},[75,968,910],{"class":85},[75,970,229],{"class":89},[75,972,974,977,979],{"class":77,"line":973},13,[75,975,976],{"class":207},"                        fields",[75,978,211],{"class":89},[75,980,240],{"class":207},[75,982,984,987,990,992,994,997,999,1001,1004,1006,1008,1011,1013,1015,1018,1020,1022,1024,1026,1029,1031,1034],{"class":77,"line":983},14,[75,985,986],{"class":89},"                            {",[75,988,989],{"class":207}," fieldtype",[75,991,211],{"class":89},[75,993,111],{"class":89},[75,995,996],{"class":103},"Data",[75,998,100],{"class":89},[75,1000,108],{"class":89},[75,1002,1003],{"class":207}," fieldname",[75,1005,211],{"class":89},[75,1007,111],{"class":89},[75,1009,1010],{"class":103},"email",[75,1012,100],{"class":89},[75,1014,108],{"class":89},[75,1016,1017],{"class":207}," label",[75,1019,211],{"class":89},[75,1021,214],{"class":93},[75,1023,198],{"class":207},[75,1025,100],{"class":89},[75,1027,1028],{"class":103},"E-mail",[75,1030,100],{"class":89},[75,1032,1033],{"class":207},") ",[75,1035,289],{"class":89},[75,1037,1039,1041,1043,1045,1047,1050,1052,1054,1056,1058,1060,1063,1065],{"class":77,"line":1038},15,[75,1040,986],{"class":89},[75,1042,989],{"class":207},[75,1044,211],{"class":89},[75,1046,111],{"class":89},[75,1048,1049],{"class":103},"Column Break",[75,1051,100],{"class":89},[75,1053,108],{"class":89},[75,1055,1003],{"class":207},[75,1057,211],{"class":89},[75,1059,111],{"class":89},[75,1061,1062],{"class":103},"column",[75,1064,100],{"class":89},[75,1066,1067],{"class":89}," },\n",[75,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1094,1096,1098,1100,1102,1104,1106,1108,1111,1113,1115],{"class":77,"line":1070},16,[75,1072,986],{"class":89},[75,1074,989],{"class":207},[75,1076,211],{"class":89},[75,1078,111],{"class":89},[75,1080,996],{"class":103},[75,1082,100],{"class":89},[75,1084,108],{"class":89},[75,1086,1003],{"class":207},[75,1088,211],{"class":89},[75,1090,111],{"class":89},[75,1092,1093],{"class":103},"mobile",[75,1095,100],{"class":89},[75,1097,108],{"class":89},[75,1099,1017],{"class":207},[75,1101,211],{"class":89},[75,1103,214],{"class":93},[75,1105,198],{"class":207},[75,1107,100],{"class":89},[75,1109,1110],{"class":103},"Mobile",[75,1112,100],{"class":89},[75,1114,1033],{"class":207},[75,1116,289],{"class":89},[75,1118,1120,1123],{"class":77,"line":1119},17,[75,1121,1122],{"class":207},"                        ]",[75,1124,229],{"class":89},[75,1126,1128,1131,1133],{"class":77,"line":1127},18,[75,1129,1130],{"class":89},"                    }",[75,1132,226],{"class":207},[75,1134,121],{"class":89},[75,1136,1138,1140,1142,1145,1148],{"class":77,"line":1137},19,[75,1139,939],{"class":85},[75,1141,90],{"class":89},[75,1143,1144],{"class":93},"make",[75,1146,1147],{"class":207},"()",[75,1149,121],{"class":89},[75,1151,1153,1156,1158],{"class":77,"line":1152},20,[75,1154,1155],{"class":81},"                    return",[75,1157,910],{"class":85},[75,1159,121],{"class":89},[75,1161,1163],{"class":77,"line":1162},21,[75,1164,1165],{"class":89},"                },\n",[75,1167,1169],{"class":77,"line":1168},22,[75,1170,1171],{"class":89},"            },\n",[75,1173,1175,1178],{"class":77,"line":1174},23,[75,1176,1177],{"class":85},"        ]",[75,1179,229],{"class":89},[75,1181,1183,1186,1188,1190,1192,1194,1196,1199,1201,1203,1206,1208,1211,1213,1216,1218,1220,1222,1224],{"class":77,"line":1182},24,[75,1184,1185],{"class":93},"        on_remove",[75,1187,211],{"class":89},[75,1189,274],{"class":89},[75,1191,277],{"class":173},[75,1193,802],{"class":85},[75,1195,90],{"class":89},[75,1197,1198],{"class":93},"set_values",[75,1200,198],{"class":85},[75,1202,472],{"class":89},[75,1204,1205],{"class":207}," email",[75,1207,211],{"class":89},[75,1209,1210],{"class":89}," \"\"",[75,1212,108],{"class":89},[75,1214,1215],{"class":207}," mobile",[75,1217,211],{"class":89},[75,1219,1210],{"class":89},[75,1221,504],{"class":89},[75,1223,226],{"class":85},[75,1225,229],{"class":89},[75,1227,1229,1231],{"class":77,"line":1228},25,[75,1230,514],{"class":89},[75,1232,517],{"class":85},[75,1234,1236,1238],{"class":77,"line":1235},26,[75,1237,226],{"class":85},[75,1239,121],{"class":89},[32,1241,1243],{"id":1242},"méthodes-de-linstance","Méthodes de l'instance",[14,1245,1246,1247,1250],{},"L'instance créée avec ",[17,1248,1249],{},"new frappe.ui.OptionalSections(opts)"," expose :",[37,1252,1253,1259,1265,1275,1281],{},[40,1254,1255,1258],{},[17,1256,1257],{},"add(index)"," : affiche la section située à l'index donné.",[40,1260,1261,1264],{},[17,1262,1263],{},"remove(index)"," : masque la section située à l'index donné.",[40,1266,1267,1270,1271,1274],{},[17,1268,1269],{},"is_added(index)"," : renvoie ",[17,1272,1273],{},"true"," si la section est affichée.",[40,1276,1277,1280],{},[17,1278,1279],{},"destroy()"," : retire l'élément du DOM.",[40,1282,1283,53,1286,1289],{},[17,1284,1285],{},"$el",[17,1287,1288],{},"el"," : l'élément racine, en jQuery et en élément DOM.",[14,1291,1292,1293,1295,1296,404],{},"La forme pratique ",[17,1294,26],{}," renvoie l'élément racine en jQuery ; l'instance reste accessible via ",[17,1297,1298],{},".data(\"es-optional-sections\")",[66,1300,1302],{"className":68,"code":1301,"language":70,"meta":71,"style":71},"const $el = frappe.ui.optional_sections({ sections: [] });\nconst sections = $el.data(\"es-optional-sections\");\nsections.add(0);\n",[17,1303,1304,1341,1369],{"__ignoreMap":71},[75,1305,1306,1308,1311,1313,1315,1317,1319,1321,1323,1325,1327,1330,1332,1335,1337,1339],{"class":77,"line":78},[75,1307,174],{"class":173},[75,1309,1310],{"class":85}," $el ",[75,1312,180],{"class":89},[75,1314,86],{"class":85},[75,1316,90],{"class":89},[75,1318,190],{"class":85},[75,1320,90],{"class":89},[75,1322,434],{"class":93},[75,1324,198],{"class":85},[75,1326,472],{"class":89},[75,1328,1329],{"class":207}," sections",[75,1331,211],{"class":89},[75,1333,1334],{"class":85}," [] ",[75,1336,373],{"class":89},[75,1338,226],{"class":85},[75,1340,121],{"class":89},[75,1342,1343,1345,1347,1349,1352,1354,1357,1359,1361,1363,1365,1367],{"class":77,"line":163},[75,1344,174],{"class":173},[75,1346,177],{"class":85},[75,1348,180],{"class":89},[75,1350,1351],{"class":85}," $el",[75,1353,90],{"class":89},[75,1355,1356],{"class":93},"data",[75,1358,198],{"class":85},[75,1360,100],{"class":89},[75,1362,764],{"class":103},[75,1364,100],{"class":89},[75,1366,226],{"class":85},[75,1368,121],{"class":89},[75,1370,1371,1373,1375,1378,1380,1384,1386],{"class":77,"line":170},[75,1372,557],{"class":85},[75,1374,90],{"class":89},[75,1376,1377],{"class":93},"add",[75,1379,198],{"class":85},[75,1381,1383],{"class":1382},"sbssI","0",[75,1385,226],{"class":85},[75,1387,121],{"class":89},[1389,1390,1391],"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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":71,"searchDepth":78,"depth":163,"links":1393},[1394,1395,1396,1397,1398,1399,1400],{"id":34,"depth":163,"text":35},{"id":60,"depth":163,"text":61},{"id":124,"depth":163,"text":125},{"id":526,"depth":163,"text":527},{"id":725,"depth":163,"text":726},{"id":779,"depth":163,"text":780},{"id":1242,"depth":163,"text":1243},"Afficher des sections de formulaire ajoutées à la demande avec le composant frappe.ui.OptionalSections.","md",{"reviewed":166,"last_verified":1404,"sources":1405},"2026-11-03",[1406,1407,1408,1409],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Foptional_sections.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Foptional_sections.bundle.js","dodock@develop:frappe\u002Fpublic\u002Fscss\u002Foptional_sections.bundle.scss","dodock@develop:frappe\u002Fcore\u002Fpage\u002Fcomponent_explorer\u002Fcomponent_explorer.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fsections-optionnelles",{"title":5,"description":1401},"2.next\u002F3.dodock\u002F10.developpeurs\u002Fsections-optionnelles","5yibNMvPNKvr2DkqpRO7X0KhbA3kYeokJIv64ETpP5A",{},1793871751165]