Personnaliser les boutons et badges

Dodock propose désormais des helpers pour personnaliser facilement les boutons et badges dans l'interface utilisateur. Ces outils permettent aux développeurs et administrateurs d'améliorer l'expérience utilisateur en adaptant l'apparence des éléments interactifs.

Helpers pour les boutons

Les boutons dans Dodock peuvent être personnalisés avec des styles, des icônes et des comportements spécifiques grâce aux nouveaux helpers.

Styles de boutons

Vous pouvez appliquer différents styles à vos boutons pour indiquer leur fonction ou leur importance :

• Primaire : Pour les actions principales (ex. : Enregistrer, Valider).
• Secondaire : Pour les actions moins prioritaires (ex. : Annuler, Retour).
• Danger : Pour les actions irréversibles (ex. : Supprimer, Archiver).
• Succès : Pour les actions positives (ex. : Approuver, Publier).
• Lien : Pour les actions qui ressemblent à des liens hypertextes.

Icônes sur les boutons

Les boutons peuvent être enrichis avec des icônes pour améliorer leur visibilité et leur compréhension :

// Exemple d'utilisation dans un script client
frappe.ui.form.on('Mon Doctype', {
    refresh(frm) {
        frm.add_custom_button(__('Envoyer'), () => {
            // Action du bouton
        }, 'i-mdi-send', 'btn-primary');
    }
});

Bon à savoir : Utilisez des icônes de la bibliothèque Material Design Icons pour rester cohérent avec l'interface de Dokos.

Boutons avec état de chargement

Pour indiquer qu'une action est en cours de traitement, vous pouvez activer un état de chargement sur les boutons :

// Exemple d'utilisation
let button = frm.add_custom_button(__('Traiter'), () => {
    button.set_working(); // Active l'état de chargement
    frappe.call({
        method: 'ma_methode',
        args: { docname: frm.doc.name },
        callback: (r) => {
            button.done_working(); // Désactive l'état de chargement
        }
    });
});

      
flowchart LR
    A[Clique sur le bouton] --> B[Activation de l'état de chargement]
    B --> C[Exécution de l'action]
    C --> D[Désactivation de l'état de chargement]

    

Helpers pour les badges

Les badges sont des éléments visuels utilisés pour afficher des informations compactes, comme des statuts ou des notifications. Dodock propose des helpers pour créer et personnaliser ces badges.

Styles de badges

Les badges peuvent être personnalisés avec différents styles pour refléter leur signification :

• Primaire : Pour les informations générales.
• Secondaire : Pour les informations moins importantes.
• Succès : Pour les statuts positifs (ex. : Validé, Terminé).
• Avertissement : Pour les statuts nécessitant une attention (ex. : En attente, Brouillon).
• Danger : Pour les statuts critiques (ex. : Annulé, Erreur).

Création de badges

Voici comment créer un badge dans un script client :

// Exemple de création d'un badge
let badge = frappe.ui.add_badge({
    text: __('En attente'),
    color: 'orange',
    icon: 'i-mdi-clock-outline'
});

// Ajouter le badge à un conteneur
frm.get_field('status').$wrapper.append(badge);

Badges dynamiques

Les badges peuvent être mis à jour dynamiquement en fonction des données du document :

frappe.ui.form.on('Mon Doctype', {
    status(frm) {
        let badge_color = frm.doc.status === 'Validé' ? 'green' : 'orange';
        let badge_text = frm.doc.status === 'Validé' ? __('Validé') : __('En attente');
        
        frm.get_field('status').$wrapper.empty();
        frm.get_field('status').$wrapper.append(
            frappe.ui.add_badge({
                text: badge_text,
                color: badge_color,
                icon: frm.doc.status === 'Validé' ? 'i-mdi-check' : 'i-mdi-clock-outline'
            })
        );
    }
});

      
flowchart TD
    A[Changement de statut] --> B[Mise à jour du badge]
    B --> C[Affichage du nouveau badge]

    

Utilisation dans les scripts clients

Les helpers pour boutons et badges sont particulièrement utiles dans les scripts clients pour personnaliser l'interface en fonction des besoins métiers.

Exemple complet

Voici un exemple complet d'utilisation des helpers dans un script client pour un type de document personnalisé :

frappe.ui.form.on('Commande Client', {
    refresh(frm) {
        // Ajout d'un bouton personnalisé
        frm.add_custom_button(__('Envoyer pour validation'), () => {
            frappe.call({
                method: 'ma_methode_de_validation',
                args: { docname: frm.doc.name },
                callback: (r) => {
                    frappe.show_alert({
                        message: __('Commande envoyée pour validation'),
                        indicator: 'green'
                    });
                    frm.reload_doc();
                }
            });
        }, 'i-mdi-send', 'btn-primary');
        
        // Ajout d'un badge dynamique
        let badge_color = frm.doc.workflow_state === 'Validé' ? 'green' : 'orange';
        let badge_text = frm.doc.workflow_state === 'Validé' ? __('Validé') : __('En attente');
        
        frm.get_field('workflow_state').$wrapper.empty();
        frm.get_field('workflow_state').$wrapper.append(
            frappe.ui.add_badge({
                text: badge_text,
                color: badge_color,
                icon: frm.doc.workflow_state === 'Validé' ? 'i-mdi-check' : 'i-mdi-clock-outline'
            })
        );
    }
});

Bonnes pratiques

• Cohérence : Utilisez des styles et icônes cohérents avec le reste de l'interface pour une expérience utilisateur harmonieuse.
• Accessibilité : Assurez-vous que les couleurs des badges et boutons sont accessibles (ex. : contraste suffisant).
• Performance : Évitez de surcharger l'interface avec trop de boutons ou badges, ce qui pourrait nuire à la lisibilité.
• Documentation : Documentez les personnalisations pour faciliter la maintenance et l'évolution du système.