ADF 2.4.0 new components

1. ADF 2.4.0 AND BEYOND

2. Eugenio Romano
ADF Tech Lead Alfresco
Open-source contributor: Activiti, ADF, Alfresco-js-api,
etc.
https://twitter.com/RomanoEugenio
https://github.com/eromano
eugenio.romano@alfresco.com

3. 2.0.0 - 2.4.0 New Features
Viewer Enhancements
Sidenav Layout
Gallery view
Viewer Thumbnails
Process content integration
Share content
Lock content
Comment component CS
Permission
Version Manager
New search
Error component
Empty Template
Directives CS

4. WHERE TO START ?
Angular cli?
Example content app?
Demo shell?
Generator?

5. LET’S CREATE OUR APP
1. INSTALL THE YEOMAN GENERATOR
2. RUN THE GENERATOR
$ npm install -g generator-alfresco-adf-app
$ yo alfresco-adf-app

7. DEMO TIME

8. https://alfresco.github.io/adf-component-
catalog/components/ContentActionComponent.html#readme
Enable menu [contentActions]="true"
<content-action
icon="help"
(execute)="myCustomAction()">
</content-action>
Add a custom action
Content Actions

9. https://alfresco.github.io/adf-component-
catalog/components/ContentActionComponent.html#readme
System actions
Lock
<content-action handler="lock icon="lock"
target="document” permission="lock"
title="Lock">
</content-action>
Delete
<content-action handler="delete" icon="delete"
permission="delete"
[disableWithNoPermission]="true" title="delete"
(success)="myCustomAction($event)">
</content-action>

10. https://alfresco.github.io/adf-component-
catalog/components/ToolbarComponent.html
Toolbar
Divider <adf-toolbar-divider></adf-toolbar-divider>
Share
<button mat-icon-button
[baseShareUrl]="'localhost'"
[adf-share]="documentList.selection[0]">
<mat-icon>share</mat-icon>
</button>
<button mat-icon-button
[adf-create-folder]="'-my-'">
<mat-icon>create_new_folder</mat-icon>
</button>
New Folder

11. More directives
[adfNodeDownload]="documentList.selection"
[adf-delete]="documentList.selection"
(delete)="reload()"
adf-edit-folder
Download
Delete
Edit Folder
https://github.com/Alfresco/alfresco-ng2-components/tree/development/docs#directives

12. https://github.com/Alfresco/alfresco-ng2-
components/blob/development/docs/core/viewer.component.md
Viewer
Enable Thumbnails
ENABLE Sidebar
[allowThumbnails]="true"
[allowSidebar]="true"
Add Sidebar template
<ng-template let-node="node"
#sidebarTemplate>
my template
</ng-template>

13. Info drawer
<adf-info-drawer [title]="'My Info'">
<adf-info-drawer-tab [label]=”’one’">
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]=”’two’">
</adf-info-drawer-tab>
</adf-info-drawer>
Comments
Metadata <adf-content-metadata-card [node]="node">
</adf-content-metadata-card>
<adf-comments [nodeId]="nodeId"></adf-
comments>

14. Versioning
<adf-version-manager
*ngIf="documentList.selection[0]"
[node]="documentList.selection[0].entry">
</adf-version-manager>
https://github.com/Alfresco/alfresco-ng2-
components/blob/development/docs/content-
services/version-manager.component.md

15. Error component
{
path: 'error/:id',
component: ErrorContentComponent
},
{
path: '**',
redirectTo: 'error/404'
}
https://github.com/Alfresco/alfresco-ng2-
components/blob/development/docs/core/error-content.component.md

16. Empty Directive
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="star_rate"
title="Custom nice empty template"
subtitle="No files here sorry">
</adf-empty-content>
</ng-template>
</empty-folder-content>
https://github.com/Alfresco/alfresco-ng2-
components/blob/development/docs/core/error-content.component.md

17. What next?

18. Q and A
Thank You!