![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",
[ ... ]
}]
}
}]
}
}]](https://image.slidesharecdn.com/arealadfexperience-180129105017/85/A-Real-ADF-Experience-19-320.jpg)
A Real ADF Experience
- 1. A real ADF experience by Manolo 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
- 8. Alfresco Development Framework AlfrescoADFapplication Custom AngularJS Components Alfresco AngularJS Components Alfresco Unified JS API Servicelayer REST API Alfresco REST API Activiti
- 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?
Editor's Notes
- #5: https://ixxusdev.atlassian.net/browse/IPMAOE-203 https://ixxusdev.atlassian.net/browse/IPMAOE-204 https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+In+One+Edit+based+on+angularJS+2
- #8: https://ixxusdev.atlassian.net/browse/IPMAOE-203 https://ixxusdev.atlassian.net/browse/IPMAOE-204 https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+In+One+Edit+based+on+angularJS+2
- #9: https://ixxusdev.atlassian.net/browse/IPMAOE-203 https://ixxusdev.atlassian.net/browse/IPMAOE-204 https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+In+One+Edit+based+on+angularJS+2
- #10: https://ixxusdev.atlassian.net/browse/IPMAOE-203 https://ixxusdev.atlassian.net/browse/IPMAOE-204 https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+In+One+Edit+based+on+angularJS+2
- #11: https://ixxusdev.atlassian.net/browse/IPMAOE-203 https://ixxusdev.atlassian.net/browse/IPMAOE-204 https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+In+One+Edit+based+on+angularJS+2
- #13: https://ixxuswiki.atlassian.net/wiki/display/techtalk/All+in+One+Edit+-+Product+Owner