This page gives an introduction to the Alfresco Application Development Framework (ADF), which is used to build custom domain specific Web UIs.
- Folder Hierarchy Breadcrumbs – display a breadcrumb with clickable folder path
- Document List – list folders and files
- Search – search folders and files
- Tag – manage and list tags
- Upload – upload files via button or drag-and-drop
- Viewer – preview files in the browser
- Webscript – call a Web Script (i.e. a ReST call)
And for integrating with Alfresco Process Services (APS) you have the following components:
- Analytics – display graph reports such as process instance overview
- Diagram – show process definition diagram, if associated with running process instance then the activities are highlighted according to their state
- Process Apps – shows a list of process applications
- Process List – show a list of process instances
- Process Details – multiple components are available to show different details for a process
- Task List – show a list of task instances for a process instance(s)
- Task Details – multiple components are available to show different details for a task
There are also a number of generic components that are used with both ACS and APS:
- Breadcrumbs – indicates the current position within a navigation hierarchy
- Toolbar – an extension to the Angular Material toolbar with a title and color
- Accordion – creates a collapsable accordion menu
- Card View – displays properties in a nice layout
- Data Table – generic data table implementation that is used by, for example, Document List
- Drag-and-Drop – Drag and drop files into for example a folder
- Form – display properties from nodes, tasks, and other sources in a form defined in JSON
- Login – authenticates with both services
- User Info – display information about a user
For a complete list of all components with documentation see the ADF Component Catalogue.
These ADF components don’t talk directly to the ACS and APS backend services. There are some layers between them that are worth knowing about before you start coding. The ADF components talk to ADF services, which in turn talks to the Alfresco JS API, which internally calls ACS and APS via their respective ReST APIs. You could use the both the ADF services and the Alfresco JS API directly from your application if there is no ADF component available to do what you want. In fact, you will quite frequently have to use the ADF services in your application to fetch content nodes, process instances, task instances etc.
The following picture illustrates the architecture of an ADF solution:
- ADF Content Management App (use this template if your app is only going to talk to ACS)
- ADF Process Management App (use this template if your app is only going to talk to APS)
- ADF Content and Process Management App
Using the App Generator is simple. Install the Yeoman tool.
Then install the App Generator as follows:
$ sudo npm install generator-alfresco-adf-app -g Password: + email@example.com added 243 packages in 5.438s
Running the generator is easy:
$ yo ? 'Allo Martin! What would you like to do? (Use arrow keys) Run a generator ❯ Alfresco Adf App ────────────── Update your generators Install a generator Find some help Clear global config
Select the ‘Alfresco ADF App’ generator and follow instructions.