LgSummaryBox

LgSummaryBox displays a long text on a single line (truncated) and opens a modal window to edit it, in a multiline text area or an HTML editor. The input is applied to the bound value only upon validation by the modal's "Save" button.

<LgSummaryBox Label="#Comment" @bind-Value="_model.Comment" />

Namespace: Lagoon.UI.Components
Inherits from: LgInputRenderBase<string> → LgInputBase<string> → LgAriaComponentBase → LgComponentBase
NuGet package: Lagoon.UI

The standard field reset button (ResetButton) is never displayed: reset is performed through the modal's "Clear" button.

Usage

Demonstration

Try this component in the Lagoon showcase.

Clicking on the field (or pressing Enter when it has focus) opens the modal. ModalTitle replaces the Label as the title and ModalSize sets the window size. If the user closes the modal with unsaved changes, they are asked for confirmation.

ReportPage.razor
<LgSummaryBox Label="#Summary"
              ModalTitle="#EditSummary"
              ModalSize="ModalSize.ExtraLarge"
              TextareaHeight="300"
              MaxLength="2000"
              @bind-Value="_model.Summary" />

ReportPage.razor.cs
public partial class ReportPage : LgPage
{
    private readonly ReportVm _model = new();

    private sealed class ReportVm
    {
        public string Summary { get; set; }
    }
}

Opening on focus and multiline display

OpenOnFocus opens the modal as soon as the field receives focus (useful in a keyboard navigation flow). WrapContent displays the value on multiple lines instead of truncating it.

NotePage.razor
<LgSummaryBox Label="#Note"
              OpenOnFocus="true"
              WrapContent="true"
              OnOpen="OnNoteOpen"
              OnClose="OnNoteClose"
              @bind-Value="_model.Note" />

NotePage.razor.cs
public partial class NotePage : LgPage
{
    private readonly NoteVm _model = new();

    // Triggered when the modal opens: useful for logging or loading a context.
    private void OnNoteOpen()
    {
        ShowInformation("#NoteOpened");
    }

    // Triggered when the modal closes (after validation or cancel).
    private void OnNoteClose()
    {
        ShowInformation("#NoteClosed");
    }

    private sealed class NoteVm
    {
        public string Note { get; set; }
    }
}

HTML editor

UseHtmlEditor="true" replaces the text area with an HTML editor (LgHtmlEditor); the bound value then contains HTML, rendered as-is in the field. HtmlEditorButtons restricts the toolbar buttons.

DescriptionPage.razor
<LgSummaryBox Label="#Description"
              UseHtmlEditor="true"
              HtmlEditorButtons="_editorButtons"
              @bind-Value="_model.DescriptionHtml" />

DescriptionPage.razor.cs
public partial class DescriptionPage : LgPage
{
    // Reduced toolbar: only authorized enhancements are offered.
    private readonly List<string> _editorButtons = new() { "bold", "italic", "underline", "ul", "ol" };

    private readonly DescriptionVm _model = new();

    private sealed class DescriptionVm
    {
        public string DescriptionHtml { get; set; }
    }
}

Cancel a value change

OnChangingAsync is called when the modal is validated, before the new value is assigned, and allows you to cancel it (args.Cancel).

JustificationPage.razor
<LgSummaryBox Label="#Justification"
              OnChangingAsync="OnJustificationChangingAsync"
              @bind-Value="_model.Justification" />

JustificationPage.razor.cs
public partial class JustificationPage : LgPage
{
    private readonly JustificationVm _model = new();

    // Called before assignment: enforces minimum content at save.
    private Task OnJustificationChangingAsync(ChangingEventArgs<string> args)
    {
        if (string.IsNullOrWhiteSpace(args.NewValue) || args.NewValue.Length < 20)
        {
            args.Cancel = true;
            ShowWarning("#JustificationTooShort");
        }
        return Task.CompletedTask;
    }

    private sealed class JustificationVm
    {
        public string Justification { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
`HtmlEditorButtons`	`List<string>`	`null`	`LgSummaryBox`	Toolbar buttons for the HTML editor. If `null`, the full toolbar is displayed.
`MaxLength`	`int?`	`null`	`LgSummaryBox`	Maximum number of characters entered.
`ModalSize`	`ModalSize`	`Large`	`LgSummaryBox`	Size of the editing modal window.
`ModalTitle`	`string`	`null`	`LgSummaryBox`	Modal title. If `null`, the field's `Label` is used.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	`null`	`LgSummaryBox`	Callback called before the value changes; the change can be cancelled there.
`OnClose`	`EventCallback`	—	`LgSummaryBox`	Callback called when the modal closes.
`OnFocus`	`EventCallback<FocusEventArgs>`	—	`LgSummaryBox`	Callback called when focus is received.
`OnKeyUp`	`EventCallback<KeyboardEventArgs>`	—	`LgSummaryBox`	Callback called when a key is released.
`OnOpen`	`EventCallback`	—	`LgSummaryBox`	Callback called when the modal opens.
`OpenOnFocus`	`bool`	`false`	`LgSummaryBox`	Opens the modal as soon as the field receives focus.
`Placeholder`	`string`	`null`	`LgSummaryBox`	Hint text displayed when the field is empty.
`TextareaHeight`	`int`	`0`	`LgSummaryBox`	Height of the modal text area, in pixels.
`UseHtmlEditor`	`bool`	`false`	`LgSummaryBox`	Replaces the text area with an HTML editor.
`WrapContent`	`bool`	`false`	`LgSummaryBox`	Displays the value on multiple lines instead of truncating it.
`Prefix`	`string`	`null`	`LgInputRenderBase`	Prefix displayed in the field.
`PrefixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Type of the prefix.
`Suffix`	`string`	`null`	`LgInputRenderBase`	Suffix displayed in the field.
`SuffixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Type of the suffix.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Additional HTML attributes applied to the rendered element.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Gives focus to the field on first render.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Confirmation message displayed before applying a value change.
`Container`	`IInputContainer<string>`	`null`	`LgInputBase`	Internal use: attaches a GridView cell to the field.
`CssClass`	`string`	`null`	`LgInputBase`	Additional CSS classes.
`Disabled`	`bool`	`false`	`LgInputBase`	Disables the field.
`DisplayName`	`string`	`null`	`LgInputBase`	Field name used in error messages.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Hides the validation message below the field.
`Label`	`string`	`null`	`LgInputBase`	Field label.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Custom content for the label area.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called after the value changes.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called on reset (no effect here, the standard reset button is not displayed).
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy required to edit the field.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy required to display the field.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Displays the value as read-only (the modal remains readable).
`Required`	`bool?`	`null`	`LgInputBase`	Required field. If `null`, inferred from the `[Required]` attribute of the bound property.
`ResetButton`	`bool?`	`null`	`LgInputBase`	No effect: the standard reset button is never displayed by this component.
`ResetText`	`string`	`null`	`LgInputBase`	Text for the reset button (no effect here).
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Accessible label for the reset button (no effect here).
`Tooltip`	`string`	`null`	`LgInputBase`	Tooltip.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indicates whether the `Tooltip` content is in HTML format (otherwise plain text).
`Value`	`string`	`null`	`LgInputBase`	Bound value (`@bind-Value`).
`ValueChanged`	`EventCallback<string>`	—	`LgInputBase`	Callback to update the bound value.
`ValueExpression`	`Expression<Func<string>>`	—	`LgInputBase`	Expression identifying the bound property.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-label` attribute.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-labelledby` attribute.

Cascading parameters

LgSummaryBox also consumes parameters automatically provided by ancestor components (you do not need to set them): ParentAuthorizeView (LgAuthorizeView) and the edit context of a parent LgEditForm.

Events

Event	Type	Description
`OnOpen`	`EventCallback`	When the edit modal opens.
`OnClose`	`EventCallback`	When the edit modal closes.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	Before the new value is assigned; `args.Cancel = true` cancels it.
`OnChange`	`EventCallback<ChangeEventArgs>`	After the new value is assigned.
`OnKeyUp`	`EventCallback<KeyboardEventArgs>`	When a key is released on the field.
`OnFocus`	`EventCallback<FocusEventArgs>`	When the field receives focus.

Best practices / accessibility

Reserve UseHtmlEditor for truly enriched content: the bound value then contains HTML that must be sanitized before any other use.
For a short multiline text, editable in place, prefer LgTextBox with TextMode="TextBoxMode.Multiline".

Complete reference

All parameters (including inherited ones): API reference — LgSummaryBox.

LgTextBox — text input (multiline mode in place).
LgHtmlEditor — HTML editor used by UseHtmlEditor mode.
LgModal — modal window used for editing.
LgGridSummaryColumn — "summary" column of an LgGridView.

Usage​

Demonstration​

Modal editing​

Opening on focus and multiline display​

HTML editor​

Cancel a value change​

Properties​

Events​

Best practices / accessibility​

Related components​