You are here

Application Development Framework (ADF)

This page gives an introduction to the Alfresco Application Development Framework (ADF), which is used to build custom domain specific Web UIs.
Overview

The Alfresco Application Development Framework, referred to as ADF, is built on top of the Angular 5 JavaScript framework. You can think of ADF as a library of Alfresco web components that can be used to build a content management web application and/or a process management web application.

There are a number of web components that you can use to integrate your web application with Alfresco Content Services (ACS). Here are some of these components:
  • 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.

Architecture

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:

The ADF components and services are implemented in Angular, which in turn is implemented in TypeScript. The Alfresco JavaScript library is pure JavaScript and could be used with any other JavaScript framework.

Application Generator
There is an ADF application generator that can be very useful if you just want to quickly get going with an ADF project, such as for a demo or proof-of-concept scenario. It covers use cases for both ACS and APS. It can be used to generate the following types of ADF applications:
  • 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:
+ generator-alfresco-adf-app@2.3.0
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.

Sending feedback to the Alfresco documentation team

You don't appear to have JavaScript enabled in your browser. With JavaScript enabled, you can provide feedback to us using our simple form. Here are some instructions on how to enable JavaScript in your web browser.