@memberjunction/ng-simple-record-list

A lightweight, reusable Angular component for displaying, creating, editing, and deleting records from any MemberJunction entity. Provides a streamlined grid interface with built-in CRUD operations, custom action buttons, and inline form dialogs.

Overview

The SimpleRecordListComponent is designed for settings pages and administrative interfaces where a full data grid is overkill. It renders a simple list of records for a given entity with configurable columns, sorting, and action buttons (edit, delete, custom action). New records and edits are handled via the EntityFormDialogComponent.

graph TD
    SRL["SimpleRecordListComponent\n(<mj-simple-record-list>)"] --> KG["Record Grid\n(Kendo Grid)"]
    SRL --> EFD["EntityFormDialogComponent\n(Edit/New)"]
    SRL --> DEL["Delete Confirmation\n(Kendo Dialog)"]
    SRL --> CA["Custom Action Button"]

    KG --> EDIT["Edit Button"]
    KG --> DELETE["Delete Button"]
    KG --> CUSTOM["Custom Action"]

    style SRL fill:#7c5295,stroke:#563a6b,color:#fff
    style KG fill:#2d6a9f,stroke:#1a4971,color:#fff
    style EFD fill:#2d8659,stroke:#1a5c3a,color:#fff
    style DEL fill:#b8762f,stroke:#8a5722,color:#fff
    style CA fill:#b8762f,stroke:#8a5722,color:#fff
    style EDIT fill:#2d8659,stroke:#1a5c3a,color:#fff
    style DELETE fill:#2d8659,stroke:#1a5c3a,color:#fff
    style CUSTOM fill:#2d8659,stroke:#1a5c3a,color:#fff

Features

• Entity-agnostic: Works with any MemberJunction entity by name
• Configurable columns: Specify which columns to display, or auto-select from metadata
• CRUD operations: Built-in New, Edit, and Delete with confirmation dialogs
• Custom action button: Optional per-row action with configurable icon, tooltip, and handler
• Dynamic icons/tooltips: Custom action icon and tooltip can be functions of the record
• Inline form editing: Opens EntityFormDialogComponent for editing individual records
• Section-mode editing: Optionally show only a specific form section in the edit dialog
• Default values: Set default field values for new records
• Extra filter: Apply additional SQL filter to scope the visible records
• Delete prevention: Cancel delete via event handler
• Sorting: Sort by any column

Installation

npm install @memberjunction/ng-simple-record-list

Key Dependencies

| Dependency | Purpose | |---|---| | @memberjunction/core | Metadata, BaseEntity, RunView | | @memberjunction/ng-entity-form-dialog | Record editing dialog | | @memberjunction/ng-notifications | Notification service | | @progress/kendo-angular-grid | Grid display | | @progress/kendo-angular-dialog | Confirmation dialogs |

Usage

<mj-simple-record-list
  [EntityName]="'Roles'"
  [Columns]="['Name', 'Description']"
  [SortBy]="'Name'"
  [AllowNew]="true"
  [AllowEdit]="true"
  [AllowDelete]="true"
  [ExtraFilter]="'IsActive = 1'"
  (RecordSaved)="onSaved($event)"
  (RecordDeleted)="onDeleted($event)">
</mj-simple-record-list>

Key Inputs

| Input | Type | Default | Description | |---|---|---|---| | EntityName | string | '' | Entity to display records for | | Columns | string[] | [] | Column names to display | | SortBy | string | '' | Column to sort by | | AllowNew | boolean | true | Show New button | | AllowEdit | boolean | true | Show Edit button per row | | AllowDelete | boolean | true | Show Delete button per row | | AllowCustomAction | boolean | false | Show custom action button per row | | CustomActionIcon | string | '' | FA icon class for custom action | | CustomActionIconFunction | (record: BaseEntity) => string | null | Dynamic icon per record | | CustomActionTooltip | string | '' | Tooltip for custom action | | CustomActionTooltipFunction | (record: BaseEntity) => string | null | Dynamic tooltip per record | | ExtraFilter | string | '' | Additional SQL filter | | DefaultValues | Record<string, string> | {} | Default values for new records | | EditSectionName | string | '' | Show only this section in edit dialog |

Key Outputs

| Output | Type | Description | |---|---|---| | RecordSaved | EventEmitter<BaseEntity> | Emitted after record save | | RecordDeleted | EventEmitter<BaseEntity> | Emitted after record delete | | CustomActionClicked | EventEmitter<BaseEntity> | Emitted when custom action clicked | | DeleteRequested | EventEmitter<{record, cancel}> | Emitted before delete (cancelable) |

Exported API

| Export | Type | Description | |---|---|---| | SimpleRecordListComponent | Component | The record list component | | SimpleRecordListModule | NgModule | Module declaration |

Build

cd packages/Angular/Explorer/simple-record-list && npm run build

License

ISC