Toasts & confirmation messages

Lagoon toasts display brief, non-blocking feedback: success, information, warning, or error. They are not a public component to place on a page; they are triggered by methods inherited from LgComponentBase, and therefore available in LgPage and Lagoon components.

Demonstration

Try it in the Lagoon showcase.

Display a toast

The following methods exist on LgComponentBase and delegate to the public methods of 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)

Use the string overloads with translation keys #.... The MarkupString overloads send HTML content without escaping.

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
{
    // Confirms to the user that the requested operation completed successfully.
    private Task ShowSuccessToastAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderSaved", "#OperationCompletedTitle");
        return Task.CompletedTask;
    }

    // Provides neutral information without interrupting the user journey.
    private Task ShowInformationToastAsync(ActionEventArgs args)
    {
        ShowInformation("#SynchronizationStarted");
        return Task.CompletedTask;
    }

    // Signals a situation to monitor, but not blocking.
    private Task ShowWarningToastAsync(ActionEventArgs args)
    {
        ShowWarning("#QuotaAlmostReached", "#WarningTitle");
        return Task.CompletedTask;
    }

    // Displays an explicit business error when the action cannot proceed.
    private Task ShowErrorToastAsync(ActionEventArgs args)
    {
        ShowError("#OrderSaveFailed", "#ErrorTitle");
        return Task.CompletedTask;
    }
}

Options (duration, position, ...)

Global options are carried by ApplicationBehavior.Toastr, of type LgToastrOptions. They are initialized on the first layout render.

Main.cs
public partial class Main : LgCustomApplication
{
    // Configures the global options used by all toasts in the application.
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        app.Toastr.Position = Position.TopRight;
        app.Toastr.TimeOut = 5000;
        app.Toastr.ProgressBar = true;
    }
}

Name	Type	Default	Description
`CloseButton`	`bool`	`true`	Shows a close button.
`Debug`	`bool`	`false`	Enables the toast library's debug mode.
`NewestOnTop`	`bool`	`false`	Displays new messages above previous ones.
`ProgressBar`	`bool`	`true`	Shows a progress bar during the display duration.
`PreventDuplicates`	`bool`	`false`	Prevents displaying two messages with the same content simultaneously.
`Position`	`Position`	`Position.TopRight`	Defines the location of toasts.
`PositionClass`	`string`	`"toast-top-right"`	Exposes the CSS class calculated from the position.
`Onclick`	`string`	`null`	Name of JavaScript callback invoked on toast click.
`ShowDuration`	`int`	`300`	Duration of the appearance animation in milliseconds.
`HideDuration`	`int`	`1000`	Duration of the disappearance animation in milliseconds.
`TimeOut`	`int`	`5000`	Delay before automatic closure of non-error messages.
`ExtendedTimeOut`	`int`	`1000`	Delay before closure after hover.
`ShowEasing`	`string`	`"swing"`	CSS easing function for appearance.
`HideEasing`	`string`	`"linear"`	CSS easing function for disappearance.
`ShowMethod`	`string`	`"fadeIn"`	Animation used on appearance.
`HideMethod`	`string`	`"fadeOut"`	Animation used on disappearance.

info

Error toasts use an internal option that sets TimeOut to 0 to prevent automatic closure after a delay.

Confirmation messages

To request a confirmation from a page or component, use the public method inherited from LgComponentBase.

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

LgApplication also exposes the internal methods used by the framework to display the confirmation modal.

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

The result of the confirmation is handled by callback: the confirmation callback is executed when the user validates the modal.

DeleteOrderPage.razor
<LgButton Text="#DeleteOrder" OnClick="AskDeleteConfirmationAsync" />

DeleteOrderPage.razor.cs
public partial class DeleteOrderPage : LgPage
{
    // Opens the confirmation before executing a destructive action.
    private Task AskDeleteConfirmationAsync(ActionEventArgs args)
    {
        ShowConfirm("#DeleteOrderConfirmation", DeleteOrderAsync, "#DeleteOrderTitle");
        return Task.CompletedTask;
    }

    // Executed only after validation of the confirmation modal.
    private Task DeleteOrderAsync()
    {
        ShowSuccess("#OrderDeleted");
        return Task.CompletedTask;
    }
}

For a simple button, the ConfirmationMessage property of LgButton also triggers a confirmation before OnClick.

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

DeleteOrderButton.razor.cs
public partial class DeleteOrderButton : LgComponentBase
{
    // Deletes the item only after the button-provided confirmation.
    private Task DeleteOrderAsync(ActionEventArgs args)
    {
        ShowSuccess("#OrderDeleted");
        return Task.CompletedTask;
    }
}

Exception handling

ShowException is available on LgComponentBase and on LgApplication.

public void ShowException(Exception ex)

The method ignores LgValidationException, ignores TaskCanceledException, unwinds AggregateException, triggers a reconnection request for LgHttpAuthenticationException, logs other exceptions, then displays an error toast with the contact administrator message.

SaveOrderPage.razor.cs
public partial class SaveOrderPage : LgPage
{
    // Wraps the user action to apply the Lagoon convention for UI error handling.
    private async Task SaveOrderAsync(ActionEventArgs args)
    {
        try
        {
            await SaveOrderOnServerAsync(args.CancellationToken);
            ShowSuccess("#OrderSaved");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }

    // Represents the application call that may raise an exception.
    private Task SaveOrderOnServerAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }
}

Associated enumerations

Position

Value	Description
`TopLeft`	Displays toasts at the top left.
`TopRight`	Displays toasts at the top right.
`BottomLeft`	Displays toasts at the bottom left.
`BottomRight`	Displays toasts at the bottom right.
`TopCenter`	Displays toasts at the top center.
`BottomCenter`	Displays toasts at the bottom center.

Demonstration​

Display a toast​

Options (duration, position, ...)​

Confirmation messages​

Exception handling​

Associated enumerations​

Position​

See also​