Alfresco’s Application Development Framework (ADF) could be one of the best technology decisions Alfresco has made in the last few years - the creation of responsive, adaptive and attractive User Interfaces have been taken to a new level. At Ixxus we are excited to have already leveraged the benefits of this framework by integrating it into some of our products and projects. Join us in this session to find out more about: - The benefits of ADF in Alfresco architectures - Our transition from Share Development to ADF - Pros and cons, plus the mistakes you should avoid - The widgets on our wishlist!

1. A real ADF experience
by Manolo Swerts

2. Mano(lo) Swerts

3. A Strategic Alfresco Partner
Working with Alfresco since Alfresco v0.6
Over 140 Alfresco implementations
Alfresco & WCM Architecture Design Patterns
First worldwide implementation of the first Alfresco WCM product in 2007
Excellent Alfresco knowledge and highly trained and experienced staff
Alfresco Certified Engineers and Alfresco Certified Administrators
Authoring of leading Alfresco books
Alfresco Technical blogs http://www.ixxus.com/blog/
Multiple speaking engagements at the Alfresco Conferences (2011-2014),
Alfresco Days and BeeCon 2016
Alfresco Million $ Club (May 2012) – Only 2 companies awarded
Alfresco Solution Partner of the Year 2013 and 2014
Alfresco Best Solution 2015 and Partner of the Year 2015 (Northern Europe)

4. What we’ll cover
• What is ADF?
• The benefits of ADF in Alfresco architectures
• ADF at Ixxus
• Our Experience
• What does the future hold?

5. What is ADF?

6. Evolution of Alfresco Development
Ant
SDK
Community
Maven
SDK
Alfresco
SDK
ADF

7. Alfresco Development Framework

8. Alfresco Development Framework
AlfrescoADFapplication
Custom AngularJS Components
Alfresco AngularJS Components
Alfresco Unified JS API
Servicelayer
REST API
Alfresco
REST API
Activiti

9. Alfresco Development Framework

10. Why ADF?
• Rapid Application Development in environments that don’t use Share
• Freedom of development
• Focused User Experience
• Responsive Design
• Integrate with Alfresco Share for best of both worlds

11. ADF at Ixxus

12. All In One Edit

13. Requirements
Configurable User Friendly Easy to Deploy

14. How?

15. Architecture
ADF
Custom action
AOE Component (View)
Edit Form Component
TinyMCE Component
Alfresco File View
Component
Share
Custom action
/all-in-one-edit/<nodeId>
<authentication ticket>

16. Prepare Environment
• Alfresco 5.2+ / 201609 EA+
• Install enablecors module for Activiti and Alfresco
• Activiti 1.5.2.1+
• Update default Activiti username and password
• Node.js (5.x.x / npm 3.x.x)

17. Generate ADF app
$> docker-compose up
$> n 6.9.2
$> npm install -g yo
$> npm install -g generator-ng2-alfresco-app
$> yo ng2-alfresco-app
$> npm install
$> npm start

18. Create Edit Form Component
• Based on Activiti Forms component
• Configurable
Edit Form AngularJS 2 Component
all-in-one-
edit.ts
all-in-one-
edit.html
all-in-one-
edit.css
index.ts
app.modul
e.ts
Widgets

19. Edit Form Component Config
[{
"id": 1013,
"name": "pt:article",
"formDefinition": {
"fields": [{
"fieldType": "ContainerRepresentation",
"id": "1470062843702",
"type": "container",
"numberOfColumns": 2,
"fields": {
"1": [{
"fieldType": "FormFieldRepresentation",
"id": "title",
"propertyName": "cm:title",
"name": "Title",
"type": "text",
"value": null,
"required": true,
"readOnly": false,
[ ... ]
}],
"2": [{
"fieldType": "FormFieldRepresentation",
"id": "nativeAd",
"propertyName": "pt:nativeAd",
"name": "Native Advertising/Marketing",
"type": "checkbox",
[ ... ]
}]
}
}]
}
}]

20. Create AOE Component (View)
AOE AngularJS 2 Component
index.ts
app.modul
e.ts
app.routes
.ts
all-in-one-
edit.ts
all-in-one-
edit.html
all-in-one-
edit.css
Edit Form Component TinyMCE Component
Alfresco File Viewer
Component

21. Add AOE Action
• Update Files Component to add new Action
Files Component
files.comp
onent.html
files.comp
onent.ts

22. Result

25. Let’s reflect…

26. Our Experience
✅ Low learning curve for AngularJS developers
✅ Flexible
✅ Quickly create an Alfresco application
✅ Open Source
➖ Needs more components
➖ Not available for older Alfresco / Activiti
versions

27. What does the future hold?
• Bringing the full-fledged AOE experience to ADF:
• Convert TinyMCE component to a form widget for inline placement and one-click editing
• Alfresco File Viewer inline
• Support more view and editing formats
• More components
• Get more Ixxus modules on the ADF bandwagon
• What about integrating Angular 2 code in Share?

29. Speaker contacts
mano.swerts@ixxus.com
@manoswerts