@memberjunction/ng-entity-communications

Angular components for selecting message templates, previewing communications with live entity data, and sending messages to recipients within the MemberJunction framework.

Overview

The @memberjunction/ng-entity-communications package provides a two-step communication workflow: first, users browse and select from available message templates; then they preview how those templates render against actual entity data before sending. The package includes both an inline preview component and a dialog wrapper for modal presentation.

flowchart TD
    subgraph Phase1["Template Selection"]
        TS[Browse Active Templates] --> TF[Apply Template Filter]
        TF --> TC[User Selects Template]
    end

    subgraph Phase2["Preview & Send"]
        TC --> PG[Generate Previews]
        PG --> NAV[Navigate Messages]
        NAV --> SEND[Confirm / Cancel]
    end

    subgraph Integration["MJ Integration"]
        ECC[EntityCommunicationsEngineClient] --> PG
        RV[RunView - Entity Data] --> PG
        TE[Template Engine] --> PG
    end

    style Phase1 fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Phase2 fill:#7c5295,stroke:#563a6b,color:#fff
    style Integration fill:#2d8659,stroke:#1a5c3a,color:#fff

Installation

npm install @memberjunction/ng-entity-communications

Usage

Import the Module

import { EntityCommunicationsModule } from '@memberjunction/ng-entity-communications';

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

Inline Preview Component

<mj-entity-communications-preview
  [entityInfo]="entityInfo"
  [runViewParams]="runViewParams"
  [templateFilter]="'TemplateType = ''Email'''"
  (templateSelected)="onTemplateSelected($event)">
</mj-entity-communications-preview>

Dialog Component

@if (showPreview) {
  <mj-entity-communications-preview-window
    [entityInfo]="customerEntityInfo"
    [runViewParams]="customerViewParams"
    [DialogVisible]="showPreview"
    [Title]="'Customer Email Preview'"
    (DialogClosed)="onPreviewClosed($event)">
  </mj-entity-communications-preview-window>
}

Complete Example

import { Component } from '@angular/core';
import { EntityInfo, Metadata, RunViewParams } from '@memberjunction/core';
import { TemplateEntityExtended } from '@memberjunction/templates-base-types';

@Component({
  selector: 'app-customer-communication',
  template: `
    <button (click)="showPreview = true">Preview Customer Emails</button>

    @if (showPreview) {
      <mj-entity-communications-preview-window
        [entityInfo]="customerEntityInfo"
        [runViewParams]="customerViewParams"
        [DialogVisible]="showPreview"
        [Title]="'Customer Email Preview'"
        (DialogClosed)="onPreviewClosed($event)">
      </mj-entity-communications-preview-window>
    }
  `
})
export class CustomerCommunicationComponent {
  showPreview = false;
  customerEntityInfo: EntityInfo;
  customerViewParams: RunViewParams;

  constructor() {
    const md = new Metadata();
    this.customerEntityInfo = md.Entities.find(e => e.Name === 'Customers')!;
    this.customerViewParams = {
      EntityName: 'Customers',
      ExtraFilter: 'IsActive = 1',
      OrderBy: 'LastContactDate ASC',
      ResultType: 'entity_object'
    };
  }

  onPreviewClosed(confirmed: boolean) {
    this.showPreview = false;
    if (confirmed) {
      console.log('User confirmed sending emails');
    }
  }
}

API Reference

EntityCommunicationsPreviewComponent (mj-entity-communications-preview)

Main component for template selection and message preview.

Inputs

| Input | Type | Description | |-------|------|-------------| | entityInfo | EntityInfo | Entity metadata for the communication recipients | | runViewParams | RunViewParams | Parameters for loading entity data | | templateFilter | string | SQL filter expression for available templates |

Outputs

| Output | Type | Description | |--------|------|-------------| | templateSelected | EventEmitter<TemplateEntityExtended> | Emitted when a template is selected |

EntityCommunicationsPreviewWindowComponent (mj-entity-communications-preview-window)

Dialog wrapper around the preview component.

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | DialogVisible | boolean | - | Controls dialog visibility | | Title | string | 'Communications Preview' | Dialog title | | Width | number | 650 | Dialog width in pixels | | Height | number | 600 | Dialog height in pixels | | MinWidth | number | 400 | Minimum dialog width | | MinHeight | number | 350 | Minimum dialog height | | Resizable | boolean | true | Whether the dialog can be resized | | entityInfo | EntityInfo | - | Entity metadata | | runViewParams | RunViewParams | - | View parameters for data loading |

Outputs

| Output | Type | Description | |--------|------|-------------| | DialogClosed | EventEmitter<boolean> | true if confirmed, false if canceled |

Process Flow

1. Template Selection -- Component loads active templates filtered by the templateFilter expression. User browses and selects a template.
2. Preview Generation -- The selected template is processed against entity data from runViewParams using EntityCommunicationsEngineClient. A loading indicator shows during processing.
3. Preview Navigation -- VCR-style controls (first, previous, next, last) let the user browse through all generated preview messages, viewing processed subject lines and HTML bodies.
4. Confirmation (dialog mode) -- OK/Cancel buttons control the dialog, with DialogClosed emitting the user's choice.

Dependencies

Runtime Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Metadata, entity framework, view execution | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/global | Global utilities and event system | | @memberjunction/communication-types | Message types and communication engine interfaces | | @memberjunction/entity-communications-base | EntityCommunicationParams interface | | @memberjunction/entity-communications-client | Client-side communication processing engine | | @memberjunction/templates-base-types | Template engine and extended template types | | @memberjunction/ng-container-directives | Container directive utilities | | @memberjunction/ng-shared | Shared Angular utilities | | @memberjunction/ng-shared-generic | Shared generic components |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/router ^21.x
• @progress/kendo-angular-buttons ^22.x
• @progress/kendo-angular-dialog ^22.x
• @progress/kendo-angular-listbox ^22.x
• @progress/kendo-angular-indicators ^22.x

Build

cd packages/Angular/Generic/entity-communication
npm run build

License

ISC