https://github.com/Alfresco/alfresco-ng2-components In this slides we are going to see how to easy customize: Customize Document List Customize Viewer Customize Login

1. How to customize ADF 1.2
Eugenio Romano

2. Eugenio Romano
Senior Software Engineer Alfresco
https://twitter.com/RomanoEugenio
https://github.com/eromano
eugenio.romano@alfresco.com
Open-source contributor
(Activiti, ADF, Alfresco-js-api, etc.)

3. Agenda
1. Intro ADF
2. Customize Document List
3. Customize Viewer
4. Customize Login

4. ADF 1.2 IS HERE
Monday 27 February we released :
• ADF 1.2
• Alfresco-js-api 1.2
What is new:
https://github.com/Alfresco/alfresco-js-
api/releases/tag/1.2.0
https://github.com/Alfresco/alfresco-
ng2-components/releases/tag/1.2.0

5. • https://github.com/eromano/customize-alfresco-adf-app-examples
Github repo with all the examples
Generator scaffolder for ADF app
Resources
Generator scaffolder for ADF Components
• https://github.com/Alfresco/generator-ng2-alfresco-component
• https://github.com/Alfresco/generator-ng2-alfresco-app

6. Technology Angular 2
• One of the big ideas behind Angular is the concept of components.
• When you create a component, essentially you create a new tag <my-new-tag> this tag is
reusable everywhere. we will teach the browser new tags that have custom functionality.
• Components are self contained and by their nature, promote the separation of concern.
So they are easy to test it.
EASY TO TEST

7. Technology TYPESCRIPT
• ADF is built in a Javascript-like language called TypeScript.
• There are a lot of great reasons to use TypeScript instead of plain Javascript.
• TypeScript isn’t a completely new language, it’s a superset of ES6.
There are a lot of good thing in using TypeScript instead
plain javscript :
• Types
• Classes
• Annotations
• Imports

8. Technology YEOMAN
Yeoman is a tool which helps you to kickstart new projects. With Yeoman you can share
your ideas and best practices with others by creating a scaffold.
With Yeoman you can improve your productivity and not waste time when starting a
project.
• Speed up the startup development time.
• Have common tools: style, build, test, syntax checker and deploy.
• Standardize the developer experience across all components.
• Enforce rules about quality and code contributions.

9. Customize Document List

10. Document list utility links
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-documentlist
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-documentlist/demo
Document list documentation
Document list demo

11. Standard Document List let’s customize
Goal of this customization:
• Add a new column with
the the file version

12. Create the customize-app
https://github.com/Alfresco/generator-ng2-alfresco-app
Install the Alfresco generator component scaffolder following the instruction
in the readme :
• yo ng2-alfresco-app
• Provide the name of the app: customize-app
• Go in the appfolder
• Run npm install
Let's create your customize-app app
Now your scaffolder is complete let’s add some code:

13. Custom Columns How to show file version
Open the files.component.html and add the HTML snippet:
<content-column title="version" key="name" sortable="true" class="full-width ellipsis-cell">
<template let-context="$implicit">
<div>V.{{context.row.getValue('properties.cm:versionLabel')}}</div>
</template>
</content-column>

14. Custom Columns Show the file version
Hide empty value
<div *ngIf="context.row.getValue('properties.cm:versionLabel')">
V.{{context.row.getValue('properties.cm:versionLabel')}}
</div>
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise
a clone of the element is reinserted into the DOM.

15. <div *ngIf="context.row.getValue('properties.cm:versionLabel')" class="version-style">
V.{{context.row.getValue('properties.cm:versionLabel')}}
</div>
files.component.css
Add some style
.version-style {
width: 46px;
text-align: center;
border-radius: 15px;
background: rgb(31, 188, 210);
color: white; }
Custom Columns Show the file version with style

16. Create our first component
https://github.com/Alfresco/generator-ng2-alfresco-component
• yo ng2-alfresco-component
• Go in the component folder and run npm install
Let's create your ng2-alfresco-version-badge
Follow the instruction in the readme of the project to install the generator
Let’s create our very first component. When we have this component written, we will be
able to use it in our HTML

17. import { Component, Input } from '@angular/core';
@Component({
selector: 'ng2-alfresco-version-badge',
styles: [`.badge-style {
width: 46px;
text-align: center;
border-radius: 15px;
background: rgb(31, 188, 210);
color: white;}`],
template: ` <div *ngIf="version" class=”badge-style">
V.{{version}}
</div>`})
export class Ng2AlfrescoVersionBadgeComponent {
@Input()
version: string;
}
Open ng2-alfresco-version-badge
and add the pieces of code that we
have done before to create the
custom column
Component version badge Code

18. <content-column title="version" key="name" sortable="true" class="full-width ellipsis-cell">
<template let-context="$implicit">
<ng2-alfresco-version-badge [version]="context.row.getValue('properties.cm:versionLabel')">
</ng2-alfresco-version-badge>
</template>
</content-column>
Custom Columns with custom component
• Import the new component dependency in the app.module.ts
import { Ng2AlfrescoVersionBadgeModule } from 'ng2-alfresco-version-badge';
• Add the new custom template with our component inside
@NgModule({ imports: […, Ng2AlfrescoVersionBadgeModule, ….]

19. Npm Link
• Because our new component is not published yet we need a way to resolve this
new component in the local environment
Package linking is a two-step process.
1. run npm link in the package folder will create a globally link to “YOUR_PACAKGE”
2. Open the demo shell folder and run npm link YOUR_PACAKGE
This is handy for installing your own stuff, so that you can work on it and test it before to
publish it online

20. Custom Columns with custom component change style
:host >>> .badge-style {
width: 46px;
text-align: center;
background: red;
color: white;
}
We can use the /deep/ or the alias >>> selector to force a style down through the child
component tree into all the child component views.

21. Customize viewer

22. Viewer utility links
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-viewer
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-viewer/demo
Viewer documentation
Viewer demo
Viewer live demo
https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/

23. Viewer file extensions
How I Can handle other extension in the viewer?
If you want handle other file formats that are
not yet supported by the ng2-alfresco-viewer
you can define your own custom handler.
<extension-viewer [supportedExtensions]="['txt']" #extension>
<template let-urlFileContent="urlFileContent" >
<my-custom-txt-component
urlFileContent="urlFileContent"></my-custom-txt-
component>
</template>
</extension-viewer>

24. Custom extension format viewer for zip files
• yo ng2-alfresco-component
• Provide the name of the component : ng2-alfresco-zip-viewer
• Go in the component folder
• Run npm install
Let's create your ng2-alfresco-zip-viewer component
Now your scaffolder is complete let’s add some code:

25. • npm install jszip –save
• npm install --save @types/jszip
https://stuk.github.io/jszip/docu
mentation/examples.html
Add some library
• Install jszip
• Jszip documentation
ngOnChanges() {
this.http.get(this.urlFile, new RequestOptions({
responseType: ResponseContentType.ArrayBuffer
}))
.toPromise().then((res: Response) => {
this.extractZipData(res);
});
}
private extractZipData(res: Response) {
let newZip = new JSZip();
newZip.loadAsync(res.arrayBuffer())
.then((zip) => {
this.zipFiles = Object.keys(zip.files).map((key) => {
return zip.files[key];
});
});
}

26. <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr *ngFor="let file of zipFiles; let idx = index">
<td class="mdl-data-table__cell--non-numeric">{{file.name}}</td>
</tr>
</tbody>
</table>
https://getmdl.io/components/index.html#tables-section
Add a template
In order to show the file list we can use the material design table:
Template:
Iterate with ngFor

27. Result

28. Customize Login

29. Login utility links
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-login
https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-
components/ng2-alfresco-login/demo
Login documentation
Login demo
http://embed.plnkr.co/PfZytJyHcl3xIsa8pdMo/
Login live demo

30. Standard Login let’s customize
Goal of this customization:
• Add a profile photo in the login
page

31. Customize login-demo.component.ts
import { EcmUserService } from 'ng2-alfresco-userinfo';
onLogin($event) {
this.getEcmUserInfo();
this.router.navigate(['/home']);
}
getEcmUserInfo(): void {
this.ecmUserService.getCurrentUserInfo()
.subscribe((res) => {
let ecmUserImageUrl = this.ecmUserService.getUserProfileImage(res.avatarId);
this.saveBase64FromImageUrl(ecmUserImageUrl);
}
);
}
• Get the profile Photo using
the EcmUserService of the
ng2-alfresco-userinfo
component.

32. saveBase64FromImageUrl(url: string) {
let img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = ()=> {
let canvas: any = document.createElement('CANVAS');
let ctx: any = canvas.getContext('2d');
canvas.height = '64';
canvas.width = '64';
ctx.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL();
this.storage.setItem('imageProfile', dataURL);
canvas = null;
};
img.src = url;
}
Save The profile Image in login-demo.component.ts
• Save the photo in the local
storage.
• In order to save the photo
we need to convert it in
Base64

33. <login-header>
<template>
<img class="login-profile-img"
[src]="getProfileImageFromStorage()" />
</template>
</login-header>
.login-profile-img {
margin: auto;
border: 3px solid #ff9800;
border-radius: 34px;
width: 64px;
}
Viewer with profile image login-demo.component.html

34. <login-header>
<template>
<img *ngIf="getProfileImageFromStorage()" class="login-
profile-img” [src]="getProfileImageFromStorage()" />
<img *ngIf="!getProfileImageFromStorage()" class="login-
profile-img" src="https://cdn.rawgit.com/Alfresco/alfresco-
ng2-components/c13c3aae/ng2-components/ng2-alfresco-
userinfo/src/assets/images/anonymous.gif">
</template>
</login-header>
Profile image and default image login-demo.component.html

35. Where to get Info on ADF
https://community.alfresco.com/community/application-development-
framework/pages/get-started
https://gitter.im/Alfresco/alfresco-ng2-components
https://github.com/Alfresco/alfresco-ng2-components/
Community Web-Site
Gitter
Ghithub readme

36. Thanks