Alfresco is still working on the new ADF framework that is going to replace Alfresco Share for UI development in the Digital Business Platform. ADF is based in Angular 5 (at the moment I’m writing) and provides a catalog of components to be integrated easily with custom ADF applications.
Alfresco is also providing a reference application named Alfresco Content Application to teach and experiment how to use these ADF Components on the real world.
Below I’m describing my experience on including an ADF Component ready-to-use in ACA (Alfresco Content Application). I thought that this should be a task to be executed in less than one hour, but it was a bit longer in the end.
Reading component documentation
I started reading Version Manager Component documentation, available at GitHub:
https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/version-manager.component.md
After that, I thought that just including a simple HTML tag should do the trick.
<adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
Understanding where to include the code in ACA
I identified from HTML source how an action was declared in this reference application.
And I included my button in the same way:
<button mat-menu-item [app-version-node]="documentList.selection">
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSION' | translate }}</span>
</button>
As actions are developed as individual directives in ACA, I created a new directive name NodeVersionDirective to deal with “app-version-node” tags.
mport { Directive, HostListener, Input } from '@angular/core';
import { MinimalNodeEntity } from 'alfresco-js-api';
@Directive({
selector: '[app-version-node]'
})
export class NodeVersionDirective {
@Input('app-version-node')
selection: MinimalNodeEntity[];
@HostListener('click')
onClick() {
alert("Hello!");
}
constructor(
private dialog: MatDialog
) {}
}
At this point, I have no real link with ADF component documentation, as I couldn’t use adf-version-manager in any way.
Understanding how the ADF component works
Luckily, I remembered that Marting Bergljung is writing and excellent series of posts to document how the components can be used in detail. In this case, I searched the one for the release of the component: 2.0.0
After studying carefully these instructions, I realised that I need to build some other pieces to include default Version Manager in ACA:
- A new component to manage form interaction
- An HTML template for the form
I copied the component…
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@Component({
templateUrl: './version-manager-dialog.component.html',
encapsulation: ViewEncapsulation.None
})
export class VersionManagerDialogComponent {
public nodeName: string;
public nodeEntry: MinimalNodeEntryEntity;
constructor(@Inject(MAT_DIALOG_DATA) data: any,
private containingDialog?: MatDialogRef<VersionManagerDialogComponent>) {
this.nodeEntry = data.entry;
this.nodeName = this.nodeEntry.name;
}
close() {
this.containingDialog.close();
}
}
… and the HTML template
<header mat-dialog-title>{{'APP.VERSION.DIALOG.TITLE' | translate}}</header>
<section mat-dialog-content>
<adf-version-manager [node]="nodeEntry"></adf-version-manager>
</section>
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-button (click)="close()">{{'APP.VERSION.DIALOG.CLOSE' | translate}}</button>
</footer>
Back to ACA development
Completing NodeVersionDirective was easier after having the low level pieces ready.
import { Directive, HostListener, Input } from '@angular/core';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { MatDialog } from '@angular/material';
import { VersionManagerDialogComponent } from '../../components/versions/version-manager-dialog.component';
@Directive({
selector: '[app-version-node]'
})
export class NodeVersionDirective {
@Input('app-version-node')
selection: MinimalNodeEntity[];
@HostListener('click')
onClick() {
this.dialog.open(VersionManagerDialogComponent, {
data: this.selection[0],
panelClass: 'adf-version-manager-dialog',
width: '630px'
});
}
constructor(
private dialog: MatDialog
) {}
}
Later I included the directive and the component in global resources:
- Declaring new Component in app.module.ts
- Including new Directive in common.module.ts
And I finished the tasks with i18n English resources at en.json
Testing
The action was added to document list page and it worked as expected. However, I realised that there were other views including the same actions source code. So I had to copy-paste the same lines in following resources.
<button mat-menu-item [app-version-node]="documentList.selection">
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSION' | translate }}</span>
</button>
- favorites.component.html
- preview-component.html
- recent-files.component.html
- shared-files.component.html
In the end, all the code seemed to be on the right place. Unfortunately, this component is still not ready for production use, as it’s required for the new file uploaded to have exactly the same name of the previous version. Probably there are any other bugs hidden also.
Sharing with the Community
This is not a polished feature, but I felt that it was right to send a pull request to the team. At least for their evaluation. In my opinion is a good sample on how much work is required to add a simple feature to a real app.
https://github.com/Alfresco/alfresco-content-app/pull/252
Recap
My experience was harder than expected and I would fail without Martin’s blog post. So probably there is still a long way to improve ADF documentation and development experience. In fact, I’m still considering if this framework is ready to start a real project or not.
Programming and So 