@memberjunction/ng-find-record

An Angular component library for searching and selecting records from any MemberJunction entity. Provides both a standalone search component and a dialog wrapper for modal usage.

Installation

npm install @memberjunction/ng-find-record

Overview

The Find Record package provides a reusable search interface that works with any entity registered in the MemberJunction metadata system. It uses debounced search input with the RunView API and displays results in a Kendo UI grid for easy selection.

flowchart LR
    subgraph Input["User Input"]
        A["Search Text"] --> B["Debounce (300ms)"]
    end
    subgraph API["MJ Data Layer"]
        B --> C["RunView + UserSearchString"]
        C --> D["BaseEntity Results"]
    end
    subgraph Display["UI Components"]
        D --> E["Kendo Grid"]
        E --> F["OnRecordSelected"]
    end

    style Input fill:#2d6a9f,stroke:#1a4971,color:#fff
    style API fill:#7c5295,stroke:#563a6b,color:#fff
    style Display fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Module Import

import { FindRecordModule } from '@memberjunction/ng-find-record';

@NgModule({
  imports: [FindRecordModule]
})
export class YourModule {}

Standalone Search Component

<mj-find-record
  [EntityName]="'Users'"
  [SearchDebounceTime]="500"
  (OnRecordSelected)="handleRecordSelected($event)">
</mj-find-record>

Dialog Wrapper

<mj-find-record-dialog
  [EntityName]="'Users'"
  [DialogTitle]="'Find User'"
  [DialogVisible]="showFindDialog"
  (DialogClosed)="handleDialogClosed($event)"
  (OnRecordSelected)="handleRecordSelected($event)">
</mj-find-record-dialog>

Components

Component	Selector	Purpose
`FindRecordComponent`	`mj-find-record`	Standalone search with results grid
`FindRecordDialogComponent`	`mj-find-record-dialog`	Modal dialog wrapper around the search component

FindRecordComponent

Inputs

Property	Type	Default	Description
`EntityName`	`string`	`''`	Name of the MemberJunction entity to search
`DisplayFields`	`EntityFieldInfo[]`	`[]`	Fields to display in the results grid. Defaults to fields marked as `DefaultInView`, `IsPrimaryKey`, `IsNameField`, or `IncludeInUserSearchAPI`
`SearchDebounceTime`	`number`	`300`	Debounce time in milliseconds for search input

Outputs

Event	Type	Description
`OnRecordSelected`	`EventEmitter<BaseEntity>`	Emitted when a user selects a record from the grid

FindRecordDialogComponent

Inherits all inputs from FindRecordComponent, plus:

Property	Type	Default	Description
`DialogTitle`	`string`	`'Find Record'`	Title displayed in the dialog header
`DialogWidth`	`string`	`'700px'`	Width of the dialog
`DialogHeight`	`string`	`'450px'`	Height of the dialog
`DialogVisible`	`boolean`	`false`	Controls dialog visibility
`SelectedRecord`	`BaseEntity \| null`	`null`	Pre-selected record

Event	Type	Description
`DialogClosed`	`EventEmitter<boolean>`	`true` if OK was clicked, `false` if cancelled

Search Behavior

User types in the search input; input is debounced (default 300ms)
A search executes via RunView with UserSearchString and ResultType: 'entity_object'
Results display in a Kendo UI grid with the configured display fields
Clicking a row emits the selected BaseEntity instance via OnRecordSelected

Dependencies

@memberjunction/core — Metadata, RunView, BaseEntity
@memberjunction/core-entities — Entity type definitions
@memberjunction/ng-shared — Shared Angular utilities
@progress/kendo-angular-grid — Grid display

@memberjunction/ng-record-selector — Dual-listbox record selection
@memberjunction/ng-generic-dialog — Reusable dialog component