How to customize ADF 1.2Eugenio Romano

Eugenio RomanoSenior Software Engineer Alfresco

https://twitter.com/RomanoEugenio

https://github.com/eromano

eugenio.romano@alfresco.com

Open-source contributor(Activiti, ADF, Alfresco-js-api, etc.)

Agenda

1. Intro ADF2. Customize Document List3. Customize Viewer4. Customize Login

ADF 1.2 IS HEREMonday 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

• 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

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

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

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.

Customize Document List

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

Standard Document List let’s customize

Goal of this customization:

• Add a new column with the the file version

Create the customize-app

https://github.com/Alfresco/generator-ng2-alfresco-appInstall the Alfresco generator component scaffolder following the instructionin 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:

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>

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.

<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

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

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

<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, ….]

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

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.

Customize viewer

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/

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>

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:

• npm install jszip –save• npm install --save @types/jszip

https://stuk.github.io/jszip/documentation/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]; }); });}

<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

Result

Customize Login

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

Standard Login let’s customize

Goal of this customization:

• Add a profile photo in the login page

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.

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

<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

<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

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

Thanks