Personnalisation des onglets dans les formulaires

Dokos vous permet de personnaliser dynamiquement les onglets affichés dans vos formulaires en fonction de règles métiers spécifiques. Cette fonctionnalité est particulièrement utile pour :

• Masquer des onglets non pertinents pour certains utilisateurs
• Renommer des onglets pour les adapter à votre terminologie interne
• Contrôler l'onglet actif par défaut selon le contexte

Configuration des overrides d'onglets

Les overrides d'onglets fonctionnent de manière similaire aux overrides de champs et s'appliquent après la résolution du layout du formulaire.

Syntaxe de base

{
  "overrides": {
    "tab": {
      "Nom de l'onglet": {
        "hidden": 1,
        "label": "Nouveau libellé"
      }
    }
  }
}

Exemple pratique

Scénario : Dans le formulaire Client, vous souhaitez masquer l'onglet "Comptabilité" pour les clients de type "Particulier" et renommer l'onglet "Détails" en "Informations principales".

1. Créez un script client pour le DocType "Client" :

frappe.ui.form.on('Client', {
  refresh(frm) {
    if (frm.doc.type_client === "Particulier") {
      frm.set_df_property('tab', 'hidden', 1, 'Comptabilité');
      frm.set_df_property('tab', 'label', "Informations principales", 'Détails');
    }
  }
});

2. Le résultat :

• Pour un client professionnel : tous les onglets sont visibles
• Pour un client particulier : l'onglet Comptabilité est masqué et l'onglet Détails est renommé

      
flowchart TD
    A[Ouverture formulaire Client] --> B{Type client ?}
    B -->|Professionnel| C[Afficher tous les onglets]
    B -->|Particulier| D[Masquer Comptabilité
Renommer Détails]

    

Contrôle de l'onglet actif

La nouvelle propriété update:activeTab vous permet de connaître l'onglet effectivement affiché après résolution des règles de visibilité.

Cas d'usage

Scénario : Vous souhaitez afficher un message d'avertissement uniquement lorsque l'utilisateur consulte l'onglet "Commandes" d'un fournisseur.

frappe.ui.form.on('Fournisseur', {
  onload(frm) {
    frm.on('update:activeTab', (tabIdentity) => {
      if (tabIdentity === "Commandes") {
        frappe.show_alert({
          message: "Vérifiez les délais de livraison avant toute nouvelle commande",
          indicator: 'orange'
        });
      }
    });
  }
});

Bonnes pratiques

1. Identité des onglets : L'identité d'un onglet est déterminée par son libellé d'origine. Si vous renommez un onglet, son identité reste inchangée pour les références dans le code.
2. Règles de dépendance : Les overrides s'appliquent après la résolution des depends_on, ce qui permet à une règle show() de lever un masquage conditionnel.
3. Consistance : Utilisez la fonction tabStripLabel pour obtenir le libellé affiché d'un onglet et maintenir la cohérence avec l'interface.

const displayedLabel = frappe.ui.form.tabStripLabel(frm, "Détails");

4. Tests : Vérifiez toujours le comportement avec différents jeux de données pour vous assurer que les règles s'appliquent comme prévu.

Exemple complet avec données demo

Configuration pour le formulaire Fournisseur "Bureau Moderne" :

1. Masquer l'onglet "Comptabilité" si le fournisseur n'a pas de compte bancaire enregistré
2. Renommer l'onglet "Détails" en "Informations générales"
3. Afficher un message lorsque l'onglet "Produits" est actif

frappe.ui.form.on('Fournisseur', {
  refresh(frm) {
    // 1. Masquer Comptabilité si pas de compte bancaire
    if (!frm.doc.account) {
      frm.set_df_property('tab', 'hidden', 1, 'Comptabilité');
    }

    // 2. Renommer l'onglet Détails
    frm.set_df_property('tab', 'label', "Informations générales", 'Détails');

    // 3. Message pour l'onglet Produits
    frm.on('update:activeTab', (tabIdentity) => {
      if (tabIdentity === "Produits") {
        frappe.show_alert({
          message: `Ce fournisseur propose ${frm.doc.items_distributed || 0} produits dans notre catalogue`,
          indicator: 'blue'
        });
      }
    });
  }
});

::: tip Pour les formulaires complexes, envisagez de créer des scripts séparés pour chaque règle métier afin de faciliter la maintenance. :::

::: warning Les overrides d'onglets ne fonctionnent pas dans les vues de type PanelLayout (comme les panneaux latéraux), où tous les champs sont affichés en liste continue. :::