@memberjunction/ng-data-context

Angular components for managing MemberJunction Data Contexts -- reusable collections of data sources (views, queries, raw SQL) that can be composed and referenced by reports, dashboards, and AI prompts.

Overview

The @memberjunction/ng-data-context package provides an interactive component for creating, editing, and previewing data contexts. A data context defines one or more data source items (entity views, stored queries, or raw SQL statements) along with optional filters, and packages them into a named, reusable unit. The package includes both an inline component and a dialog wrapper.

graph TD
    A[DataContextModule] --> B[DataContextComponent]
    A --> C[DataContextDialogComponent]

    B --> D["Data Source Items"]
    D --> D1["Entity Views"]
    D --> D2["Stored Queries"]
    D --> D3["Raw SQL"]
    D --> D4["Entity Records"]

    B --> E["Item Configuration"]
    E --> E1["Filters"]
    E --> E2["Preview"]
    E --> E3["Virtual Scrolling"]

    C --> B

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff
Copy

Installation

npm install @memberjunction/ng-data-context
Copy

Usage

Import the Module

import { DataContextModule } from '@memberjunction/ng-data-context';

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

Inline Component

<mj-data-context
  [dataContextId]="'your-data-context-id'"
  [Provider]="customMetadataProvider">
</mj-data-context>
Copy

Dialog Component

<mj-data-context-dialog
  [dataContextId]="selectedDataContextId"
  [Provider]="metadataProvider"
  (dialogClosed)="onDialogClosed()">
</mj-data-context-dialog>
Copy

Complete Example

import { Component } from '@angular/core';
import { IMetadataProvider, Metadata } from '@memberjunction/core';

@Component({
  selector: 'app-data-context-viewer',
  template: `
    <mj-data-context
      [dataContextId]="selectedDataContextId"
      [Provider]="metadataProvider">
    </mj-data-context>

    <button (click)="showDialog()">View in Dialog</button>

    @if (isDialogVisible) {
      <mj-data-context-dialog
        [dataContextId]="selectedDataContextId"
        [Provider]="metadataProvider"
        (dialogClosed)="onDialogClose()">
      </mj-data-context-dialog>
    }
  `
})
export class DataContextViewerComponent {
  isDialogVisible = false;
  selectedDataContextId = '12345-67890-abcdef';
  metadataProvider: IMetadataProvider;

  constructor() {
    this.metadataProvider = Metadata.Provider;
  }

  showDialog(): void {
    this.isDialogVisible = true;
  }

  onDialogClose(): void {
    this.isDialogVisible = false;
  }
}
Copy

API Reference

DataContextComponent (mj-data-context)

Main component for displaying a data context and its items.

Inputs

DataContextDialogComponent (mj-data-context-dialog)

Dialog wrapper displaying the DataContextComponent in a Kendo dialog.

Inputs

Outputs

Data Context Structure

A data context in MemberJunction consists of:

1. Context Record (DataContextEntity) -- ID, Name, Description, and metadata
2. Context Items (Data Context Items entity) with the following types:
   • SQL -- Direct SQL query
   • View -- Reference to a saved view
   • Query -- Reference to a stored query
   • Entity -- Reference to an entity
   • Record -- Specific record reference

Features

• Multi-source composition: Combine entity views, stored queries, raw SQL, and specific records into a single named context
• Virtual scrolling: Efficient handling of large datasets via Kendo Grid
• Column sorting and resizing: Interactive grid features
• Metadata integration: Uses MemberJunction's metadata system for entity loading
• Loading state management: Built-in loading indicators
• Custom provider support: Works with custom metadata providers for multi-tenant scenarios
• Error handling: Logs errors via MemberJunction's LogError function

Dependencies

Runtime Dependencies

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x

Build

cd packages/Angular/Generic/data-context
npm run build
Copy

License

ISC