Toasts & messages de confirmation

Les toasts Lagoon affichent des retours brefs et non bloquants : succès, information, avertissement ou erreur. Ils ne sont pas un composant public à placer dans une page ; ils sont déclenchés par des méthodes héritées de LgComponentBase, donc disponibles dans LgPage et les composants Lagoon.

Démonstration

Essayez dans le showcase Lagoon.

Afficher un toast

Les méthodes suivantes existent sur LgComponentBase et délèguent aux méthodes publiques de LgApplication.

public void ShowSuccess(string message, string title = null)
public void ShowSuccess(MarkupString message, MarkupString? title = null)
public void ShowInformation(string message, string title = null)
public void ShowInformation(MarkupString message, MarkupString? title = null)
public void ShowWarning(string message, string title = null)
public void ShowWarning(MarkupString message, MarkupString? title = null)
public void ShowError(string message, string title = null)
public void ShowError(MarkupString message, MarkupString? title = null)

Utilisez les surcharges string avec des clés de traduction #.... Les surcharges MarkupString envoient le contenu HTML sans échappement.

FeedbackPage.razor

<LgButton Text="#ShowSuccessToast" OnClick="ShowSuccessToastAsync" />
<LgButton Text="#ShowInformationToast" OnClick="ShowInformationToastAsync" />
<LgButton Text="#ShowWarningToast" OnClick="ShowWarningToastAsync" />
<LgButton Text="#ShowErrorToast" OnClick="ShowErrorToastAsync" />

FeedbackPage.razor.cs

public partial class FeedbackPage : LgPage
{
    // Confirme à l'utilisateur que l'opération demandée s'est terminée correctement.
    private Task ShowSuccessToastAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderSaved", "#OperationCompletedTitle");
        return Task.CompletedTask;
    }

    // Donne une information neutre sans interrompre le parcours utilisateur.
    private Task ShowInformationToastAsync(ActionEventArgs args)
    {
        ShowInformation("#SynchronizationStarted");
        return Task.CompletedTask;
    }

    // Signale une situation à surveiller, mais non bloquante.
    private Task ShowWarningToastAsync(ActionEventArgs args)
    {
        ShowWarning("#QuotaAlmostReached", "#WarningTitle");
        return Task.CompletedTask;
    }

    // Affiche une erreur métier explicite lorsque l'action ne peut pas aboutir.
    private Task ShowErrorToastAsync(ActionEventArgs args)
    {
        ShowError("#OrderSaveFailed", "#ErrorTitle");
        return Task.CompletedTask;
    }
}

Options (durée, position, ...)

Les options globales sont portées par ApplicationBehavior.Toastr, de type LgToastrOptions. Elles sont initialisées au premier rendu du layout.

Main.cs

public partial class Main : LgCustomApplication
{
    // Configure les options globales utilisées par tous les toasts de l'application.
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        app.Toastr.Position = Position.TopRight;
        app.Toastr.TimeOut = 5000;
        app.Toastr.ProgressBar = true;
    }
}

Nom	Type	Défaut	Description
CloseButton	bool	true	Affiche un bouton de fermeture.
Debug	bool	false	Active le mode de débogage de la bibliothèque de toast.
NewestOnTop	bool	false	Affiche les nouveaux messages au-dessus des précédents.
ProgressBar	bool	true	Affiche une barre de progression pendant la durée d'affichage.
PreventDuplicates	bool	false	Évite d'afficher simultanément deux messages de même contenu.
Position	Position	Position.TopRight	Définit l'emplacement des toasts.
PositionClass	string	"toast-top-right"	Expose la classe CSS calculée à partir de la position.
Onclick	string	null	Nom de callback JavaScript appelé au clic sur un toast.
ShowDuration	int	300	Durée de l'animation d'apparition en millisecondes.
HideDuration	int	1000	Durée de l'animation de disparition en millisecondes.
TimeOut	int	5000	Délai avant fermeture automatique des messages non erreur.
ExtendedTimeOut	int	1000	Délai avant fermeture après survol.
ShowEasing	string	"swing"	Fonction CSS d'assouplissement pour l'apparition.
HideEasing	string	"linear"	Fonction CSS d'assouplissement pour la disparition.
ShowMethod	string	"fadeIn"	Animation utilisée à l'apparition.
HideMethod	string	"fadeOut"	Animation utilisée à la disparition.

info

Les toasts d'erreur utilisent une option interne qui fixe TimeOut à 0 pour éviter la fermeture automatique après délai.

Messages de confirmation

Pour demander une confirmation depuis une page ou un composant, utilisez la méthode publique héritée de LgComponentBase.

public void ShowConfirm(string confirmationMessage, Func<Task> callback, string title = null)

LgApplication expose aussi les méthodes internes utilisées par le framework pour afficher la modale de confirmation.

internal Task ShowConfirmAsync(string confirmationMessage, Func<Task> confirmCallback, string title = "")
internal Task ShowConfirmAsync(string confirmationMessage, Func<Task> confirmCallback, Func<Task> cancelCallback, string title = "")

Le résultat de la confirmation est géré par callback : le callback de confirmation est exécuté lorsque l'utilisateur valide la modale.

DeleteOrderPage.razor

<LgButton Text="#DeleteOrder" OnClick="AskDeleteConfirmationAsync" />

DeleteOrderPage.razor.cs

public partial class DeleteOrderPage : LgPage
{
    // Ouvre la confirmation avant d'exécuter une action destructive.
    private Task AskDeleteConfirmationAsync(ActionEventArgs args)
    {
        ShowConfirm("#DeleteOrderConfirmation", DeleteOrderAsync, "#DeleteOrderTitle");
        return Task.CompletedTask;
    }

    // Exécuté uniquement après validation de la modale de confirmation.
    private Task DeleteOrderAsync()
    {
        ShowSuccess("#OrderDeleted");
        return Task.CompletedTask;
    }
}

Pour un bouton simple, la propriété ConfirmationMessage de LgButton déclenche également une confirmation avant OnClick.

DeleteOrderButton.razor

<LgButton Text="#DeleteOrder"
          ConfirmationMessage="#DeleteOrderConfirmation"
          OnClick="DeleteOrderAsync" />

DeleteOrderButton.razor.cs

public partial class DeleteOrderButton : LgComponentBase
{
    // Supprime l'élément seulement après la confirmation portée par le bouton.
    private Task DeleteOrderAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderDeleted");
        return Task.CompletedTask;
    }
}

Gestion des exceptions

ShowException est disponible sur LgComponentBase et sur LgApplication.

public void ShowException(Exception ex)

La méthode ignore les LgValidationException, ignore les TaskCanceledException, déroule les AggregateException, déclenche une demande de reconnexion pour LgHttpAuthenticationException, trace les autres exceptions puis affiche un toast d'erreur avec le message de contact administrateur.

SaveOrderPage.razor.cs

public partial class SaveOrderPage : LgPage
{
    // Encadre l'action utilisateur pour appliquer la convention Lagoon de gestion d'erreurs UI.
    private async Task SaveOrderAsync(ActionEventArgs args)
    {
        try
        {
            await SaveOrderOnServerAsync(args.CancellationToken);
            ShowSuccess("#OrderSaved");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }

    // Représente l'appel applicatif susceptible de lever une exception.
    private Task SaveOrderOnServerAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }
}

Énumérations associées

Position

Valeur	Description
TopLeft	Affiche les toasts en haut à gauche.
TopRight	Affiche les toasts en haut à droite.
BottomLeft	Affiche les toasts en bas à gauche.
BottomRight	Affiche les toasts en bas à droite.
TopCenter	Affiche les toasts en haut au centre.
BottomCenter	Affiche les toasts en bas au centre.

Voir aussi

• LgBigMessage — message pleine page ou état bloquant.
• LgEmptyMessage — message pour les zones sans données.
• Banner — information persistante dans l'interface.
• Notifications — retours utilisateur asynchrones.