[{"data":1,"prerenderedAt":1038},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fform-layout-parties":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fform-layout-parties":1037},{"id":4,"title":5,"body":6,"description":1023,"extension":1024,"meta":1025,"navigation":304,"path":1033,"seo":1034,"stem":1035,"__hash__":1036},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fform-layout-parties.md","Insérer un composant personnalisé dans un formulaire FormLayout",{"type":7,"value":8,"toc":1018},"minimark",[9,13,23,73,78,81,165,169,176,985,989,1014],[10,11,5],"h1",{"id":12},"insérer-un-composant-personnalisé-dans-un-formulaire-formlayout",[14,15,16,17,22],"p",{},"Un « part » est un composant Vue de votre application, placé dans le schéma d'un formulaire ",[18,19,21],"a",{"href":20},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fform-layout","FormLayout",". Il se déclare dans les données du schéma, pas dans le modèle (template) Vue.",[24,25,26,42],"table",{},[27,28,29],"thead",{},[30,31,32,36,39],"tr",{},[33,34,35],"th",{},"Emplacement",[33,37,38],{},"Clé du schéma",[33,40,41],{},"Affichage",[43,44,45,60],"tbody",{},[30,46,47,51,57],{},[48,49,50],"td",{},"Entre deux sections",[48,52,53],{},[54,55,56],"code",{},"section.part",[48,58,59],{},"Le part remplace les colonnes de la section et prend toute la largeur.",[30,61,62,65,70],{},[48,63,64],{},"Dans une colonne",[48,66,67],{},[54,68,69],{},"column.parts[]",[48,71,72],{},"Le part occupe une cellule de la colonne, comme un champ.",[74,75,77],"h2",{"id":76},"déclarer-un-part","Déclarer un part",[14,79,80],{},"Un part est un objet :",[24,82,83,96],{},[27,84,85],{},[30,86,87,90,93],{},[33,88,89],{},"Clé",[33,91,92],{},"Obligatoire",[33,94,95],{},"Rôle",[43,97,98,111,123,136,148],{},[30,99,100,105,108],{},[48,101,102],{},[54,103,104],{},"name",[48,106,107],{},"Oui",[48,109,110],{},"Identifiant unique du part. Un autre part peut s'ancrer sur ce nom.",[30,112,113,118,120],{},[48,114,115],{},[54,116,117],{},"component",[48,119,107],{},[48,121,122],{},"Composant Vue à afficher.",[30,124,125,130,133],{},[48,126,127],{},[54,128,129],{},"props",[48,131,132],{},"Non",[48,134,135],{},"Propriétés passées au composant.",[30,137,138,143,145],{},[48,139,140],{},[54,141,142],{},"label",[48,144,132],{},[48,146,147],{},"Libellé affiché au-dessus du composant. Sans libellé, le composant s'affiche sans habillage.",[30,149,150,159,162],{},[48,151,152,155,156],{},[54,153,154],{},"before"," \u002F ",[54,157,158],{},"after",[48,160,161],{},"Non (colonne seulement)",[48,163,164],{},"Nom du champ ou du part avant ou après lequel placer le part.",[74,166,168],{"id":167},"exemple","Exemple",[14,170,171,172,175],{},"Exemple fictif : un formulaire affiche le solde d'un client entre deux sections, et une jauge après le champ ",[54,173,174],{},"grand_total",".",[177,178,183],"pre",{"className":179,"code":180,"language":181,"meta":182,"style":182},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { ref } from \"vue\";\nimport { FormLayout } from \"@framework\u002Fui\u002FFormLayout\";\nimport SoldeClient from \".\u002FSoldeClient.vue\";\nimport JaugePaiement from \".\u002FJaugePaiement.vue\";\n\nconst doc = ref({ customer: \"Maison Verte\", grand_total: 1200, outstanding_amount: 400 });\n\nconst layout = [\n    {\n        name: \"details\",\n        sections: [\n            {\n                name: \"client\",\n                label: \"Client\",\n                columns: [{ fields: [{ fieldname: \"customer\", fieldtype: \"Link\", options: \"Customer\", label: \"Client\" }] }],\n            },\n            {\n                name: \"solde\",\n                columns: [],\n                part: { name: \"solde_client\", label: \"Solde client\", component: SoldeClient, props: { customer: \"Maison Verte\" } },\n            },\n            {\n                name: \"montants\",\n                label: \"Montants\",\n                columns: [\n                    {\n                        fields: [\n                            { fieldname: \"grand_total\", fieldtype: \"Currency\", label: \"Total TTC\" },\n                            { fieldname: \"outstanding_amount\", fieldtype: \"Currency\", label: \"Montant restant dû\" },\n                        ],\n                        parts: [{ name: \"jauge\", component: JaugePaiement, after: \"grand_total\" }],\n                    },\n                ],\n            },\n        ],\n    },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CFormLayout :layout=\"layout\" v-model:doc=\"doc\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[54,184,185,205,237,260,280,299,306,369,374,387,393,411,421,427,444,461,549,555,560,576,588,657,662,667,683,699,708,714,724,768,811,819,870,876,884,889,897,903,910,920,925,935,976],{"__ignoreMap":182},[186,187,190,194,198,202],"span",{"class":188,"line":189},"line",1,[186,191,193],{"class":192},"sMK4o","\u003C",[186,195,197],{"class":196},"swJcz","script",[186,199,201],{"class":200},"spNyl"," setup",[186,203,204],{"class":192},">\n",[186,206,208,212,215,219,222,225,228,231,234],{"class":188,"line":207},2,[186,209,211],{"class":210},"s7zQu","import",[186,213,214],{"class":192}," {",[186,216,218],{"class":217},"sTEyZ"," ref",[186,220,221],{"class":192}," }",[186,223,224],{"class":210}," from",[186,226,227],{"class":192}," \"",[186,229,181],{"class":230},"sfazB",[186,232,233],{"class":192},"\"",[186,235,236],{"class":192},";\n",[186,238,240,242,244,247,249,251,253,256,258],{"class":188,"line":239},3,[186,241,211],{"class":210},[186,243,214],{"class":192},[186,245,246],{"class":217}," FormLayout",[186,248,221],{"class":192},[186,250,224],{"class":210},[186,252,227],{"class":192},[186,254,255],{"class":230},"@framework\u002Fui\u002FFormLayout",[186,257,233],{"class":192},[186,259,236],{"class":192},[186,261,263,265,268,271,273,276,278],{"class":188,"line":262},4,[186,264,211],{"class":210},[186,266,267],{"class":217}," SoldeClient ",[186,269,270],{"class":210},"from",[186,272,227],{"class":192},[186,274,275],{"class":230},".\u002FSoldeClient.vue",[186,277,233],{"class":192},[186,279,236],{"class":192},[186,281,283,285,288,290,292,295,297],{"class":188,"line":282},5,[186,284,211],{"class":210},[186,286,287],{"class":217}," JaugePaiement ",[186,289,270],{"class":210},[186,291,227],{"class":192},[186,293,294],{"class":230},".\u002FJaugePaiement.vue",[186,296,233],{"class":192},[186,298,236],{"class":192},[186,300,302],{"class":188,"line":301},6,[186,303,305],{"emptyLinePlaceholder":304},true,"\n",[186,307,309,312,315,318,321,324,327,330,333,335,338,340,343,346,348,352,354,357,359,362,364,367],{"class":188,"line":308},7,[186,310,311],{"class":200},"const",[186,313,314],{"class":217}," doc ",[186,316,317],{"class":192},"=",[186,319,218],{"class":320},"s2Zo4",[186,322,323],{"class":217},"(",[186,325,326],{"class":192},"{",[186,328,329],{"class":196}," customer",[186,331,332],{"class":192},":",[186,334,227],{"class":192},[186,336,337],{"class":230},"Maison Verte",[186,339,233],{"class":192},[186,341,342],{"class":192},",",[186,344,345],{"class":196}," grand_total",[186,347,332],{"class":192},[186,349,351],{"class":350},"sbssI"," 1200",[186,353,342],{"class":192},[186,355,356],{"class":196}," outstanding_amount",[186,358,332],{"class":192},[186,360,361],{"class":350}," 400",[186,363,221],{"class":192},[186,365,366],{"class":217},")",[186,368,236],{"class":192},[186,370,372],{"class":188,"line":371},8,[186,373,305],{"emptyLinePlaceholder":304},[186,375,377,379,382,384],{"class":188,"line":376},9,[186,378,311],{"class":200},[186,380,381],{"class":217}," layout ",[186,383,317],{"class":192},[186,385,386],{"class":217}," [\n",[186,388,390],{"class":188,"line":389},10,[186,391,392],{"class":192},"    {\n",[186,394,396,399,401,403,406,408],{"class":188,"line":395},11,[186,397,398],{"class":196},"        name",[186,400,332],{"class":192},[186,402,227],{"class":192},[186,404,405],{"class":230},"details",[186,407,233],{"class":192},[186,409,410],{"class":192},",\n",[186,412,414,417,419],{"class":188,"line":413},12,[186,415,416],{"class":196},"        sections",[186,418,332],{"class":192},[186,420,386],{"class":217},[186,422,424],{"class":188,"line":423},13,[186,425,426],{"class":192},"            {\n",[186,428,430,433,435,437,440,442],{"class":188,"line":429},14,[186,431,432],{"class":196},"                name",[186,434,332],{"class":192},[186,436,227],{"class":192},[186,438,439],{"class":230},"client",[186,441,233],{"class":192},[186,443,410],{"class":192},[186,445,447,450,452,454,457,459],{"class":188,"line":446},15,[186,448,449],{"class":196},"                label",[186,451,332],{"class":192},[186,453,227],{"class":192},[186,455,456],{"class":230},"Client",[186,458,233],{"class":192},[186,460,410],{"class":192},[186,462,464,467,469,472,474,477,479,481,483,486,488,490,493,495,497,500,502,504,507,509,511,514,516,518,521,523,525,528,530,532,534,536,538,541,544,547],{"class":188,"line":463},16,[186,465,466],{"class":196},"                columns",[186,468,332],{"class":192},[186,470,471],{"class":217}," [",[186,473,326],{"class":192},[186,475,476],{"class":196}," fields",[186,478,332],{"class":192},[186,480,471],{"class":217},[186,482,326],{"class":192},[186,484,485],{"class":196}," fieldname",[186,487,332],{"class":192},[186,489,227],{"class":192},[186,491,492],{"class":230},"customer",[186,494,233],{"class":192},[186,496,342],{"class":192},[186,498,499],{"class":196}," fieldtype",[186,501,332],{"class":192},[186,503,227],{"class":192},[186,505,506],{"class":230},"Link",[186,508,233],{"class":192},[186,510,342],{"class":192},[186,512,513],{"class":196}," options",[186,515,332],{"class":192},[186,517,227],{"class":192},[186,519,520],{"class":230},"Customer",[186,522,233],{"class":192},[186,524,342],{"class":192},[186,526,527],{"class":196}," label",[186,529,332],{"class":192},[186,531,227],{"class":192},[186,533,456],{"class":230},[186,535,233],{"class":192},[186,537,221],{"class":192},[186,539,540],{"class":217},"] ",[186,542,543],{"class":192},"}",[186,545,546],{"class":217},"]",[186,548,410],{"class":192},[186,550,552],{"class":188,"line":551},17,[186,553,554],{"class":192},"            },\n",[186,556,558],{"class":188,"line":557},18,[186,559,426],{"class":192},[186,561,563,565,567,569,572,574],{"class":188,"line":562},19,[186,564,432],{"class":196},[186,566,332],{"class":192},[186,568,227],{"class":192},[186,570,571],{"class":230},"solde",[186,573,233],{"class":192},[186,575,410],{"class":192},[186,577,579,581,583,586],{"class":188,"line":578},20,[186,580,466],{"class":196},[186,582,332],{"class":192},[186,584,585],{"class":217}," []",[186,587,410],{"class":192},[186,589,591,594,596,598,601,603,605,608,610,612,614,616,618,621,623,625,628,630,633,635,638,640,642,644,646,648,650,652,654],{"class":188,"line":590},21,[186,592,593],{"class":196},"                part",[186,595,332],{"class":192},[186,597,214],{"class":192},[186,599,600],{"class":196}," name",[186,602,332],{"class":192},[186,604,227],{"class":192},[186,606,607],{"class":230},"solde_client",[186,609,233],{"class":192},[186,611,342],{"class":192},[186,613,527],{"class":196},[186,615,332],{"class":192},[186,617,227],{"class":192},[186,619,620],{"class":230},"Solde client",[186,622,233],{"class":192},[186,624,342],{"class":192},[186,626,627],{"class":196}," component",[186,629,332],{"class":192},[186,631,632],{"class":217}," SoldeClient",[186,634,342],{"class":192},[186,636,637],{"class":196}," props",[186,639,332],{"class":192},[186,641,214],{"class":192},[186,643,329],{"class":196},[186,645,332],{"class":192},[186,647,227],{"class":192},[186,649,337],{"class":230},[186,651,233],{"class":192},[186,653,221],{"class":192},[186,655,656],{"class":192}," },\n",[186,658,660],{"class":188,"line":659},22,[186,661,554],{"class":192},[186,663,665],{"class":188,"line":664},23,[186,666,426],{"class":192},[186,668,670,672,674,676,679,681],{"class":188,"line":669},24,[186,671,432],{"class":196},[186,673,332],{"class":192},[186,675,227],{"class":192},[186,677,678],{"class":230},"montants",[186,680,233],{"class":192},[186,682,410],{"class":192},[186,684,686,688,690,692,695,697],{"class":188,"line":685},25,[186,687,449],{"class":196},[186,689,332],{"class":192},[186,691,227],{"class":192},[186,693,694],{"class":230},"Montants",[186,696,233],{"class":192},[186,698,410],{"class":192},[186,700,702,704,706],{"class":188,"line":701},26,[186,703,466],{"class":196},[186,705,332],{"class":192},[186,707,386],{"class":217},[186,709,711],{"class":188,"line":710},27,[186,712,713],{"class":192},"                    {\n",[186,715,717,720,722],{"class":188,"line":716},28,[186,718,719],{"class":196},"                        fields",[186,721,332],{"class":192},[186,723,386],{"class":217},[186,725,727,730,732,734,736,738,740,742,744,746,748,751,753,755,757,759,761,764,766],{"class":188,"line":726},29,[186,728,729],{"class":192},"                            {",[186,731,485],{"class":196},[186,733,332],{"class":192},[186,735,227],{"class":192},[186,737,174],{"class":230},[186,739,233],{"class":192},[186,741,342],{"class":192},[186,743,499],{"class":196},[186,745,332],{"class":192},[186,747,227],{"class":192},[186,749,750],{"class":230},"Currency",[186,752,233],{"class":192},[186,754,342],{"class":192},[186,756,527],{"class":196},[186,758,332],{"class":192},[186,760,227],{"class":192},[186,762,763],{"class":230},"Total TTC",[186,765,233],{"class":192},[186,767,656],{"class":192},[186,769,771,773,775,777,779,782,784,786,788,790,792,794,796,798,800,802,804,807,809],{"class":188,"line":770},30,[186,772,729],{"class":192},[186,774,485],{"class":196},[186,776,332],{"class":192},[186,778,227],{"class":192},[186,780,781],{"class":230},"outstanding_amount",[186,783,233],{"class":192},[186,785,342],{"class":192},[186,787,499],{"class":196},[186,789,332],{"class":192},[186,791,227],{"class":192},[186,793,750],{"class":230},[186,795,233],{"class":192},[186,797,342],{"class":192},[186,799,527],{"class":196},[186,801,332],{"class":192},[186,803,227],{"class":192},[186,805,806],{"class":230},"Montant restant dû",[186,808,233],{"class":192},[186,810,656],{"class":192},[186,812,814,817],{"class":188,"line":813},31,[186,815,816],{"class":217},"                        ]",[186,818,410],{"class":192},[186,820,822,825,827,829,831,833,835,837,840,842,844,846,848,851,853,856,858,860,862,864,866,868],{"class":188,"line":821},32,[186,823,824],{"class":196},"                        parts",[186,826,332],{"class":192},[186,828,471],{"class":217},[186,830,326],{"class":192},[186,832,600],{"class":196},[186,834,332],{"class":192},[186,836,227],{"class":192},[186,838,839],{"class":230},"jauge",[186,841,233],{"class":192},[186,843,342],{"class":192},[186,845,627],{"class":196},[186,847,332],{"class":192},[186,849,850],{"class":217}," JaugePaiement",[186,852,342],{"class":192},[186,854,855],{"class":196}," after",[186,857,332],{"class":192},[186,859,227],{"class":192},[186,861,174],{"class":230},[186,863,233],{"class":192},[186,865,221],{"class":192},[186,867,546],{"class":217},[186,869,410],{"class":192},[186,871,873],{"class":188,"line":872},33,[186,874,875],{"class":192},"                    },\n",[186,877,879,882],{"class":188,"line":878},34,[186,880,881],{"class":217},"                ]",[186,883,410],{"class":192},[186,885,887],{"class":188,"line":886},35,[186,888,554],{"class":192},[186,890,892,895],{"class":188,"line":891},36,[186,893,894],{"class":217},"        ]",[186,896,410],{"class":192},[186,898,900],{"class":188,"line":899},37,[186,901,902],{"class":192},"    },\n",[186,904,906,908],{"class":188,"line":905},38,[186,907,546],{"class":217},[186,909,236],{"class":192},[186,911,913,916,918],{"class":188,"line":912},39,[186,914,915],{"class":192},"\u003C\u002F",[186,917,197],{"class":196},[186,919,204],{"class":192},[186,921,923],{"class":188,"line":922},40,[186,924,305],{"emptyLinePlaceholder":304},[186,926,928,930,933],{"class":188,"line":927},41,[186,929,193],{"class":192},[186,931,932],{"class":196},"template",[186,934,204],{"class":192},[186,936,938,941,943,946,949,951,953,955,957,960,962,965,967,969,971,973],{"class":188,"line":937},42,[186,939,940],{"class":192},"    \u003C",[186,942,21],{"class":196},[186,944,945],{"class":192}," :",[186,947,948],{"class":200},"layout",[186,950,317],{"class":192},[186,952,233],{"class":192},[186,954,948],{"class":217},[186,956,233],{"class":192},[186,958,959],{"class":200}," v-model",[186,961,332],{"class":192},[186,963,964],{"class":200},"doc",[186,966,317],{"class":192},[186,968,233],{"class":192},[186,970,964],{"class":217},[186,972,233],{"class":192},[186,974,975],{"class":192}," \u002F>\n",[186,977,979,981,983],{"class":188,"line":978},43,[186,980,915],{"class":192},[186,982,932],{"class":196},[186,984,204],{"class":192},[74,986,988],{"id":987},"règles-de-placement","Règles de placement",[990,991,992,1002,1005,1008,1011],"ul",{},[993,994,995,996,998,999,1001],"li",{},"Un part avec ",[54,997,154],{}," se place juste avant son ancre. Avec ",[54,1000,158],{},", il se place juste après.",[993,1003,1004],{},"Un part peut s'ancrer sur un autre part de la même colonne.",[993,1006,1007],{},"Un part sans ancre, ou dont l'ancre n'existe pas dans la colonne, se place à la fin de la colonne.",[993,1009,1010],{},"Un part garde sa place si le champ voisin est masqué : les champs masqués sont retirés après le placement.",[993,1012,1013],{},"Une section qui ne contient qu'un part reste affichée. Une section sans champ visible et sans part est masquée.",[1015,1016,1017],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":182,"searchDepth":189,"depth":207,"links":1019},[1020,1021,1022],{"id":76,"depth":207,"text":77},{"id":167,"depth":207,"text":168},{"id":987,"depth":207,"text":988},"Placer un composant Vue personnalisé (« part ») entre deux sections ou dans une colonne d'un formulaire FormLayout, avant ou après un champ.","md",{"reviewed":304,"last_verified":1026,"sources":1027},"2026-11-03",[1028,1029,1030,1031,1032],"dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002Ftypes.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayoutColumn.vue","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayoutSection.vue","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayoutPart.vue","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FFormLayout.vue","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fform-layout-parties",{"title":5,"description":1023},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fform-layout-parties","8rXnNHpA3pYmTjNCHTIItPx8HKOkMrttH-VQp9kENOo",{},1793871738331]