Personnalisation des onglets dans les formulaires

Cette page concerne les formulaires Vue construits avec FormLayout. Pour les onglets des formulaires du desk, utilisez les propriétés du DocType ou frm.set_df_property sur le champ Saut d'onglet.

Identité d'un onglet

FormLayout désigne chaque onglet par une identité stable, pas par sa position :

1. le name de l'onglet, s'il existe ;
2. sinon, le libellé en minuscules, où chaque suite de caractères autres que a-z et 0-9 devient un tiret (Comptabilité donne comptabilit, Détails donne d-tails) ;
3. sinon, la position (tab-1, tab-2…).

Deux onglets avec la même identité reçoivent un suffixe : details, details-2. Les caractères accentués donnent des identités peu lisibles : donnez un name à vos onglets. L'identité ne change pas si un onglet voisin apparaît ou disparaît, ni si vous changez le libellé avec une surcharge.

Avec plusieurs onglets visibles, un onglet sans libellé s'affiche « Details ».

Masquer ou renommer un onglet

Un onglet accepte trois moyens de contrôle, appliqués dans cet ordre :

Exemple fictif : masquer l'onglet des paiements quand le client n'a pas d'encours.

const layout = computed(() =>
    baseLayout.map((tab) =>
        tab.name === "paiements"
            ? { ...tab, override: { hidden: doc.value.outstanding_amount === 0 } }
            : tab
    )
);

Une surcharge { hidden: false } affiche un onglet que dependsOn masquerait.

Suivre l'onglet affiché

Si l'onglet choisi est masqué, FormLayout affiche le premier onglet visible. La valeur de v-model:tab ne change pas. Quand l'onglet choisi redevient visible, FormLayout y revient.

<FormLayout
    :layout="layout"
    v-model:doc="doc"
    v-model:tab="ongletChoisi"
    @update:activeTab="(id) => (ongletAffiche = id)"
/>

Gardez ongletChoisi dans un ref du composant parent pour que l'utilisateur retrouve son onglet après un rechargement du formulaire, par exemple après un enregistrement.