@memberjunction/ng-query-viewer

Angular components for viewing and executing stored queries with parameter input, interactive AG Grid results, and entity linking. The recommended replacement for the deprecated @memberjunction/ng-query-grid.

Installation

npm install @memberjunction/ng-query-viewer
Copy

Overview

The Query Viewer provides a complete query execution experience: a parameter input form, an AG Grid results display, entity linking for clickable record IDs, and automatic state persistence to User Settings. It replaces the older Kendo-based Query Grid with a more feature-rich implementation.

flowchart TD
    subgraph Viewer["QueryViewerComponent"]
        A["QueryId Input"] --> B["Load Query Metadata"]
        B --> C["QueryParameterFormComponent"]
        C -->|Run| D["RunQuery API"]
        D --> E["QueryDataGridComponent"]
    end
    subgraph Features["Key Features"]
        F["State Persistence (User Settings)"]
        G["Parameter Persistence"]
        H["Entity Linking"]
        I["Export (Excel/CSV)"]
    end
    subgraph Grid["QueryDataGridComponent"]
        J["AG Grid"]
        K["Column Config"]
        L["Row Detail Panel"]
        M["Query Info Panel"]
    end

    E --> J
    E --> F
    C --> G
    J --> H

    style Viewer fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Features fill:#7c5295,stroke:#563a6b,color:#fff
    style Grid fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Usage

Module Import

import { QueryViewerModule } from '@memberjunction/ng-query-viewer';

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

Basic Usage

<mj-query-viewer
  [QueryId]="selectedQueryId"
  [AutoRun]="true"
  (EntityLinkClick)="openRecord($event)">
</mj-query-viewer>
Copy

Full Configuration

<mj-query-viewer
  [QueryId]="queryId"
  [AutoRun]="false"
  [SelectionMode]="'multiple'"
  [ShowInfoPanel]="true"
  [ShowRowDetail]="true"
  [PersistState]="true"
  [PersistParams]="true"
  (EntityLinkClick)="navigateToEntity($event)"
  (SelectionChanged)="onSelectionChanged($event)"
  (RowClick)="onRowClick($event)"
  (GridStateChanged)="onStateChanged($event)">
</mj-query-viewer>
Copy

Components

QueryViewerComponent API

Inputs

Outputs

Exported Types

• QueryGridSelectionMode -- 'none' | 'single' | 'multiple'
• QueryGridColumnConfig -- Column definition with entity link info
• QueryGridSortState -- Current sort column and direction
• QueryGridState -- Full persisted grid state
• QueryParameterValues -- Map of parameter names to values
• QueryGridVisualConfig -- Visual configuration options
• QueryExportOptions -- Export format and configuration
• QueryRowClickEvent -- Row click event data
• QueryEntityLinkClickEvent -- Entity link click with entity name and record ID

Utility Functions

• buildColumnsFromQueryFields(fields) -- Generates column config from query field metadata
• buildColumnsFromData(data) -- Generates column config by inspecting result data

Dependencies

• @memberjunction/core -- Metadata, RunQuery, QueryInfo
• @memberjunction/core-entities -- UserInfoEngine for state persistence
• @memberjunction/ng-notifications -- User notifications
• @memberjunction/ng-shared-generic -- Loading component
• @memberjunction/ng-export-service -- Export functionality
• ag-grid-angular / ag-grid-community -- Grid rendering

Related Packages