2.48.0 • Published 4 months ago

@memberjunction/ng-core-entity-forms v2.48.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

@memberjunction/ng-core-entity-forms

The @memberjunction/ng-core-entity-forms package provides a comprehensive set of Angular form components for all core MemberJunction entities. It includes both auto-generated form components based on entity metadata and custom form components with enhanced functionality for specific entities.

Features

  • Pre-built form components for all MemberJunction core entities
  • Automatically generated forms with consistent UI across the platform
  • Custom form implementations for complex entities
  • Support for detail sections, tabs, and specialized form layouts
  • Integration with MemberJunction's metadata system
  • Tree-shake safe implementation for production builds
  • Form components following MemberJunction's design patterns

Installation

npm install @memberjunction/ng-core-entity-forms

Requirements

  • Angular 18+
  • @memberjunction/core
  • @memberjunction/core-entities
  • @memberjunction/ng-explorer-core
  • @memberjunction/ng-base-forms
  • Various MemberJunction and Kendo UI components

Usage

The package includes two main modules:

  1. CoreGeneratedFormsModule - Contains all auto-generated form components
  2. MemberJunctionCoreEntityFormsModule - Contains custom form components

Basic Setup

Import the necessary modules in your application module:

import { 
  CoreGeneratedFormsModule, 
  MemberJunctionCoreEntityFormsModule 
} from '@memberjunction/ng-core-entity-forms';

@NgModule({
  imports: [
    // other imports...
    CoreGeneratedFormsModule,
    MemberJunctionCoreEntityFormsModule
  ],
})
export class YourModule { }

Using Generated Forms

Generated forms are dynamically loaded based on entity names. The typical pattern is to use a component factory to create the appropriate form component:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Metadata } from '@memberjunction/core';

@Component({
  selector: 'app-entity-form-container',
  template: '<ng-container #formContainer></ng-container>'
})
export class EntityFormContainerComponent {
  @ViewChild('formContainer', { read: ViewContainerRef }) formContainer!: ViewContainerRef;
  
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private metadata: Metadata
  ) {}
  
  async loadEntityForm(entityName: string, recordId: any) {
    // Clear the container
    this.formContainer.clear();
    
    // Get the form component class for the entity
    const formComponent = await this.metadata.GetEntityFormComponent(entityName);
    if (formComponent) {
      // Create the component
      const factory = this.componentFactoryResolver.resolveComponentFactory(formComponent);
      const componentRef = this.formContainer.createComponent(factory);
      
      // Set inputs
      componentRef.instance.recordId = recordId;
      
      // Initialize the form
      await componentRef.instance.ngOnInit();
    }
  }
}

Using Custom Forms

Custom forms can be used directly in your templates:

<!-- For the extended Entity form -->
<mj-entities-form 
  [recordId]="entityId" 
  [showToolbar]="true"
  (saved)="onEntitySaved($event)">
</mj-entities-form>

<!-- For the extended EntityAction form -->
<mj-entity-action-form
  [recordId]="actionId"
  [showToolbar]="true"
  (saved)="onActionSaved($event)">
</mj-entity-action-form>

Architecture

Generated Forms

The CoreGeneratedFormsModule contains multiple sub-modules that collectively register all generated form components. Each entity has:

  1. A main form component (e.g., EntityFormComponent)
  2. Multiple section components (e.g., EntityDetailsComponent, EntityTopComponent)
  3. A loader function to prevent tree-shaking (e.g., LoadEntityFormComponent())

Custom Forms

The MemberJunctionCoreEntityFormsModule contains extended form components that provide additional functionality beyond the auto-generated forms:

  1. EntityFormExtendedComponent - Enhanced form for Entity management
  2. EntityActionExtendedFormComponent - Enhanced form for EntityAction management
  3. ActionTopComponentExtended - Custom top section for Action forms

Custom Form Development Guide

Core Architecture & Setup

  • Location: Custom forms live in packages/Angular/Explorer/core-entity-forms/src/lib/custom/{EntityName}/
  • File Structure:
    • {entity-name}-form.component.ts (main logic)
    • {entity-name}-form.component.html (template)
  • Inheritance: Extend generated form components (e.g., TemplateFormComponent) which inherit from BaseFormComponent
  • Registration: Use @RegisterClass(BaseFormComponent, 'EntityName') decorator
  • Module Integration: Add to custom-forms.module.ts declarations, exports, and import required Kendo modules

Entity & Data Management

  • Strong Typing: Never use any - always use proper entity types (TemplateEntity, TemplateCategoryEntity)
  • Entity Creation: Use Metadata.GetEntityObject<EntityType>('EntityName') pattern
  • Data Loading: Use RunView with ResultType='entity_object' and generic typing
  • Cache Integration: Leverage engine caches like TemplateEngineBase.Instance.TemplateContentTypes

Angular Best Practices

  • Modern Syntax: Always use @if, @for, @switch instead of structural directives
  • Track Functions: Include track in @for loops for performance
  • Component Integration: Use Kendo UI components for consistency (textbox, textarea, dropdownlist, combobox, numerictextbox, button)

Save Lifecycle & Validation

  • Override SaveRecord(): Handle complex saving by overriding SaveRecord(StopEditModeAfterSave: boolean)
  • Related Entity Creation: Create related entities (categories) BEFORE calling super.SaveRecord()
  • Duplicate Prevention: Implement validation like trim().toLowerCase() comparison for category names
  • Error Handling: Use MJNotificationService.Instance.CreateSimpleNotification() for user feedback
  • State Management: Respect EditMode state, implement proper change tracking

UI/UX Patterns

  • Layout: Use mjFillContainer directive with bottomMargin for proper container sizing
  • Form Fields: Use mj-form-field for individual fields; avoid problematic mj-form-section properties
  • Responsive Design: CSS Grid and Flexbox for layouts
  • Visual Feedback: Implement hover effects, loading states, progress indicators
  • Smart Controls: Conditional displays (e.g., show "New" badge for unsaved records, content type names for saved)

Development Workflow

  • Package Building: Always run npm run build in specific package directory for TypeScript checking
  • Workspace Management: Never npm install in package directories - always at repo root
  • Dependencies: Add to individual package.json, then npm install at root
  • Styling: Add custom CSS to src/shared/form-styles.css

Advanced Features Implemented

  • Dynamic Content Management: Multiple related entities (Template Contents) with priority-based ordering
  • Type-Safe Dropdowns: Filter invalid options, auto-select defaults
  • Smart Validation: Prevent duplicates with normalized comparisons
  • User Feedback: Comprehensive notification system for success/warning/error states
  • State Synchronization: Proper coordination between main entity and related entity saves

Common Patterns & Anti-Patterns

Do:

  • Use strong typing throughout
  • Respect MemberJunction entity patterns
  • Implement comprehensive error handling
  • Provide clear user feedback
  • Follow modern Angular syntax

Avoid:

  • Using any types
  • Bypassing Metadata.GetEntityObject()
  • Ignoring EditMode state
  • Using outdated Angular syntax
  • Running npm install in package directories
  • Creating duplicate entities without validation

Forms Structure

Each entity form typically follows this structure:

  1. A main form component that extends BaseFormComponent
  2. Multiple section components for different aspects of the entity
  3. A tabbed interface for complex entities
  4. Integration with grids, dropdowns, and other UI components

Key Components

ComponentDescription
Entity formsForms for managing metadata entities (Entity, EntityField, etc.)
Action formsForms for managing actions and workflows
User formsForms for user management and permissions
Integration formsForms for external system integrations
AI-related formsForms for AI models, prompts, and agents
Content formsForms for content management
Communication formsForms for messaging and notifications

Notes

  • Form components are dynamically instantiated at runtime based on entity names
  • Custom loader functions are used to prevent tree-shaking in production builds
  • The package is designed to work with the MemberJunction Explorer application
  • Forms rely on metadata from the @memberjunction/core package for field definitions

Dependencies

  • @angular/common
  • @angular/core
  • @angular/forms
  • @memberjunction/core
  • @memberjunction/core-entities
  • @memberjunction/ng-explorer-core
  • @memberjunction/ng-base-forms
  • @memberjunction/ng-form-toolbar
  • @memberjunction/ng-tabstrip
  • @memberjunction/ng-container-directives
  • @memberjunction/ng-code-editor
  • @memberjunction/ng-timeline
  • @memberjunction/ng-join-grid
  • @progress/kendo-angular-grid
  • @progress/kendo-angular-dropdowns
2.23.2

8 months ago

2.46.0

4 months ago

2.23.1

8 months ago

2.34.0

6 months ago

2.19.4

9 months ago

2.19.5

9 months ago

2.19.2

9 months ago

2.19.3

9 months ago

2.19.0

9 months ago

2.19.1

9 months ago

2.34.2

6 months ago

2.34.1

6 months ago

2.45.0

5 months ago

2.22.1

8 months ago

2.22.0

8 months ago

2.22.2

8 months ago

2.33.0

6 months ago

2.18.3

9 months ago

2.18.1

9 months ago

2.18.2

9 months ago

2.18.0

9 months ago

2.21.0

9 months ago

2.44.0

5 months ago

2.29.0

7 months ago

2.29.2

7 months ago

2.29.1

7 months ago

2.32.0

7 months ago

2.32.2

7 months ago

2.32.1

7 months ago

2.17.0

9 months ago

2.43.0

5 months ago

2.20.2

9 months ago

2.20.3

9 months ago

2.20.0

9 months ago

2.20.1

9 months ago

2.28.0

8 months ago

2.31.0

7 months ago

2.39.0

5 months ago

2.16.1

9 months ago

2.16.0

9 months ago

2.42.1

5 months ago

2.42.0

5 months ago

2.27.1

8 months ago

2.27.0

8 months ago

2.30.0

7 months ago

2.15.2

9 months ago

2.15.1

9 months ago

2.38.0

5 months ago

2.41.0

5 months ago

2.26.1

8 months ago

2.26.0

8 months ago

2.37.1

5 months ago

2.37.0

6 months ago

2.14.0

10 months ago

2.40.0

5 months ago

2.25.0

8 months ago

2.48.0

4 months ago

2.13.4

10 months ago

2.36.0

6 months ago

2.13.2

11 months ago

2.13.3

10 months ago

2.13.0

11 months ago

2.36.1

6 months ago

2.13.1

11 months ago

2.47.0

4 months ago

2.24.1

8 months ago

2.24.0

8 months ago

2.12.0

12 months ago

2.35.1

6 months ago

2.35.0

6 months ago

2.23.0

8 months ago

2.11.0

12 months ago

2.10.0

12 months ago

2.9.0

12 months ago

2.8.0

1 year ago

2.7.0

1 year ago

2.7.1

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.5.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

2.4.1

1 year ago

2.4.0

1 year ago

1.5.3

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

2.3.0

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.3.3

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.1.4

1 year ago

2.1.3

1 year ago

2.1.5

1 year ago

2.0.0

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

2.5.0

1 year ago

2.5.1

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.11

1 year ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.8-next.6

2 years ago

1.0.8-next.5

2 years ago

1.0.8-next.4

2 years ago

1.0.8-next.3

2 years ago

1.0.8-next.2

2 years ago

1.0.8-next.1

2 years ago

1.0.8-next.0

2 years ago

1.0.7-next.0

2 years ago

1.0.8-beta.0

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.175

2 years ago

0.9.174

2 years ago

0.9.166

2 years ago

0.9.172

2 years ago

0.9.171

2 years ago

0.9.173

2 years ago

0.9.170

2 years ago

0.9.169

2 years ago

0.9.165

2 years ago

0.9.164

2 years ago

0.9.161

2 years ago

0.9.163

2 years ago

0.9.162

2 years ago

0.9.160

2 years ago

0.9.156

2 years ago

0.9.155

2 years ago

0.9.158

2 years ago

0.9.157

2 years ago

0.9.159

2 years ago

0.9.154

2 years ago

0.9.153

2 years ago

0.9.152

2 years ago

0.9.150

2 years ago

0.9.147

2 years ago

0.9.149

2 years ago

0.9.148

2 years ago

0.9.146

2 years ago

0.9.145

2 years ago

0.9.144

2 years ago

0.9.142

2 years ago

0.9.141

2 years ago

0.9.143

2 years ago

0.9.139

2 years ago

0.9.138

2 years ago

0.9.137

2 years ago

0.9.132

2 years ago

0.9.131

2 years ago

0.9.134

2 years ago

0.9.133

2 years ago

0.9.136

2 years ago

0.9.135

2 years ago

0.9.130

2 years ago

0.9.129

2 years ago

0.9.128

2 years ago

0.9.127

2 years ago

0.9.126

2 years ago

0.9.123

2 years ago

0.9.125

2 years ago

0.9.124

2 years ago

0.9.122

2 years ago

0.9.121

2 years ago

0.9.120

2 years ago

0.9.118

2 years ago

0.9.117

2 years ago

0.9.119

2 years ago

0.9.116

2 years ago

0.9.110

2 years ago

0.9.112

2 years ago

0.9.111

2 years ago

0.9.107

2 years ago

0.9.106

2 years ago

0.9.109

2 years ago

0.9.108

2 years ago

0.9.105

2 years ago

0.9.104

2 years ago

0.9.114

2 years ago

0.9.113

2 years ago

0.9.115

2 years ago

0.9.103

2 years ago

0.9.101

2 years ago

0.9.100

2 years ago

0.9.99

2 years ago

0.9.96

2 years ago

0.9.97

2 years ago

0.9.98

2 years ago

0.9.92

2 years ago

0.9.93

2 years ago

0.9.94

2 years ago

0.9.95

2 years ago

0.9.90

2 years ago

0.9.91

2 years ago

0.9.89

2 years ago

0.9.85

2 years ago

0.9.86

2 years ago

0.9.87

2 years ago

0.9.88

2 years ago

0.9.81

2 years ago

0.9.82

2 years ago

0.9.83

2 years ago

0.9.84

2 years ago

0.9.80

2 years ago

0.9.78

2 years ago

0.9.79

2 years ago

0.9.74

2 years ago

0.9.75

2 years ago

0.9.76

2 years ago

0.9.77

2 years ago

0.9.70

2 years ago

0.9.71

2 years ago

0.9.72

2 years ago

0.9.69

2 years ago

0.9.68

2 years ago

0.9.64

2 years ago

0.9.65

2 years ago

0.9.66

2 years ago

0.9.56

2 years ago

0.9.57

2 years ago

0.9.58

2 years ago

0.9.59

2 years ago

0.9.60

2 years ago

0.9.61

2 years ago

0.9.62

2 years ago

0.9.55

2 years ago

0.9.53

2 years ago

0.9.54

2 years ago

0.9.52

2 years ago

0.9.51

2 years ago

0.9.38

2 years ago

0.9.26

2 years ago

0.9.23

2 years ago

0.9.24

2 years ago

0.9.25

2 years ago

0.9.12

2 years ago

0.9.13

2 years ago

0.9.14

2 years ago

0.9.15

2 years ago

0.9.10

2 years ago

0.9.11

2 years ago

0.9.16

2 years ago

0.9.17

2 years ago

0.9.9

2 years ago

0.9.8

2 years ago

0.9.7

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.2

2 years ago