Building Alfresco's digital business platformFrancesco Corti - FrkCorti

20th of June 2018 - Berlin

Francesco Corti

FrkCorti

● Worked many years for partners

● Community member

● No german sorry

Product Evangelist

Introducing theAlfresco Application Development

Framework (aka ADF)

● 150+ reusable, localized & responsive UIs components● Build “fit-to-purpose” experiences in days rather than months● Leverages proven Angular / Material Design components● Goes beyond UIs: JavaScript API client leveraging platform services

Assembling lego blocks to quickly build apps…

WhereADFlives?

150+ components

150+ components

The Alfresco ADFfunding technology

and architecture

Tooling to get started in few minutes

ADF architecture

Content Services Process Services

ADF architecture

REST API REST API

Content Services Process Services

ADF architecture Aikau

Share Surf

Doc. library centric solution

Alfresco Share

REST API REST API

Content Services Process Services

ADF architecture AikauBusiness Application

Share Surf

Doc. library centric solution

Alfresco Share Application Dev Framework

REST API REST API

Content Services Process Services

ADF architecture Aikau

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Alfresco Share Application Dev Framework

REST API REST API

Content Services Process Services

ADF architecture Aikau Framework

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Custom UX Applications

Alfresco Share Application Dev Framework

REST API REST API

Content Services Process Services

ADF architecture Aikau

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Alfresco Share Application Dev Framework

REST API REST API

Content Services Process Services

third party experimentation as an example

ADF architecture Aikau Framework

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Custom UX Applications

Alfresco Share Application Dev Framework

REST API REST API

Content Services Process Services

Rapid UX Applications

UI Components

ADF architecture Aikau Framework

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Custom UX Applications

Alfresco Share Application Dev Framework

UI

REST API REST API

Content Services Process Services

Rapid UX Applications

ADF architecture Aikau Framework

Alfresco Unified JS APIShare Surf

Doc. library centric solution

Content/Process Example Apps

Custom UX Applications

Alfresco Share Application Dev Framework

UI

REST API REST API

Content Services Process Services

Stop talking!HANDS ON!

Live demo

Building an ADF app on ACS using Yeoman

• http://online-stopwatch.chronme.com/• yo alfresco-adf-app

– Title: myApp– Install the libraries: Y

• cd myApp• gedit proxy.conf.js• npm start

Live demo

Customizing the Login

• Introducing the ADF Catalog• Searching the LoginComponent• Show the component source code (fast)• Add to the HTML:

[backgroundImageUrl]="'https://images.freeimages.com/images/large-previews/8dc/empty-1538122.jpg'" [logoImageUrl]="'https://images.freeimages.com/images/large-previews/bae/footprints-1308282.jpg'"

• Add to the TS (validateForm):alert("add here you custom validations!");

Live demo

Change documents’ layout (1/2)

• Find a folder with some documents inside.• Search for adf-document-list in Catalog• Edit the documentlist.component.html.• Add: [display]="'gallery'"• Add:

<data-columns> <data-column title="Name" key="name" class="full-width ellipsis-cell"></data-column> <data-column title="Node type" key="nodeType"></data-column></data-columns>

• Add:<empty-folder-content><ng-template><h1>Sorry, no content here</h1></ng-template></empty-folder-content>

Live demo

Change documents’ layout (2/2)

• Add: currentFolderId="-my-" then put it back.• Add: contentActions="true"• Add: <content-actions><content-action

target="folder" title="Action on folders" (execute)="myActionOnFolder1($event)"></content-action></content-actions>

• Develop an alert on myActionOnFolder1(event)• Change alert to have event.value.entry.id• Develop one on documents instead of folders• Add as predefined actions: <content-action

target="document" title="Download" handler="download"></content-action>

Live demo

Adding a page (component)

• Stop app• ng generate component new-page

--module=app• Add routing to app.routes.ts• Show the results

• Then change the new-page.component.html page on the fly.

• Then edit the app.component.html and add an item to the menu.

Live demo

Adding the Excel sheet component

• npm i ng2-handsontable --save• Edit src/polyfill.ts and add import

'handsontable'; before import 'zone.js/dist/zone';

• Edit the app.module.js– import { HotTableModule } from 'ng2-handsontable';– imports: [ HotTableModule

• Edit new-page.component.html<hot-table [data]="[['Afghanistan', '30.552', '1000s', '2013', '0.0244', '27.708', '24.019', '11.215'], ['Albania', '2.774', '1000s', '2013', '-0.0100', '2.884', '3.015', '3.228'], ['Algeria', '39.208', '1000s', '2013',

'0.0189', '36.383', '33.461', '25.577']] " [columns]="columns" [colHeaders]="true" [colWidths]="colHeaders" [options]="options" (HANDSONTABLE_EVENT)="eventHandler"></hot-table>

Live demo

Introducing Alfresco Content app

• Showing the app

• Show that customizations can follow exactly the same principles

• Try the login customization

• Show the Smart Folders using the ADF

Something aboutthe roadmap

What’s next!ADF

Facet search

Search results filtering

SSO based on Keycloak

Improved upload

Extensibility / Plugins

Evaluators

New site management

Activiti 7 & APS 2.0

2.4 - June Fall 2018+

Building Alfresco's digital business platformFrancesco Corti - FrkCorti

20th of June 2018 - Berlin

THANK YOU!