Member Junction
    Preparing search index...

    Configuration for registering or customizing a form toolbar item (action button).

    Supports dynamic predicates for visibility, enabled/disabled state (with optional disabled reason tooltips), badges, and async click handlers.

    interface FormToolbarItemConfig {
        Badge?:
            | string
            | number
            | ((record: BaseEntity) => string | number | null | undefined);
        CssClass?: string;
        Description?: string;
        Disabled?:
            | string
            | boolean
            | ((record: BaseEntity, editMode: boolean) => string | boolean);
        Icon?: string;
        IsLoading?: boolean | ((record: BaseEntity, editMode: boolean) => boolean);
        Key: string;
        MenuLabel?: string;
        Mode?: ToolbarItemMode;
        OnClick?: (event: FormToolbarItemClickEventArgs) => void | Promise<void>;
        Order?: number;
        Pinnable?: boolean;
        Placement?: ToolbarItemPlacement;
        Text?: string;
        Variant?: ToolbarItemVariant;
        Visible?: boolean | ((record: BaseEntity, editMode: boolean) => boolean);
    }
    Index

    Properties

    Badge?:
        | string
        | number
        | ((record: BaseEntity) => string | number | null | undefined)

    Optional badge count or text (e.g. "v3", 5).

    CssClass?: string

    Optional custom CSS class name to append to the button element.

    Description?: string

    Tooltip text shown on hover when enabled.

    Disabled?:
        | string
        | boolean
        | ((record: BaseEntity, editMode: boolean) => string | boolean)

    Whether the button is disabled. Can be:

    • boolean: true = disabled, false = enabled
    • string: disabled, and the string is used as the tooltip explaining why (e.g. "Save draft changes first")
    • predicate function: returning boolean or reason string Default: false.
    Icon?: string

    FontAwesome icon class (e.g. "fa-solid fa-check-double", "fa-solid fa-calculator").

    IsLoading?: boolean | ((record: BaseEntity, editMode: boolean) => boolean)

    Whether to display a loading spinner on the button while an operation is in progress.

    Key: string

    Unique identifier for this toolbar item (e.g. 'confirm-order', 'post', 'edit').

    MenuLabel?: string

    Label for the item in the toolbar's More menu. Defaults to Text, then Description.

    In which mode(s) this button should appear. Default: 'read'.

    OnClick?: (event: FormToolbarItemClickEventArgs) => void | Promise<void>

    Handler function invoked when the button is clicked.

    Order?: number

    Numeric sort order within its placement group. Lower numbers appear first. Standard built-in items default to:

    • edit: 10
    • delete: 20
    • favorite: 30
    • history: 40
    • list: 50
    • tags: 60
    • attachments: 70 Custom action items default to 100 unless specified (e.g. 5 to appear before Edit).

    In read mode the toolbar renders inline items (Edit and non-pinnable custom items) first, in Order, then the user's pinned items in the order they were pinned; Order also sorts the More menu. So a custom inline item with the default 100 sits after Edit and before the pins.

    Pinnable?: boolean

    Whether the item takes part in per-user pinning: shown as a button only when the user pins it, otherwise listed in the More menu. Built-in items (except Edit) are pinnable. Custom items default to false and always render inline, so app-specific actions stay in view. Inline items render before pinned ones regardless of Order (see Order).

    Placement group in the toolbar. Default: 'actions'.

    Text?: string

    Optional button label text (e.g. "Confirm Order").

    Visual styling variant. Default: 'default' (or 'primary' for key actions).

    Visible?: boolean | ((record: BaseEntity, editMode: boolean) => boolean)

    Whether the button is visible. Can be a boolean or a reactive predicate function. Default: true.