Building Alfresco's digital business platform. 20th of June Berlin

Transcription

1 Building Alfresco's digital business platform Francesco Corti - FrkCorti 20th of June Berlin

2 Worked many years for partners Community member No german sorry Francesco Corti FrkCorti Product Evangelist

3 Introducing the Alfresco Application Development Framework (aka ADF)

4

5

6 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

7 Assembling lego blocks to quickly build apps

8 Where ADF lives?

9 150+ components

10 150+ components

11 The Alfresco ADF funding technology and architecture

12

13 Tooling to get started in few minutes

14 ADF architecture Content Services Process Services

15 ADF architecture Content Services Process Services

16 Alfresco Share Doc. library centric solution ADF architecture Aikau Share Surf Content Services Process Services

17 Alfresco Share Application Dev Framework Doc. library centric solution ADF architecture Aikau Business Application Share Surf Content Services Process Services

18 Alfresco Share Application Dev Framework Doc. library centric solution ADF architecture Aikau Share Surf Alfresco Unified JS API Content Services Process Services

19 Alfresco Share ADF architecture Application Dev Framework Doc. library centric solution Custom UX Applications Aikau Framework Share Surf Alfresco Unified JS API Content Services Process Services

20 Alfresco Share Application Dev Framework Doc. library centric solution ADF architecture Aikau Share Surf third party experimentation as an example Alfresco Unified JS API Content Services Process Services

21 Alfresco Share ADF architecture Application Dev Framework Doc. library centric solution Rapid UX Applications Custom UX Applications Aikau UI Components Framework Share Surf Alfresco Unified JS API Content Services Process Services

22 Alfresco Share ADF architecture Application Dev Framework Doc. library centric solution Rapid UX Applications Custom UX Applications Aikau UI Framework Share Surf Alfresco Unified JS API Content Services Process Services

23 Alfresco Share ADF architecture Application Dev Framework Doc. library centric solution Content/Process Example Apps Custom UX Applications Aikau UI Framework Share Surf Alfresco Unified JS API Content Services Process Services

24 Stop talking! HANDS ON!

25 Building an ADF app on ACS using Yeoman Live demo yo alfresco-adf-app Title: myapp Install the libraries: Y cd myapp gedit proxy.conf.js npm start

26 Customizing the Login Live demo Introducing the ADF Catalog Searching the LoginComponent Show the component source code (fast) Add to the HTML: [backgroundimageurl]="' es.com/images/large-previews/8dc/empty jpg'" [logoimageurl]="' /images/large-previews/bae/footprints jpg'" Add to the TS (validateform): alert("add here you custom validations!");

27 Change documents layout (1/2) Live demo 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>

28 Change documents layout (2/2) Live demo Add: currentfolderid="-my-" then put it back. Add: contentactions="true" Add: <content-actions><content-action target="folder" title="action on folders" (execute)="myactiononfolder1($event)"></conten t-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>

29 Adding a page (component) Live demo 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.

30 Adding the Excel sheet component Live demo 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', ' ', '2.884', '3.015', '3.228'], ['Algeria', '39.208', '1000s', '2013', " [columns]="columns" [colheaders]="true" [colwidths]="colheaders" [options]="options" (HANDSONTABLE_EVENT)="eventHandler"> </hot-table> '0.0189', '36.383', '33.461', '25.577']]

31 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 Live demo

32 Something about the roadmap

33 ADF What s next! June Fall Facet search Extensibility / Plugins Search results filtering Evaluators SSO based on Keycloak New site management Improved upload Activiti 7 & APS 2.0

34 THANK YOU! Building Alfresco's digital business platform Francesco Corti - FrkCorti 20th of June Berlin