Utiliser les composants d'interface

Le desk dessine ses boutons avec frappe.ui.button. Un bouton écrit à la main (<button class="btn btn-primary">) n'a pas le style Espresso ni ses comportements. Cette page montre comment le remplacer. La liste complète des options est dans la référence des composants Espresso.

Remplacer un bouton

Avant :

<button class="btn btn-primary" onclick="soumettre()">Soumettre</button>

Après :

const $btn = frappe.ui.button({
    label: __("Submit"),
    variant: "solid",
    onclick: () => soumettre(),
});
frm.fields_dict.actions_html.$wrapper.empty().append($btn);

Exemple fictif : actions_html est un champ HTML du formulaire, et soumettre une fonction de votre script.

Correspondance des anciennes classes :

Les icônes sont des noms d'icônes Lucide ("check", "printer"), pas des classes i-mdi-* ni octicon.

Afficher l'état de chargement

Si onclick renvoie une promesse, le bouton affiche un indicateur et ignore les clics jusqu'à la fin de la promesse. Le libellé change pendant ce temps : « Save » devient « Saving... », « Delete » devient « Deleting... », « Submit » devient « Submitting... ». Passez loading_label pour un autre texte.

frappe.ui.button({
    label: __("Traiter les commandes"),
    loading_label: __("Traitement..."),
    variant: "solid",
    onclick: () => frappe.call({ method: "mon_app.api.traiter_commandes" }),
});

Exemple fictif : mon_app.api.traiter_commandes est une méthode de votre application.

Bouton avec seulement une icône

Un bouton sans libellé est carré. Donnez-lui tooltip : le texte sert aussi d'aria-label pour les lecteurs d'écran.

frappe.ui.button({
    icon: "printer",
    variant: "ghost",
    tooltip: __("Print"),
    onclick: () => frm.print_doc(),
});

Générer le HTML d'une liste de boutons

Dans une vue construite en chaînes HTML, utilisez frappe.ui.button.html(opts). Cette forme n'attache pas de gestionnaire : liez le clic avec une délégation d'événement.

const html = rows.map((row) =>
    frappe.ui.button.html({ label: __("Open"), size: "xs", attrs: { "data-name": row.name } })
).join("");
$container.html(html).on("click", ".es-button", (e) => frappe.set_route("Form", "ToDo", $(e.currentTarget).attr("data-name")));

Le libellé et les attributs sont échappés. Les attributs on* sont refusés.

Pour appliquer le style Espresso à un bouton qui existe déjà, utilisez frappe.ui.button.dress(element, opts).