2.48.0 • Published 4 months ago

@memberjunction/ng-user-view-properties v2.48.0

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

@memberjunction/ng-user-view-properties

A comprehensive Angular dialog component for viewing and editing User View properties within the MemberJunction framework. This component enables users to configure how entity data is displayed in grids, including field visibility, sorting, filtering, and sharing options.

Features

  • Complete View Configuration: Modify all aspects of a user view through a tabbed interface
  • Field Management: Drag-and-drop reordering of fields with visibility toggles
  • Advanced Filtering: Supports both standard filters and AI-powered "Smart Filters"
  • Custom Sorting: Multi-field sorting with direction controls
  • Sharing Controls: Permission management for user views
  • Smart Filter Integration: Reference other views and lists in Smart Filter prompts
  • Advanced Options: Direct SQL WHERE clause editing for complex queries

Installation

npm install @memberjunction/ng-user-view-properties

Requirements

This library has the following peer dependencies:

  • Angular 18.x
  • @memberjunction/core
  • @memberjunction/global
  • @memberjunction/core-entities
  • @memberjunction/ng-base-forms
  • @memberjunction/ng-find-record
  • @memberjunction/ng-resource-permissions
  • @memberjunction/ng-shared
  • @memberjunction/ng-tabstrip
  • Multiple Kendo UI Angular components:
    • @progress/kendo-angular-sortable
    • @progress/kendo-angular-dialog
    • @progress/kendo-angular-layout
    • @progress/kendo-angular-inputs
    • @progress/kendo-angular-buttons
    • @progress/kendo-angular-filter
    • @progress/kendo-angular-dropdowns
    • @progress/kendo-data-query

Usage

Module Import

import { UserViewPropertiesDialogModule } from '@memberjunction/ng-user-view-properties';

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

Basic Usage

<mj-user-view-properties-dialog
  [ViewID]="currentViewId"
  (dialogClosed)="onViewPropertiesClosed($event)">
</mj-user-view-properties-dialog>

Creating a New View

@ViewChild('viewProperties') viewPropertiesDialog: UserViewPropertiesDialogComponent;

createNewView() {
  this.viewPropertiesDialog.CreateView('YourEntityName');
}

Creating a View in a Specific Category

createCategorizedView() {
  this.viewPropertiesDialog.CreateViewInCategory('YourEntityName', 'categoryId');
}

API Reference

Component Class: UserViewPropertiesDialogComponent

Extends BaseFormComponent from @memberjunction/ng-base-forms.

Inputs

InputTypeDescription
ViewIDstring | undefinedID of the view to edit or undefined for a new view
EntityNamestring | undefinedEntity name when creating a new view
CategoryIDstring | nullOptional category ID for the view
ShowPropertiesButtonbooleanWhether to show the properties button (default: true)

Outputs

OutputTypeDescription
dialogClosedEventEmitterEmits when dialog is closed with save status and view data

Methods

MethodParametersReturnsDescription
CreateViewentityName: stringvoidOpens dialog to create a new view
CreateViewInCategoryentityName: string, viewCategoryID: stringvoidCreates a view in a specific category
OpenViewID?: stringvoidOpens the dialog for editing an existing view
saveProperties-PromiseSaves the current view properties
closePropertiesDialog-voidCloses the dialog and emits dialogClosed event
Load-PromiseLoads view data from database or creates new record
toggleColumncolumn: anyPromiseToggles visibility of a column in the view
onDragEnde: DragEndEventvoidHandles field reordering via drag and drop
addSort-voidAdds a new sort field to the view
removeSortitem: anyvoidRemoves a sort field from the view

Component Structure

The dialog consists of six tabbed sections:

  1. General: Basic view properties (name and description)
  2. Fields: Configure visible fields and their order using drag-and-drop
  3. Filters: Set up filtering using either Smart Filters or standard filters
  4. Sorting: Define multi-field sorting with direction control (asc/desc)
  5. Sharing: Manage view permissions using ResourcePermissions
  6. Advanced: Access to SQL WHERE clauses and Smart Filter explanations

Key Features

  • Drag-and-Drop Field Ordering: Uses Kendo SortableComponent for field reordering
  • Smart Filter Support: Natural language filtering with view/list references
  • Permission-Based Editing: Respects user permissions via UserCanEdit property
  • Keyboard Support: Enter key saves changes (except in textareas)
  • Auto-Navigation: After creating a new view, automatically navigates to it
  • Event Broadcasting: Emits ViewUpdated events through MJGlobal event system

Examples

Complete Integration Example

import { Component, ViewChild } from '@angular/core';
import { UserViewPropertiesDialogComponent } from '@memberjunction/ng-user-view-properties';
import { Metadata } from '@memberjunction/core';

@Component({
  selector: 'app-my-component',
  template: `
    <button kendoButton (click)="editViewProperties()">Edit View</button>
    <button kendoButton (click)="createNewView()">New View</button>
    
    <mj-user-view-properties-dialog
      #viewProperties
      [ViewID]="selectedViewId"
      (dialogClosed)="onViewPropertiesClosed($event)">
    </mj-user-view-properties-dialog>
  `
})
export class MyComponent {
  @ViewChild('viewProperties') viewPropertiesDialog: UserViewPropertiesDialogComponent;
  selectedViewId: string = 'some-view-id';
  
  editViewProperties() {
    this.viewPropertiesDialog.Open(this.selectedViewId);
  }
  
  createNewView() {
    this.viewPropertiesDialog.CreateView('Contacts');
  }
  
  onViewPropertiesClosed(event: any) {
    if (event.Saved) {
      console.log('View saved:', event.ViewEntity);
      // Refresh your view or data
    }
  }
}

Handling Smart Filters

Smart Filters allow users to describe filtering requirements in natural language:

<textarea 
  placeholder="Show me all contacts who have been inactive for more than 30 days and have a status of 'Lead'"
  [(ngModel)]="smartFilterPrompt">
</textarea>

Notes

  • The component integrates with the MemberJunction metadata system for field information
  • Permissions are automatically enforced via the UserCanEdit property
  • The dialog automatically adjusts for window resizing
  • Changes are not applied until the user clicks Save
  • The component uses UserViewEntityExtended for enhanced view functionality
  • Grid state and filter state are stored as JSON strings in the database
  • Sort state supports both legacy numeric (1/2) and modern string ('asc'/'desc') formats
  • The dialog is moved to document body for proper z-index stacking

Build Instructions

To build this package:

cd packages/Angular/Explorer/user-view-properties
npm run build

This will compile the TypeScript and generate the distribution files in the dist folder.

2.27.1

8 months ago

2.23.2

8 months ago

2.46.0

4 months ago

2.23.1

8 months ago

2.27.0

8 months ago

2.34.0

6 months ago

2.30.0

7 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.15.2

9 months ago

2.34.2

6 months ago

2.34.1

6 months ago

2.15.1

9 months ago

2.38.0

5 months ago

2.45.0

5 months ago

2.22.1

8 months ago

2.22.0

8 months ago

2.41.0

5 months ago

2.22.2

8 months ago

2.26.1

8 months ago

2.26.0

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.37.1

5 months ago

2.37.0

5 months ago

2.14.0

9 months ago

2.21.0

9 months ago

2.44.0

5 months ago

2.40.0

5 months ago

2.29.0

7 months ago

2.29.2

7 months ago

2.29.1

7 months ago

2.25.0

8 months ago

2.48.0

4 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.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.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.47.0

4 months ago

2.24.1

8 months ago

2.24.0

8 months ago

2.31.0

7 months ago

2.12.0

12 months ago

2.39.0

5 months ago

2.16.1

9 months ago

2.35.1

6 months ago

2.35.0

6 months ago

2.16.0

9 months ago

2.42.1

5 months ago

2.42.0

5 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.6.1

1 year ago

2.6.0

1 year ago

2.7.0

1 year ago

2.5.2

1 year ago

2.7.1

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.6.1

1 year ago

1.6.0

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

2.4.1

1 year ago

2.4.0

1 year ago

2.0.0

1 year ago

1.7.1

1 year ago

1.5.3

1 year ago

1.7.0

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.3.3

1 year ago

1.5.0

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

2.3.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.5.0

1 year ago

2.3.2

1 year ago

2.1.4

1 year ago

2.3.1

1 year ago

2.1.3

1 year ago

2.5.1

1 year ago

2.3.3

1 year ago

2.1.5

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.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-beta.0

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.6

2 years ago

1.0.4

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.14

2 years ago

0.9.13

2 years ago

0.9.12

2 years ago

0.9.9

2 years ago

0.9.10

2 years ago

0.9.6

2 years ago

0.9.11

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.5

2 years ago

0.9.2

2 years ago