@memberjunction/ng-form-toolbar NPM

@memberjunction/ng-form-toolbar

The @memberjunction/ng-form-toolbar package provides a consistent, feature-rich toolbar component for forms in MemberJunction Explorer applications. It handles standard form operations like editing, saving, and deleting records, while providing advanced functionality such as favorites management, record history viewing, AI-powered chat integration, and list management.

Features

Context-aware button display - Dynamically shows/hides buttons based on form state (view/edit mode)
Save with real-time feedback - Visual status updates during save operations with elapsed time tracking
Smart delete functionality - Dependency checking before deletion with confirmation dialog
Record history tracking - View change history for entities with tracking enabled
Skip AI chat integration - Discuss records with AI assistant directly from the toolbar
Favorites management - Mark frequently accessed records as favorites for quick access
List management - Add records to existing lists for organization
Permission-based visibility - Buttons respect user permissions (edit, delete, etc.)
Server update notifications - Real-time status updates from server during long operations
Consistent UX - Unified toolbar experience across all MemberJunction forms

Installation

npm install @memberjunction/ng-form-toolbar

Requirements

Angular 18+
@memberjunction/global ^2.43.0
@memberjunction/core ^2.43.0
@memberjunction/ng-shared ^2.43.0
@memberjunction/ng-base-forms ^2.43.0
@memberjunction/ng-ask-skip ^2.43.0
@memberjunction/ng-record-changes ^2.43.0
@memberjunction/ng-container-directives ^2.43.0
@progress/kendo-angular-buttons ^16.2.0
@progress/kendo-angular-dialog ^16.2.0
ngx-markdown ^18.0.0

Usage

Basic Setup

First, import the FormToolbarModule in your Angular module:

import { FormToolbarModule } from '@memberjunction/ng-form-toolbar';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    // ... other imports
    FormToolbarModule
  ],
  // ... rest of module configuration
})
export class YourModule { }

Adding the Toolbar to a Form

The toolbar is designed to work seamlessly with forms that extend BaseFormComponent. Add it to your form template:

<!-- Basic usage -->
<mj-form-toolbar [form]="this"></mj-form-toolbar>

<!-- Your form content -->
<form>
  <!-- Form fields and controls -->
</form>

Example component implementation:

import { Component } from '@angular/core';
import { BaseFormComponent } from '@memberjunction/ng-base-forms';
import { UserEntity } from '@memberjunction/core-entities';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent extends BaseFormComponent {
  public record!: UserEntity;
  
  public async ngOnInit() {
    await super.ngOnInit();
    // Additional initialization logic
  }
  
  // Override BaseFormComponent methods as needed
}

Customizing the Toolbar

Control which features are displayed:

<!-- Hide Skip chat button -->
<mj-form-toolbar 
  [form]="this"
  [ShowSkipChatButton]="false">
</mj-form-toolbar>

<!-- Disable toolbar programmatically -->
<mj-form-toolbar 
  [form]="this"
  [Disabled]="isProcessing">
</mj-form-toolbar>

API Reference

FormToolbarComponent

Inputs

Name	Type	Default	Description
`form`	`BaseFormComponent`	Required	The form component instance that this toolbar controls
`ShowSkipChatButton`	`boolean`	`true`	Controls visibility of the Skip AI chat button

Properties

Name	Type	Description
`Disabled`	`boolean`	Global setting to enable/disable the entire toolbar
`CurrentlyDisabled`	`boolean`	Read-only property indicating if toolbar is currently disabled
`listDialogVisible`	`boolean`	Controls visibility of the add-to-list dialog
`showListDialogLoader`	`boolean`	Shows loading indicator in list dialog
`availableLists`	`ListEntity[]`	Lists available for adding the current record
`selectedLists`	`ListEntity[]`	Currently selected lists in the dialog

Methods

Name	Parameters	Return Type	Description
`saveExistingRecord`	`event: MouseEvent`	`Promise<void>`	Saves the current record with visual feedback and progress tracking
`ShowSkipChat`	None	`void`	Toggles the Skip AI chat dialog for the current record
`toggleDeleteDialog`	`show: boolean`	`void`	Shows or hides the delete confirmation dialog
`toggleListDialog`	`show: boolean`	`Promise<void>`	Shows or hides the add-to-list dialog and loads available lists
`addRecordToList`	`list: ListEntity`	`Promise<void>`	Adds the current record to the specified list
`deleteRecord`	None	`Promise<void>`	Deletes the current record after dependency check and confirmation

Toolbar States and Behavior

View Mode

When the form is in view mode (form.EditMode === false), the toolbar displays:

Edit button 🖊️ - Visible if user has edit permission (form.UserCanEdit)
Delete button 🗑️ - Visible if user has delete permission (form.UserCanDelete)
Favorite/Unfavorite toggle ⭐ - Toggle between filled/outlined star based on favorite status
History button 🕐 - Visible only if entity tracks changes (EntityInfo.TrackRecordChanges)
Skip chat button 💬 - Visible if ShowSkipChatButton is true
Add to list button ➕ - Always visible in view mode

Edit Mode

When the form is in edit mode (form.EditMode === true), the toolbar displays:

Save button 💾 - Always visible with "Save" label
Cancel button ↩️ - Only visible for existing records (not new records)
Changes button 📋 - Only visible when record has unsaved changes (record.Dirty)

Save Operation Features

During save operations, the toolbar provides enhanced user feedback:

Visual Feedback: Form opacity reduced to 75% and interactions disabled
Progress Tracking: Real-time elapsed time counter (updates every 100ms)
Server Updates: Displays server status messages via MJGlobal event system
Automatic Cleanup: Restores form state after save completion

Example save feedback display:

Saving... (3 secs)
Processing entity relationships...

Styling and Customization

CSS Classes

The component provides several CSS classes for customization:

/* Main container */
.toolbar-container {
  border-bottom: solid 1px lightgray;
  padding-bottom: 10px;
  margin-bottom: 5px;
}

/* Button spacing */
.toolbar-container button {
  margin-right: 7px;
}

/* Text spacing in buttons */
.toolbar-container .button-text {
  margin-left: 7px;
}

/* Disabled state */
.toolbar-container.disabled {
  pointer-events: none;
  opacity: 0.8;
}

/* Save status message */
.form-toolbar-status-message {
  background: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #1d7032;
  font-weight: bold;
  text-align: center;
}

/* List dialog items */
.list-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  align-items: center;
}

Icons

The toolbar uses Font Awesome icons for consistent visual language:

Edit: fa-pen-to-square
Delete: fa-trash-can
Favorite (filled): fa-solid fa-star
Favorite (outline): fa-regular fa-star
Save: fa-floppy-disk
Cancel: fa-rotate-left
Changes: fa-clipboard-list
History: fa-business-time
Chat: fa-comment-dots
Add: fa-plus

Integration with MemberJunction Services

Event System Integration

The toolbar integrates with MJGlobal event system for:

Server status updates: Listens for EventCodes.PushStatusUpdates during save operations
Tab management: Raises EventCodes.CloseCurrentTab after successful deletion

Skip Chat Integration

When Skip chat is enabled, the toolbar embeds the mj-skip-chat-with-record-window component:

<mj-skip-chat-with-record-window
  [LinkedEntityID]="form.EntityInfo.ID"
  [LinkedEntityPrimaryKey]="LinkedEntityPrimaryKey"
  [WindowOpened]="_skipChatDialogVisible"
  (WindowClosed)="ShowSkipChat()">
</mj-skip-chat-with-record-window>

Record Changes Integration

For entities with change tracking enabled:

<mj-record-changes 
  [record]="form.record" 
  (dialogClosed)="form.handleHistoryDialog()">
</mj-record-changes>

Advanced Usage Examples

Custom Toolbar with Conditional Features

@Component({
  template: `
    <mj-form-toolbar 
      [form]="this"
      [ShowSkipChatButton]="shouldShowChat">
    </mj-form-toolbar>
  `
})
export class CustomFormComponent extends BaseFormComponent {
  get shouldShowChat(): boolean {
    // Show chat only for certain record types or user roles
    return this.record?.Status === 'Active' && 
           this.currentUser.hasRole('Manager');
  }
}

Handling Toolbar Events

export class FormWithToolbarComponent extends BaseFormComponent {
  async ngOnInit() {
    await super.ngOnInit();
    
    // Listen for toolbar-related events
    MJGlobal.Instance.GetEventListener(false).subscribe((event: MJEvent) => {
      if (event.eventCode === EventCodes.CloseCurrentTab) {
        // Handle tab closure after deletion
        this.handleTabClosure();
      }
    });
  }
}

Programmatic Toolbar Control

export class AdvancedFormComponent extends BaseFormComponent {
  @ViewChild(FormToolbarComponent) toolbar!: FormToolbarComponent;
  
  async performBulkOperation() {
    // Disable toolbar during bulk operations
    this.toolbar.Disabled = true;
    
    try {
      await this.processBulkData();
    } finally {
      this.toolbar.Disabled = false;
    }
  }
  
  // Programmatically show Skip chat
  openAIAssistant() {
    this.toolbar.ShowSkipChat();
  }
}

Error Handling

The toolbar implements comprehensive error handling:

Save errors: Displays error notifications with server messages when available
Delete errors: Shows appropriate messages for dependency conflicts
List operations: Notifies users of success/failure when adding to lists
Network errors: Gracefully handles connection issues with user-friendly messages

Best Practices

Always pass the form reference: The toolbar requires a valid BaseFormComponent instance
Handle permissions properly: Ensure your form correctly implements permission checks
Test save operations: Verify your entity's save logic works with the toolbar's feedback system
Consider mobile responsiveness: The toolbar works on mobile but may need custom styling
Use consistent icons: Follow MemberJunction's icon conventions when extending

Troubleshooting

Common Issues

Buttons not appearing: Check that your form properly extends BaseFormComponent and implements required properties
Save feedback not showing: Ensure your form's parent element is properly structured
Skip chat not working: Verify @memberjunction/ng-ask-skip is properly installed and configured
History not available: Confirm the entity has TrackRecordChanges enabled in metadata

Debug Mode

Enable debug logging by adding to your component:

ngOnInit() {
  // Log toolbar state changes
  console.log('Toolbar disabled:', this.toolbar.CurrentlyDisabled);
  console.log('Form edit mode:', this.form.EditMode);
  console.log('User permissions:', {
    canEdit: this.form.UserCanEdit,
    canDelete: this.form.UserCanDelete
  });
}