Member Junction
    Preparing search index...

    Class MjFormFieldComponent

    Modern form field component that renders entity fields in both read-only and edit modes.

    Read mode: Clean text display with optional hyperlinks (email, URL, record). Edit mode: Native HTML inputs with custom-built select and autocomplete components.

    Uses:

    • Native <input> for text, number, date
    • Custom styled dropdown for value list selections
    • Custom autocomplete with floating dropdown for foreign key search
    • Custom-styled <input type="checkbox"> for booleans

    All navigation (clicking FK links, email links, URL links) is emitted as events.

    <mj-form-field
      [Record]="record"
      [EditMode]="editMode"
      FieldName="CustomerName"
      Type="textbox"
      [FormContext]="formContext"
      (Navigate)="onNavigate($event)"
      (ValueChange)="onValueChange($event)">
    </mj-form-field>

    Hierarchy (View Summary)

    Implements

    • OnChanges
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    AllowFKCreate DisplayNameOverride DropdownLeft DropdownMaxWidth DropdownMinWidth DropdownTop EditMode FieldName FKActiveIndex FKColumnFields FKColumnHeaders FKCreatePresentation FKDropdownMaxWidth FKFocused FKHasIconColumn FKHighlightMatches FKIsMatched FKLoading FKNameField FKNoMatches FKSearchableFields FKSearchField FKSearchFieldLabel FKSelectedSuggestion FKShowScopeMenu FKSortDir FKSortField FKSuggestions FormContext? HideWhenEmptyInReadOnlyMode LinkType Navigate OpenAbove PossibleValuesOverride Provider Record ShowFKDropdown ShowLabel ShowSelectDropdown ShowValueListDropdown ValueChange ɵdir ɵfac

    Accessors

    _deprecatedFormContext _deprecatedRecord CanCreateFK CodeEditorLanguage DateInputValue DisplayErrors DisplayName DisplayWarnings DropdownPositionStyle EditRichTextMode FieldErrors FieldInfo FilteredPossibleValues FKCreateLabel FKDisplayName FKGridTemplateColumns FKHasLinkedValue FKHasOtherSearchableFields FKSearchText HasRelatedEntity HighlightedDisplayName IsDirty IsFieldReadOnly IsFKWithNameField IsLongText IsRequired IsRequiredEmpty IsRichTextEligible PossibleValues ProviderToUse RecordLinksEnabled RichTextMode RunQueryToUse RunReportToUse RunViewToUse ShouldHideField ShowErrors ShowValidation ShowWarnings Type Value

    Methods

    CanMoveFKColumnDown CanMoveFKColumnUp CanToggleFKColumn FKCellFor FKColumnFillsTrack FKSortIcon FormatValue IsFKColumnVisible IsFKRowSelected IsFKScopeActive MoveFKColumn ngOnChanges ngOnDestroy OnCheckboxChange OnCodeEditorChange OnDateChange OnEmailLinkClick OnFKBlur OnFKClearClick OnFKColResizeStart OnFKColumnToggle OnFKCreateNew OnFKFocus OnFKHeaderSort OnFKInput OnFKKeydown OnFKScopeSelect OnFKScopeToggle OnFKSelectItem OnFKSortToggle OnInputChange OnNumberChange OnRecordLinkClick OnSelectOptionClick OnSelectTriggerBlur OnSelectTriggerClick OnUrlLinkClick OnValueListBlur OnValueListFocus OnValueListInput OnValueListSelect

    Constructors

    Properties

    AllowFKCreate: boolean = true

    Whether to offer inline "create new" for the related record when the one you need isn't found. The affordance only renders when this is true AND the current user can create records of the related entity (entity allows creation + role permits it).

    DisplayNameOverride: string = ''

    Override display name (defaults to entity field metadata DisplayName)

    DropdownLeft: number = 0
    DropdownMaxWidth: number = 0
    DropdownMinWidth: number = 0

    Computed: dropdown is at least the trigger width, at most DropdownMaxWidth.

    DropdownTop: number = 0

    Calculated position for fixed-position dropdowns

    EditMode: boolean = false

    Whether the form is in edit mode

    FieldName: string = ''

    The field code name (must match a field on the entity)

    FKActiveIndex: number = -1

    Index of the keyboard-highlighted active suggestion (-1 = none).

    FKColumnFields: string[] = []

    Field code names for the extra columns, index-aligned with FKColumnHeaders.

    FKColumnHeaders: string[] = []

    Headers for the extra (DefaultInView) columns shown in the dropdown.

    FKCreatePresentation: "dialog" | "slide-in" = 'dialog'

    Surface used for the inline create form: a modal dialog (default) or a slide-in.

    FKDropdownMaxWidth: number | null = null

    Max width (px) of the FK suggestion dropdown. The panel grows to fit its columns up to this cap (then scrolls horizontally). When null, defaults to 2× the trigger width so multi-column rows aren't cramped by a narrow field. Always additionally bounded by the viewport's right edge.

    FKFocused: boolean = false

    Whether the FK input is focused — the scope pill only appears while focused.

    FKHasIconColumn: boolean = false

    Whether rows render a leading icon column (drives the header's empty icon cell).

    FKHighlightMatches: boolean = true

    Whether to highlight the typed query substring within each suggestion's name in the FK dropdown. On by default — uses the muted, theme-aware --mj-status-warning highlight (not the old bright yellow). Set false for plain, un-marked names.

    FKIsMatched: boolean = false

    Whether the current FK value is a confirmed match (user selected from dropdown)

    FKLoading: boolean = false

    Whether a DB search is currently in flight (drives the loading indicator).

    FKNameField: string = ''

    Code name of the name column (used as its sort key).

    FKNoMatches: boolean = false

    True when a search completed with zero results (drives the "No matches" row).

    FKSearchableFields: FKSearchableField[] = []

    Fields the user can scope the search to (name + shown columns + other fields).

    FKSearchField: string = ''

    Related-entity field code name currently searched against (defaults to the name field).

    FKSearchFieldLabel: string = ''

    Friendly label of FKSearchField, shown on the scope pill.

    FKSelectedSuggestion: FKSuggestion | null = null

    The currently-linked record, pinned as a sticky "Currently selected" section at the top of the dropdown (browse mode only). Null when there's no selection or the user is actively filtering. Removed from FKSuggestions so it isn't listed twice.

    FKShowScopeMenu: boolean = false

    Whether the scope-picker menu is open.

    FKSortDir: "asc" | "desc" = 'asc'

    Active sort direction; only meaningful when FKSortField is set.

    FKSortField: string | null = null

    Active sort column (field code name), or null for natural (unsorted) order.

    FKSuggestions: FKSuggestion[] = []

    Suggestions returned from the FK entity search

    FormContext?: FormContext

    Form-level context (search filter, showEmptyFields)

    HideWhenEmptyInReadOnlyMode: boolean = true

    Whether to hide this field when empty in read-only mode. Default: true

    LinkType: "Email" | "URL" | "Record" | "None" = 'None'

    Link type for read-only rendering.

    • 'Email': renders as mailto link
    • 'URL': renders as external hyperlink
    • 'Record': renders as FK link to related entity record
    • 'None': renders as plain text
    Navigate: EventEmitter<FormNavigationEvent> = ...

    Emitted when a navigation action is triggered (FK link click, email click, etc.)

    OpenAbove: boolean = false
    PossibleValuesOverride: string[] | null = null

    Override possible values for select/autocomplete

    Provider: IMetadataProvider | null

    If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

    Record: BaseEntity

    The entity record containing this field

    ShowFKDropdown: boolean = false

    Whether the FK dropdown is visible

    ShowLabel: boolean = true

    Whether to show the field label

    ShowSelectDropdown: boolean = false

    Whether the custom select dropdown is visible

    ShowValueListDropdown: boolean = false

    Whether the value list dropdown is visible

    ValueChange: EventEmitter<
        { FieldName: string; NewValue: unknown; OldValue: unknown },
    > = ...

    Emitted when the field value changes

    "ɵdir": unknown
    "ɵfac": unknown

    Accessors

    _deprecatedFormContext

    _deprecatedRecord

    • get CanCreateFK(): boolean

      Whether to show the inline-create affordance: the field opts in (AllowFKCreate), the related entity resolves, and the current user can create records of it (entity allows creation + role permits — GetUserPermisions().CanCreate folds in AllowCreateAPI).

      Returns boolean

    • get FKDisplayName(): string | null

      For FK fields, returns the human-readable name to display instead of the raw ID.

      Resolution order:

      1. If RelatedEntityNameFieldMap exists, read the name from the joined field on the record (sync).
      2. Otherwise, fall back to an async GetEntityRecordName lookup (result cached in _resolvedFKName).

      Returns string | null

    • get FKGridTemplateColumns(): string

      CSS grid-template-columns for the dropdown grid: optional icon column, then one track per ordered column. The LAST column grows to fill any remaining width (1fr) so the grid never leaves dead space on the right; earlier columns size to content. A user-resized column uses its saved pixel width as the floor.

      Returns string

    • get FKHasLinkedValue(): boolean

      True when this FK currently points at a real record (has a value AND we can show its name). Drives the "linked" affordance — the chain icon + accent — so the user can tell at a glance this is a resolved link, not free text.

      Returns boolean

    • get IsRichTextEligible(): boolean

      Whether this field is large enough to be a candidate for rich-text (markdown/html) auto-detection. Generic & multi-platform: keys off the TS type and character length rather than a specific SQL type, so nvarchar(max)/ntext (MaxLength === 0 means unlimited) and longer fixed fields (nvarchar(400)/varchar(500)/...) all qualify, while short strings, UUIDs, numbers, dates, etc. do not.

      Returns boolean

    • get ProviderToUse(): IMetadataProvider

      Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

      Returns IMetadataProvider

    • get RunQueryToUse(): IRunQueryProvider

      Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

      Returns IRunQueryProvider

    • get RunReportToUse(): IRunReportProvider

      Returns either the default RunReport provider or the one specified in the Provider property, if it was specified

      Returns IRunReportProvider

    • get RunViewToUse(): IRunViewProvider

      Returns either the default RunView provider or the one specified in the Provider property, if it was specified

      Returns IRunViewProvider

    • get Type(): | "number"
      | "code"
      | "textbox"
      | "textarea"
      | "datepicker"
      | "checkbox"
      | "select"
      | "autocomplete"

      Returns
          | "number"
          | "code"
          | "textbox"
          | "textarea"
          | "datepicker"
          | "checkbox"
          | "select"
          | "autocomplete"

    • set Type(
          value:
              | "number"
              | "code"
              | "textbox"
              | "textarea"
              | "datepicker"
              | "checkbox"
              | "select"
              | "autocomplete"
              | "dropdownlist"
              | "numerictextbox",
      ): void

      The control type to render in edit mode. Determines which input component is used.

      Also accepts deprecated Kendo-style type names for backward compatibility:

      • 'dropdownlist' → 'select'
      • 'numerictextbox' → 'number'

      Parameters

      • value:
            | "number"
            | "code"
            | "textbox"
            | "textarea"
            | "datepicker"
            | "checkbox"
            | "select"
            | "autocomplete"
            | "dropdownlist"
            | "numerictextbox"

      Returns void

    Methods

    • Move a column one slot up (delta -1) or down (delta +1) and persist. mousedown + stopPropagation so the row's select-scope handler doesn't fire and the menu stays open.

      Parameters

      • event: MouseEvent
      • field: string
      • delta: -1 | 1

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: { [propName: string]: SimpleChange<any> }

        The changed properties.

      Returns void

    • Ask the host (app layer) to create a new related record, prefilled with the typed text as the name. We only EMIT the request — opening the form is the app's job (the generic forms layer must not depend on the app-level form presenter). The host calls Complete(record) when saved and we select it.

      Parameters

      • event: MouseEvent

      Returns void

    • Show dropdown on focus. With a cached-unfiltered entity we immediately show the first N rows (sorted by name) even on empty input — zero DB round-trips. Without a cache we keep prior behavior: only re-open if we already have suggestions.

      Parameters

      • event: FocusEvent

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods