adf in action 1.2
TRANSCRIPT
How to customize ADF 1.2Eugenio Romano
Eugenio RomanoSenior Software Engineer Alfresco
https://twitter.com/RomanoEugenio
https://github.com/eromano
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