@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

Installation

npm install @memberjunction/ng-data-context

Usage

Import the Module

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

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

Inline Component

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

Dialog Component

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

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;
  }
}

API Reference

DataContextComponent (mj-data-context)

Main component for displaying a data context and its items.

Inputs

| Input | Type | Required | Default | Description | |-------|------|----------|---------|-------------| | dataContextId | string | Yes | - | The ID of the data context to display | | Provider | IMetadataProvider \| null | No | Metadata.Provider | Custom metadata provider |

DataContextDialogComponent (mj-data-context-dialog)

Dialog wrapper displaying the DataContextComponent in a Kendo dialog.

Inputs

| Input | Type | Required | Default | Description | |-------|------|----------|---------|-------------| | dataContextId | string | Yes | - | The ID of the data context to display | | Provider | IMetadataProvider \| null | No | null | Custom metadata provider |

Outputs

| Output | Type | Description | |--------|------|-------------| | dialogClosed | EventEmitter<void> | Emitted when the dialog is closed |

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

| Package | Description | |---------|-------------| | @memberjunction/core | Core MemberJunction framework | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/global | Global utilities | | @memberjunction/ng-container-directives | Container directives | | @memberjunction/ng-shared | Shared Angular utilities | | @progress/kendo-angular-grid | Grid with virtual scrolling | | @progress/kendo-angular-indicators | Loading indicators | | @progress/kendo-angular-dialog | Dialog component | | @progress/kendo-angular-buttons | Button components |

Peer Dependencies

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

Build

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

License

ISC