Skip to content
MemberJunction

@memberjunction/ng-versions

Angular components for viewing entity record version history in MemberJunction applications. Provides label creation, label detail, and a record micro-view for working with the built-in Record Changes system.

Note: the generic slide-in/dialog primitive MjSlidePanelComponent (mj-slide-panel) previously lived here and now lives in @memberjunction/ng-ui-components. Import it from there.

Installation

Section titled “Installation”
Terminal window
npm install @memberjunction/ng-versions

Overview

Section titled “Overview”

MemberJunction includes built-in version control (“Record Changes”) that tracks all changes to entity records. This package provides Angular components for browsing that history: a slide panel for navigating versions, a micro-view for previewing snapshots, and label management for bookmarking specific versions.

flowchart TD
    subgraph Panel["Version History Panel"]
        A["Version List"]
        A --> B["RecordMicroViewComponent"]
        A --> C["LabelCreateComponent"]
        A --> D["LabelDetailComponent"]
    end
    subgraph Data["MJ Record Changes"]
        E["RecordChange Entity"]
        F["Field-level Diffs"]
        G["Version Labels"]
    end

    E --> Panel
    F --> B
    G --> C
    G --> D

    style Panel fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Data fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Section titled “Usage”

Module Import

Section titled “Module Import”
import { VersionsModule } from '@memberjunction/ng-versions';


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

Slide Panel — moved

Section titled “Slide Panel — moved”

MjSlidePanelComponent (mj-slide-panel) now lives in @memberjunction/ng-ui-components as a first-class shared UI primitive. Import it from there: import { MjSlidePanelComponent } from '@memberjunction/ng-ui-components'; (It’s a standalone component — add it to your component/module imports.) The SlidePanelMode type moved with it.

Record Micro View

Section titled “Record Micro View”
<mj-record-micro-view
  [Data]="microViewData">
</mj-record-micro-view>

Label Creation

Section titled “Label Creation”
<mj-label-create
  [EntityName]="'Products'"
  [RecordID]="productId"
  [RecordChangeID]="selectedChangeId"
  (LabelCreated)="onLabelCreated($event)">
</mj-label-create>

Components

Section titled “Components”
ComponentSelectorPurpose
RecordMicroViewComponentmj-record-micro-viewCompact snapshot preview with field diffs
LabelCreateComponentmj-label-createCreate a named label/bookmark for a version
LabelDetailComponentmj-label-detailView and manage label details

Exported Types

Section titled “Exported Types”

MicroViewData

Section titled “MicroViewData”
interface MicroViewData {
  EntityName: string;
  EntityID: string;
  RecordID: string;
  RecordChangeID: string;
  FullRecordJSON: Record<string, unknown> | null;
  FieldDiffs: FieldChangeView[] | null;
}

FieldChangeView

Section titled “FieldChangeView”
interface FieldChangeView {
  FieldName: string;
  OldValue: string;
  NewValue: string;
  ChangeType: 'Added' | 'Modified' | 'Removed';
}

Dependencies

Section titled “Dependencies”