[{"data":1,"prerenderedAt":181},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fpanneau-lateral-flow":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fpanneau-lateral-flow":180},{"id":4,"title":5,"body":6,"description":168,"extension":169,"meta":170,"navigation":171,"path":176,"seo":177,"stem":178,"__hash__":179},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Fpanneau-lateral-flow.md","Panneau latéral Flow",{"type":7,"value":8,"toc":160},"minimark",[9,13,17,29,36,42,83,86,91,94,123,126,130,156],[10,11,5],"h1",{"id":12},"panneau-latéral-flow",[14,15,16],"p",{},"L'assistant Flow s'intègre à une page sous la forme d'un panneau latéral ancré à droite de la fenêtre. La page se rétrécit pour rester visible à côté du panneau ; si la fenêtre est trop étroite, le panneau recouvre la page.",[14,18,19,20,24,25,28],{},"Cette page décrit les deux façons de piloter le panneau depuis votre code : l'attribut ",[21,22,23],"code",{},"data-flow-toggle"," et la fonction ",[21,26,27],{},"window.flow.toggle()",".",[30,31,33,34],"h2",{"id":32},"basculer-le-panneau-avec-data-flow-toggle","Basculer le panneau avec ",[21,35,23],{},[14,37,38,39,41],{},"Ajoutez l'attribut ",[21,40,23],{}," à n'importe quel élément HTML. Un clic sur cet élément ouvre le panneau s'il est fermé, et le ferme s'il est ouvert :",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton data-flow-toggle>Discuter avec Flow\u003C\u002Fbutton>\n","html","",[21,50,51],{"__ignoreMap":48},[52,53,56,60,64,68,71,75,78,80],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sMK4o","\u003C",[52,61,63],{"class":62},"swJcz","button",[52,65,67],{"class":66},"spNyl"," data-flow-toggle",[52,69,70],{"class":58},">",[52,72,74],{"class":73},"sTEyZ","Discuter avec Flow",[52,76,77],{"class":58},"\u003C\u002F",[52,79,63],{"class":62},[52,81,82],{"class":58},">\n",[14,84,85],{},"Une application peut ainsi ajouter son propre bouton Flow, par exemple dans une barre d'outils.",[30,87,33,89],{"id":88},"basculer-le-panneau-avec-windowflowtoggle",[21,90,27],{},[14,92,93],{},"La même bascule est exposée en JavaScript :",[43,95,99],{"className":96,"code":97,"language":98,"meta":48,"style":48},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","window.flow.toggle();\n","js",[21,100,101],{"__ignoreMap":48},[52,102,103,106,108,111,113,117,120],{"class":54,"line":55},[52,104,105],{"class":73},"window",[52,107,28],{"class":58},[52,109,110],{"class":73},"flow",[52,112,28],{"class":58},[52,114,116],{"class":115},"s2Zo4","toggle",[52,118,119],{"class":73},"()",[52,121,122],{"class":58},";\n",[14,124,125],{},"Appelez cette fonction depuis un script ou un gestionnaire d'événement personnalisé. Elle est disponible sur les pages qui chargent le lanceur de Flow, dans le Desk et les applications compatibles.",[30,127,129],{"id":128},"points-dattention","Points d'attention",[131,132,133,137,153],"ul",{},[134,135,136],"li",{},"Le panneau s'ancre à droite de la fenêtre et réduit la largeur de la page affichée : ce n'est pas une fenêtre flottante.",[134,138,139,140,143,144,147,148,152],{},"Le panneau se ferme aussi avec le raccourci ",[21,141,142],{},"Ctrl + I"," (",[21,145,146],{},"⌘ + I"," sur macOS), avec le bouton ",[149,150,151],"strong",{},"Flow"," du Desk et avec la croix de l'en-tête du chat.",[134,154,155],{},"Le panneau n'affiche ni la barre latérale des conversations, ni les réglages de Flow ; ces éléments restent accessibles dans l'onglet Flow ouvert en plein écran.",[157,158,159],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":48,"searchDepth":55,"depth":161,"links":162},2,[163,165,167],{"id":32,"depth":161,"text":164},"Basculer le panneau avec data-flow-toggle",{"id":88,"depth":161,"text":166},"Basculer le panneau avec window.flow.toggle()",{"id":128,"depth":161,"text":129},"Ouvrir et fermer le panneau latéral de l'assistant Flow depuis une page, un élément HTML ou un script.","md",{"reviewed":171,"last_verified":172,"sources":173},true,"2026-11-03",[174,175],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Fflow_launcher.bundle.js","dodock@develop:frappe\u002Fflow\u002Flauncher.py","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fpanneau-lateral-flow",{"title":5,"description":168},"2.next\u002F3.dodock\u002F10.developpeurs\u002Fpanneau-lateral-flow","_tE1OqWCLrVYu6yQtcgFFvvSX2gTvpy1bcJ8bWvZevE",{},1793871748400]