Downloaded 22 times
More Related Content
Similar to Extensibility for ADF applications
Extensibility for ADF applications
- 1. Extensibility for ADFApplications Denys Vuika @DenysVuika
- 2. Learn. Connect. Collaborate. Aboutme • Applications Platform Developer @ Alfresco • Alfresco Content Application tech lead • Open Source contributor • Blogger and writer Leanpub: https://leanpub.com/developing-with-angular Amazon Kindle: https://www.amazon.com/dp/B07KD9KHQW Amazon Paperback: https://www.amazon.com/dp/1731123426 1618 readers, 476 pages @ DenysVuika
- 3. Learn. Connect. Collaborate. AlfrescoContent Application Extensibility for ADF Applications
- 4.
- 5. Learn. Connect. Collaborate. Extensibility Features •Custom pages and routes • Document List layouts • Navigation sidebar • Context menu • Sidebar (aka Info Drawer) • Toolbars • Viewer content and toolbars • Content metadata + new endpoints with every release + your own content and extensions
- 6.
- 7. Learn. Connect. Collaborate. Format •JSON files • Files are merged at runtime • Custom order of loading • Extensions can – Rewrite properties – Extend objects and collections – Disable existing features
- 8.
- 9.
- 10. Learn. Connect. Collaborate. Format: actions Actionsto redirect to routes
- 11. Learn. Connect. Collaborate. Format: demo app.extensions.json/ $references • The order of the declaration matters • Last loaded extension can customize previously loaded
- 12.
- 13.
- 14. Learn. Connect. Collaborate. Components •Standard Angular components • 3rd party dependencies • Simple to distribute (NPM, Nexus, etc.) • Easy to register • Extensions can override existing entries
- 15. Learn. Connect. Collaborate. Components: viewer Registercustom viewer by extension
- 16. Learn. Connect. Collaborate. Components: viewer Rendercustom content for PDF files
- 17. Learn. Connect. Collaborate. Components: menu Injectcustom component into the context menu
- 18. Learn. Connect. Collaborate. Components: menu Yourcustom component in the context menu • Looks and behaves like menu item • Integrates with Rules • Executes your code on click
- 19. Learn. Connect. Collaborate. Demo: createmenu • Adding extra menus to “New” button • Multiple levels of nesting • “Enabled” state is based on Rules
- 20. Learn. Connect. Collaborate. Demo: createmenu New entries at runtime
- 21.
- 22. Learn. Connect. Collaborate. Routes •Expand the app by adding new routes • New pages • Custom content to show • Application layout and styles • Authentication guards • Register actions to redirect to your content • Register buttons to invoke your actions • Redefine and customize other routes
- 23. Learn. Connect. Collaborate. Routes: demo Customroute registration example /my-route-one/*
- 24. Learn. Connect. Collaborate. Routes: demo •Renders separate groups • Auto-highlights links • Registers extra URL parts • Renders your pages
- 25.
- 26. Learn. Connect. Collaborate. Actions •Trigger application features • App is split into reusable actions, i.e.: – Remove node – Invoke “Create Folder” dialog – Preview node – ... and many more • Extensions can invoke or customize every application action exposed • Based on NgRx (inspired by Redux) • You can provide custom handlers • You can replace Action Engine
- 27. Learn. Connect. Collaborate. Actions: example Declarea new toolbar entries in your extension
- 28. Learn. Connect. Collaborate. Actions: example Getcustom toolbar entries rendered at runtime • Supports rules • Menus and sub-menus • Separators • Custom ordering • Replace existing buttons • Invoke app actions
- 29. Learn. Connect. Collaborate. Actions: effects Listeningand reacting on the action event
- 30.
- 31. Learn. Connect. Collaborate. Rules •Rules are plain JavaScript functions • Can access runtime context • Can be composed from other rules – NOT, OR, AND – Rule negation via “!” (not) operator • Unlimited level of chaining • You can replace any rule with your own • Extensions can register extra rules
- 32.
- 33. Learn. Connect. Collaborate. Rules: context •Resolves rules • Provides access to application state • You can replace with own implementation
- 34.
- 35. Learn. Connect. Collaborate. Rules: markup Declaringa composite rule… and referencing:
- 36.
- 37. Learn. Connect. Collaborate. Distribution •Standard Angular Libraries • Published to NPM or custom sources • Single metadata file as part of the library • Single command to install into the app • Installing from local tarball packages See more details on NGI tool: https://bit.ly/2RcKtvw
- 38.
- 39. Learn. Connect. Collaborate. Corefeatures • Extension loader • Application services to back extensibility • Core evaluators (”every”, “not”, “all”, etc.) • Dynamic components
- 40. Learn. Connect. Collaborate. What’snext • More extension points for ADF and ACA • More developer tooling for extensions – Validation and linting – Upgrades and versioning – Distribution • Automatic installation and deployment • Web Components support • Improvements based on community feedback
- 41. Learn. Connect. Collaborate. More information Extensibilitydocumentation https://alfresco-content-app.netlify.com/#/extending/
- 42.
- 43.