@memberjunction/ng-base-application

Base application class system for app-centric navigation in MemberJunction Explorer. Provides extensible application classes, workspace configuration types, tab management, and state persistence.

Overview

This package defines the foundational architecture for MemberJunction’s multi-application workspace. Each “application” in MJ Explorer is an instance of BaseApplication (or a subclass) that provides its own navigation items, color theme, lifecycle hooks, and default dashboard. The ApplicationManager service handles loading, ordering, and switching between applications, while WorkspaceStateManager and GoldenLayoutManager handle tab state and layout persistence.

graph TD
    AM["ApplicationManager\n(Singleton Service)"] --> BA["BaseApplication\nInstances"]
    AM --> WSM["WorkspaceStateManager"]
    WSM --> GLM["GoldenLayoutManager"]
    WSM --> TS["TabService"]
    BA --> NI["NavItem[]"]
    BA --> TR["TabRequest"]
    BA --> DE["DashboardEngine\n(Default Tab)"]

    style AM fill:#7c5295,stroke:#563a6b,color:#fff
    style BA fill:#2d6a9f,stroke:#1a4971,color:#fff
    style WSM fill:#2d6a9f,stroke:#1a4971,color:#fff
    style GLM fill:#2d8659,stroke:#1a5c3a,color:#fff
    style TS fill:#2d8659,stroke:#1a5c3a,color:#fff
    style NI fill:#b8762f,stroke:#8a5722,color:#fff
    style TR fill:#b8762f,stroke:#8a5722,color:#fff
    style DE fill:#b8762f,stroke:#8a5722,color:#fff

Features

• BaseApplication class: Extensible via @RegisterClass for custom app behavior
• ApplicationManager: Loads user applications, manages active app state, handles UserApplication records
• WorkspaceStateManager: Persists and restores tab state across sessions
• GoldenLayoutManager: Manages the Golden Layout tab container
• TabService: Programmatic tab creation, switching, and closing
• Type-safe interfaces: NavItem, TabRequest, WorkspaceConfiguration
• Dashboard integration: Auto-loads default dashboards for apps with no nav items
• Lifecycle hooks: OnActivate() / OnDeactivate() for custom initialization and cleanup

Installation

npm install @memberjunction/ng-base-application

Key Dependencies

Dependency	Purpose
@memberjunction/core	Metadata, entity access
@memberjunction/core-entities	DashboardEngine, UserApplicationEntity
@memberjunction/global	RegisterClass, ClassFactory
golden-layout	Tab container layout engine
rxjs	Observable state management

Usage

Extending BaseApplication

import { RegisterClass } from '@memberjunction/global';
import { BaseApplication } from '@memberjunction/ng-base-application';

@RegisterClass(BaseApplication, 'CRMApplication')
export class CRMApplication extends BaseApplication {
  override GetNavItems(): NavItem[] {
    const items = super.GetNavItems();
    // Add dynamic items based on permissions
    return items;
  }

  override async OnActivate(): Promise<void> {
    // Custom initialization when app becomes active
  }
}

Using ApplicationManager

import { ApplicationManager } from '@memberjunction/ng-base-application';

@Component({ /* ... */ })
export class AppSwitcherComponent {
  constructor(private appManager: ApplicationManager) {}

  ngOnInit() {
    this.appManager.Applications.subscribe(apps => {
      this.apps = apps; // User's active applications
    });
  }

  switchApp(app: BaseApplication) {
    this.appManager.SetActiveApp(app);
  }
}

Exported API

Export	Type	Description
BaseApplication	Class	Base class for application definitions
ApplicationManager	Service	Manages application instances and active state
WorkspaceStateManager	Service	Persists and restores workspace tab state
GoldenLayoutManager	Service	Manages Golden Layout tab container
TabService	Service	Programmatic tab management
NavItem	Interface	Navigation item configuration
TabRequest	Interface	Tab creation request
WorkspaceConfiguration	Interface	Complete workspace state
UserAppConfig	Interface	User application configuration

Build

cd packages/Angular/Explorer/base-application && npm run build

License

ISC