Get to know the new AMA application, the most important basic features of it, the differences between the Community and Enterprise version, and how you could extend it using our new plugin system. What the differences are between AMA and the APS, and what challenges we had during its development.

1. Alfresco Modeling Application
Andras Popovics

2. About me
• Senior Software Engineer @ Alfresco
• Modeling Application tech lead
• Eternal Dragon Ball Fanatic

4. Agenda
• Introduction – what is AMA?
• Distributions of AMA
• Application structure & Extensibility
• Projects
• Process editor
• Connector editor
• Form editor

5. Learn. Connect. Collaborate.
What is AMA?
Activiti | Alfresco Modeling Experience

6. Learn. Connect. Collaborate.
Tech stack
(FE)
• Latest version Angular framework
• Angular Material as UI framework
• NgRx: Store, Effects, Entities, etc…
• ADF components
• Alfresco Js Api

7. Learn. Connect. Collaborate.
Different
distributions • Enterprise edition
– Extended feature set
– Hosted in Alfresco organisation’s private repo
– Alfresco Modeling Application
• Community edition
– Basic feature set
– Hosted in Acitivi organisation’s public repo
– Activiti Modeling Application

8. Learn. Connect. Collaborate.
Community
Edition
• Extendable basic application
• Contains AMA SDK for plugin creation
• Open source
• Public repository:
– https://github.com/Activiti/activiti-modeling-app

9. Learn. Connect. Collaborate.
CE Features
• Application frame (ADF application)
• Authentication
• Basic authorisation
• Projects
• Processes
• Connectors

10. Learn. Connect. Collaborate.
Enterprise
Edition
• Community edition on steroids*
• Enriched feature set
• Knows everything what CE does, and more*
• Set of plugins*
• Private repository
• Smooth transition from CE to EE

11. Learn. Connect. Collaborate.
EE Features
• Advanced Process editor
• Advanced Connector editor
• Form editor
• UI editor (early stages)
• Data objects (early stages, raw text editor)
• Decision tables (early stages, raw text editor)

12. Learn. Connect. Collaborate.
Backend
services
• Community Edition
– Activiti Cloud Modeling (ACM)
• Enterprise edition
– Activiti Cloud Enterprise Modeling (ACEM)
• Shares the same interface
• Only difference is the number of features
• ACEM is the extended ACM

13. Learn. Connect. Collaborate.
Application
structure
• Community edition
– Base Angular application
– AMA Software Development Kit
• Enterprise edition
– Set of Angular 7 libraries (ADF plugins)
– Implemented using the AMA SDK

14. Community Edition

15. Enterprise Edition

17. Learn. Connect. Collaborate.
Core third party
dependencies
• Latest Angular framework
• Angular Material as UI framework
• ADF Components
• RxJS
• Alfresco Js Api
• NgRx

18. Learn. Connect. Collaborate.
NgRx
“NgRx is a framework for building reactive
applications in Angular.
NgRx provides state management, isolation of
side effects, entity collection management, router
bindings, code generation, and developer tools
that enhance developers experience when
building many different types of applications.”

20. Learn. Connect. Collaborate.
AMA SDK
Lightweight package for helping creating the
extensions, containing:
• The basic light and dark theme
• An Angular json editor component
• The common interfaces and injection tokens which
both the application and the plugins based upon
• Shared services
• Helper classes and utilities

22. Learn. Connect. Collaborate.
Extensibility
• adf-extensions package lowest layers
• No support for extending the application by
the json (plugins system) yet (!!!)
• Extension through Typescript code and
Agular configuration magic

23. Enterprise Edition

24. Extensibility example through the Connector Editor

27. Learn. Connect. Collaborate.
extensions.modules.ts
(CE)

28. Learn. Connect. Collaborate.
extensions.modules.ts
(EE)

29. Learn. Connect. Collaborate.
angular.json file
replacement magic

30. Learn. Connect. Collaborate.
Connector Editor
Module
(CE)

31. Learn. Connect. Collaborate.
Connector Editor
Module
(CE)

32. Learn. Connect. Collaborate.
Advanced Connector
Editor Module
(EE)

33. Learn. Connect. Collaborate.
Projects
• Container for models
• Can be imported / exported
• Exported projects results an organised zip file
• Dashboard is the CRUD space for projects

37. Learn. Connect. Collaborate.
Process
editor
• One of the main modules of the application
• CRUD Editor + import & export
• Based on Bpmn.io’s Bpmn-js library
• Our focus is on building better tools on top of
the Bpmn-js
• Restricting available elements => make the
resulted BPMN definition as lean as possible

38. Learn. Connect. Collaborate.
Process
editor
• Extensions free BPMN definitions
• Extensions are stored in separate JSON file*
“The goal is to follow the standard BPMN spec,
but handling all our really cool tool using JSON
extensions which are easy to handle.”
* Process definitions consists of two files, one
.bpmn20.xml and one .json file.

42. Learn. Connect. Collaborate.
Connector
editor
• Yet another CRUD editor for another model
• In CE, the Connector Editor is a simple JSON
editor, coming form the AMA-SDK
• In EE, the Connector Editor is an advanced
editor + the optional JSON editor
• Our every editor follow the same pattern:
– CE: simple raw editors
– EE: advanced editor + the option for simple
raw editor

43. Learn. Connect. Collaborate.
What is a
Connector
(definition)?
• Connector definition is an interface of a
Java class, which we can be bound to a
Service task of a Process in the Process
editor.
• “Think about a Connector as a service to
service integration. And the connector
definition as the interface for these
interactions. We are aiming to enable people
to create Connectors in different languages. If
you are familiar with cloud infrastructures,
you can think of a Connector as a group of
functions (in a function as a service model).”

47. Learn. Connect. Collaborate.
Stored
BPMN
definition

48. Learn. Connect. Collaborate.
Stored
extensions

49. Learn. Connect. Collaborate.
Stored
extensions

50. Learn. Connect. Collaborate.
Stored
extensions

51. UI in Community Edition

52. Learn. Connect. Collaborate.
Form editor
(EE)
• Improved experience for Forms modeling
• Similar to the old Activiti app’s editor, but
completely rewritten
• Removed some unnecessary features of it
• Stored Form definition is different (a bit)
• Using the ADF’s Form rendering Engine
(WYSIWYG experience)

55. Learn. Connect. Collaborate.
ADF’s Form
Rendering
Engine

56. Learn. Connect. Collaborate.
Stored data for
text field
(old)

57. Learn. Connect. Collaborate.
Stored data for
text field
(new)

59. Learn. Connect. Collaborate.
Binding a form to
a user task

60. Learn. Connect. Collaborate.
Binding a form to
a user task

61. Thanks for attending – Q & A