@memberjunction/ng-entity-form-dialog v2.48.0
@memberjunction/ng-entity-form-dialog
Angular component for displaying MemberJunction entity forms in a modal dialog, with support for both complete forms and individual form sections. This component provides a reusable dialog wrapper that dynamically loads the appropriate form component based on the entity type and configuration.
Features
- Display entity forms in a modal dialog powered by Kendo UI
- Support for displaying complete forms or specific form sections
- Automatic save functionality with error handling
- Configurable cancel behavior with automatic change reversion
- Dynamic form component loading using MemberJunction's class factory system
- Customizable dialog dimensions and appearance
- TypeScript support with full type safety
- Integration with MemberJunction entity management system
Installation
npm install @memberjunction/ng-entity-form-dialog
Dependencies
This package requires the following peer dependencies:
@angular/common
: ^18.0.2@angular/core
: ^18.0.2@angular/forms
: ^18.0.2@angular/router
: ^18.0.2
The package also depends on:
@memberjunction/core
: For BaseEntity support@memberjunction/ng-base-forms
: For form components@memberjunction/ng-shared
: For shared services@progress/kendo-angular-dialog
: For dialog UI@progress/kendo-angular-buttons
: For button UI
Module Setup
Import the module in your Angular application:
import { EntityFormDialogModule } from '@memberjunction/ng-entity-form-dialog';
@NgModule({
imports: [
CommonModule,
FormsModule,
EntityFormDialogModule
]
})
export class YourModule { }
Usage Examples
Basic Usage
<mj-entity-form-dialog
[Record]="myEntityRecord"
[Visible]="showDialog"
(DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>
Complete Form Mode
Display the entire form for an entity:
<mj-entity-form-dialog
Title="Edit User"
[Record]="userRecord"
Mode="complete"
[Visible]="showDialog"
[Width]="800"
[Height]="600"
[HandleSave]="true"
[AutoRevertOnCancel]="true"
(DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>
Section Mode
Display only a specific section of a form:
<mj-entity-form-dialog
Title="Edit User Details"
[Record]="userRecord"
Mode="section"
SectionName="details"
[Visible]="showDialog"
[Width]="500"
[Height]="350"
[HandleSave]="true"
[AutoRevertOnCancel]="true"
(DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>
Component Implementation
import { Component } from '@angular/core';
import { BaseEntity, Metadata } from '@memberjunction/core';
@Component({
selector: 'app-user-management',
template: `
<button (click)="editUser()">Edit User</button>
<mj-entity-form-dialog
Title="Edit User"
[Record]="userRecord"
[Visible]="showDialog"
[HandleSave]="true"
[AutoRevertOnCancel]="true"
(DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>
`
})
export class UserManagementComponent {
userRecord: BaseEntity | null = null;
showDialog = false;
async editUser() {
// Load user record using MemberJunction metadata system
const md = new Metadata();
this.userRecord = await md.GetEntityObject('Users');
await this.userRecord.Load(userId);
// Show the dialog
this.showDialog = true;
}
onDialogClosed(result: 'Save' | 'Cancel') {
if (result === 'Save') {
// Handle successful save
console.log('User saved successfully');
// Refresh your UI or perform other actions
} else {
// Handle cancel - changes are automatically reverted if AutoRevertOnCancel is true
console.log('Edit cancelled');
}
// Hide the dialog
this.showDialog = false;
}
}
API Reference
Input Properties
Property | Type | Default | Description |
---|---|---|---|
Title | string | '' | The title displayed in the dialog header |
ShowSaveButton | boolean | true | Whether to display the Save button |
ShowCancelButton | boolean | true | Whether to display the Cancel button |
Width | number | 800 | Initial dialog width in pixels |
Height | number | 600 | Initial dialog height in pixels |
Mode | 'complete' \| 'section' | 'complete' | Display mode - entire form or specific section |
SectionName | string | '' | The section name to display (required when Mode is 'section') |
Record | BaseEntity \| null | null | The entity record to edit (required) |
HandleSave | boolean | true | Automatically save the record when Save is clicked |
AutoRevertOnCancel | boolean | true | Automatically revert changes when Cancel is clicked |
Visible | boolean | false | Controls dialog visibility |
Output Events
Event | Type | Description |
---|---|---|
DialogClosed | EventEmitter<'Save' \| 'Cancel'> | Emitted when the dialog is closed with the action taken |
Public Methods
ShowForm()
Programmatically shows the form. This is automatically called when the Visible
property is set to true
.
@ViewChild(EntityFormDialogComponent) formDialog!: EntityFormDialogComponent;
showFormProgrammatically() {
this.formDialog.ShowForm();
}
CloseWindow(status: 'Save' | 'Cancel')
Programmatically closes the dialog with the specified status.
closeDialogProgrammatically() {
this.formDialog.CloseWindow('Cancel');
}
Form Component Registration
The dialog dynamically loads form components based on the entity type and mode. These components must be registered with MemberJunction's class factory system:
For Complete Mode
Register a subclass of BaseFormComponent
with the entity name:
import { RegisterClass } from '@memberjunction/global';
import { BaseFormComponent } from '@memberjunction/ng-base-forms';
@RegisterClass(BaseFormComponent, 'Users')
export class UserFormComponent extends BaseFormComponent {
// Your form implementation
}
For Section Mode
Register a subclass of BaseFormSectionComponent
with the pattern EntityName.SectionName
:
import { RegisterClass } from '@memberjunction/global';
import { BaseFormSectionComponent } from '@memberjunction/ng-base-forms';
@RegisterClass(BaseFormSectionComponent, 'Users.details')
export class UserDetailsSectionComponent extends BaseFormSectionComponent {
// Your section implementation
}
Error Handling
The component includes built-in error handling for save operations:
- If
HandleSave
istrue
and the save operation fails, the component will:- Display an error notification using
SharedService
- Automatically revert the changes to prevent data corruption
- Still emit the
DialogClosed
event with 'Save' status
- Display an error notification using
Best Practices
- Always provide a Record: The
Record
property is required and must be a valid BaseEntity instance - Handle the DialogClosed event: Always implement a handler to manage dialog visibility
- Use proper entity loading: Load entities using MemberJunction's Metadata system
- Register form components: Ensure your custom form components are properly registered
- Consider dialog dimensions: Adjust
Width
andHeight
based on your form complexity
Integration with Other MemberJunction Packages
This package integrates seamlessly with:
@memberjunction/core
: For entity management@memberjunction/ng-base-forms
: For form component base classes@memberjunction/ng-shared
: For notification services@memberjunction/global
: For class factory registration
Building
To build the package:
npm run build
The package uses Angular's ngc
compiler and outputs to the dist
directory.
8 months ago
8 months ago
4 months ago
8 months ago
8 months ago
6 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
9 months ago
5 months ago
5 months ago
8 months ago
8 months ago
5 months ago
8 months ago
8 months ago
8 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 months ago
5 months ago
9 months ago
9 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
8 months ago
4 months ago
7 months ago
7 months ago
7 months ago
9 months ago
10 months ago
6 months ago
11 months ago
10 months ago
11 months ago
6 months ago
11 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
4 months ago
8 months ago
8 months ago
7 months ago
12 months ago
5 months ago
9 months ago
6 months ago
6 months ago
9 months ago
5 months ago
5 months ago
8 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago