Overview
The Venzia Datalinks library provides two dialog components for managing datalinks:
- DatalinkDialogComponent: Main dialog for viewing and managing all datalinks on a node
- AddDatalinkDialogComponent: Dialog for searching and selecting datalink entries to add
DatalinkDialogComponent
Main dialog component that displays all datalinks associated with an Alfresco node.
Import
import { DatalinkDialogComponent } from 'venzia-datalink';
Selector
host: { class: 'aqua-datalink-dialog' }
Opening the Dialog
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DatalinkDialogComponent } from 'venzia-datalink';
@Component({
selector: 'app-my-component',
template: `
<button (click)="openDatalinkDialog()">Manage Datalinks</button>
`
})
export class MyComponent {
nodeId = 'workspace://SpacesStore/abc-123';
constructor(private dialog: MatDialog) {}
openDatalinkDialog() {
this.dialog.open(DatalinkDialogComponent, {
data: { nodeId: this.nodeId },
panelClass: 'aca-permissions-dialog-panel',
width: '800px'
});
}
}
Dialog Data
The ID of the Alfresco node to display datalinks for
Properties
ID of the node being managed
Currently selected datalink rows
Reference to the child datalink list component
Methods
ngAfterViewInit
Lifecycle hook that subscribes to reload events from the datalink list.
onSelect
Handles selection changes in the datalink list.
onSelect(selectionList: any[]): void
Array of selected datalink row objects
onError
Handles errors from the datalink list.
onError(errorMessage: string): void
openAddDataLinkDialog
Opens the add datalink dialog.
openAddDataLinkDialog(event: Event): void
onRemoveSelectionRows
Removes selected rows from the datalink.
onRemoveSelectionRows(event: Event): void
reload
Reloads the dialog with fresh data.
Example Usage
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DatalinkDialogComponent } from 'venzia-datalink';
import { Store } from '@ngrx/store';
import { AppStore } from '@alfresco/aca-shared/store';
@Component({
selector: 'app-document-actions',
template: `
<button
mat-button
[disabled]="!selectedNode"
(click)="manageDatalinks()">
<mat-icon>link</mat-icon>
Manage Datalinks
</button>
`
})
export class DocumentActionsComponent {
selectedNode: any;
constructor(
private dialog: MatDialog,
private store: Store<AppStore>
) {}
manageDatalinks() {
if (!this.selectedNode) return;
const dialogRef = this.dialog.open(DatalinkDialogComponent, {
data: { nodeId: this.selectedNode.id },
panelClass: 'aca-permissions-dialog-panel',
width: '800px',
height: '600px',
disableClose: false
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed with result:', result);
// Refresh your view if needed
});
}
}
AddDatalinkDialogComponent
Dialog component for searching and selecting external data to add as datalinks.
Import
import { AddDatalinkDialogComponent } from 'venzia-datalink';
Selector
'aqua-datalink-add-dialog'
Opening the Dialog
This dialog is typically opened via the VenziaDatalinkSearchDialogService, but can also be opened directly:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AddDatalinkDialogComponent } from 'venzia-datalink';
import { Subject } from 'rxjs';
@Component({
selector: 'app-my-component',
template: `<button (click)="openAddDialog()">Add Data</button>`
})
export class MyComponent {
constructor(private dialog: MatDialog) {}
openAddDialog() {
const confirm = new Subject();
confirm.subscribe({
next: (selections) => {
console.log('User selected:', selections);
},
complete: () => {
console.log('Dialog closed');
}
});
this.dialog.open(AddDatalinkDialogComponent, {
data: {
nodeId: 'workspace://SpacesStore/abc-123',
dataLink: this.datalinkConfig,
title: 'Add Customer Data',
confirm: confirm
},
panelClass: 'adf-add-permission-dialog',
width: '630px'
});
}
}
Dialog Data Interface
export interface AddDatalinkDialogData {
title?: string;
nodeId: string;
dataLink: any;
confirm: Subject<NodeEntry[]>;
}
ID of the target Alfresco node
Datalink configuration object
confirm
Subject<NodeEntry[]>
required
RxJS Subject that emits selected items when user confirms
Properties
Array of currently selected items
Dialog data injected from parent
Methods
onSelect
Handles selection changes in the search results.
onSelect(items: any[]): void
Array of selected item objects
onAddClicked
Handles the add button click, emitting selections and closing dialog.
Example Usage
import { Component } from '@angular/core';
import { VenziaDatalinkSearchDialogService } from 'venzia-datalink';
import { Node } from '@alfresco/js-api';
@Component({
selector: 'app-node-actions',
template: `
<button (click)="addDatalinks()">Add Customer Data</button>
`
})
export class NodeActionsComponent {
node: Node;
datalinkConfig: any;
constructor(
private datalinkDialogService: VenziaDatalinkSearchDialogService
) {}
addDatalinks() {
this.datalinkDialogService
.openAddDatalinkDialog(this.node, this.datalinkConfig, 'Select Customers')
.subscribe(
(selections) => {
console.log('Added', selections.length, 'datalinks');
},
(error) => {
console.error('Error adding datalinks:', error);
}
);
}
}
Implementation Details
import { Component, Inject, ViewEncapsulation, ViewChild, AfterViewInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { DatalinkListComponent } from '../../components/datalink-list/datalink-list.component';
import { AppStore, SnackbarErrorAction } from '@alfresco/aca-shared/store';
import { Store } from '@ngrx/store';
@Component({
host: { class: 'aqua-datalink-dialog' },
encapsulation: ViewEncapsulation.None,
styleUrls: ['./datalink-dialog.component.scss'],
templateUrl: './datalink-dialog.component.html'
})
export class DatalinkDialogComponent implements AfterViewInit {
@ViewChild('datalinkList')
datalinkList: DatalinkListComponent;
nodeId: string;
currentSelection: any[] = [];
constructor(
@Inject(MAT_DIALOG_DATA) data: any,
private dialog: MatDialog,
private store: Store<AppStore>
) {
this.nodeId = data.nodeId;
}
ngAfterViewInit() {
this.datalinkList.reloadDialog.subscribe(() => {
this.reload();
});
}
onSelect(selectionList: any[]) {
this.currentSelection = selectionList;
}
onError(errorMessage: string) {
this.store.dispatch(new SnackbarErrorAction(errorMessage));
}
openAddDataLinkDialog(event: Event) {
this.datalinkList.openAddDatalinkDialog(event);
}
onRemoveSelectionRows(event: Event) {
this.datalinkList.deleteSelectRows(event);
}
reload() {
this.dialog.open(DatalinkDialogComponent, {
data: { nodeId: this.nodeId },
panelClass: 'aca-permissions-dialog-panel',
width: '800px'
});
}
}
Styling
Both components support custom styling through:
ViewEncapsulation.None for global styling- Panel classes for Material dialog customization
- Host class bindings
Dependencies
@angular/core: Angular framework@angular/material/dialog: Material dialogs@alfresco/aca-shared/store: State management@ngrx/store: Redux store
See Also
