This content is part of the Alfresco ADF getting started tutorial and describes how to create your Angular application on top of the service layer composed by Alfresco Content Services, Alfresco Process Services powered by Activiti or both. In the following sections we are going to see how to create a brand new application with Alfresco ADF, assuming you went through the prerequisites described in the dedicated content. To reach the goal, we are going to cover the following tasks:
1. Creating the ADF application using the Yeoman Generator.
3. Describing the user experience of the Alfresco ADF application, once launched.
Below you can find a “step by step” description of each task, very straightforward also if you are not extremely familiar with the technologies.
Creating the ADF application using the Yeoman Generator
npm install -g yo
npm install -g generator-alfresco-adf-app
You will probably need to launch the commands as an admin, using the sudo prefix.
After the generator is correctly installed, run the command below.
The generator will now ask a few questions, mainly the name of your app (in our case we will use
myApp) and which blueprint you want to use.
You can select one of three blueprints. To describe them from the bottom up:
Process Services powered by Activiti
This will generate an application for Alfresco Process Services powered by Activiti. It contains the following components: Login, App List, Task List, Form and Start Process.
This will generate an application for Alfresco Content Services (or Alfresco Community Edition). It contains the following components: Login, Document List, Viewer.
Process and Content Services
This will generate an application for both Alfresco Process and Content Services and will be a combination of the two blueprints above.
Select the one you want to use, and the generator will now ask if you want to install dependencies right away. Enter “
Y” and hit enter.
Once done, you will find a folder named
myApp where you can find all the ADF application already created and completed. What is missing now, is the configuration step described in the following paragraph.
Configuring the Alfresco ADF application
To configure the ADF application, you only need to point on the correct Alfresco Content Services and Alfresco Process Services powered by Activiti. Depending on the blueprint you used during the creation, you might need the Alfresco Content Services only, the Alfresco Process Services powered by Activiti only or both.
To setup the correct back-end services, change into the directory of your app (
myApp in our case) and inspect the
proxy.conf.json file. This file will tell Angular Webpack to create a proxy for your backend (Content or Process services). Change the URLs and ports to reflect where they are currently running. Below an example of how the
proxy.conf.json file should look like.
Using the Alfresco ADF application
Now that you ADF application is correctly configured, start it running the
npm start command from a terminal, double checking you are located into the project folder (in our case myApp). The execution of the command takes a couple of seconds and a browser will automatically open at
As you can see from the user interface, the Alfresco ADF application is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basis, instead of containing complex features that will be part of an intermediate/expert learning path. Below a screenshot of how the home page looks like.
In the following paragraphs we are going to (briefly) describe each component to enable you to their understanding and usage.
The Login component
Login component requires Alfresco Content Services or Alfresco Process Services powered by Activiti. If you don’t have at least one of them, up and running (and configured as described above in the document), this component doesn’t seems useful and you can ignore it.
Login component lives in the source code hosted into the
<myApp>/src/app/login folder and gets a session in Alfresco Content Services, Alfresco Process Services powered by Activiti or both. Below a screenshot showing how the
Login component look like.
Don’t expect any sort of behaviour, if the login will succeed. The Login component is very basic and nothing is going to happen to the user interface, in this case.
The Apps component
Apps component requires Alfresco Process Services powered by Activiti up and running and configured as described above in the document. If you don’t have it, this component doesn’t seems useful and you can ignore it.
The component shows the available apps on Alfresco Process Services powered by Activiti and, once selected, the task list of open task to manage. Below a screenshot showing how the
Apps component look like.
The DocumentList component
DocumentList component requires Alfresco Content Services up and running and configured as described above in the document. If you don’t have it, this component doesn’t seems useful and you can ignore it.
DocumentList component develops a navigator for the Alfresco Content Repository. The
DocumentList component lives in the source code hosted into the
<myApp>/src/app/documentlist folder and can show the content only if the login on Alfresco Content Services has been executed with success. Below a screenshot showing how the
DocumentList component look like.