Creating your application with ADF

cancel
Showing results for 
Search instead for 
Did you mean: 

Creating your application with ADF

alfresco
Alfresco Employee
2 10 22.1K

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.

2. Configuring the Alfresco ADF application to point to the correct service layers, made by Alfresco Content Services, Alfresco Process Services powered by Activiti or both.

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

Before the creation of your ADF application, let's install the Yeoman Generator and the Alfresco ADF App Generator, running the following commands in a terminal.

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.

yo alfresco-adf-app

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.

ADF Yeoman

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.

Content Services

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.

This can take a minute or two depending on your internet connection. You might see a few warnings at the end like this:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @angular/flex-layout@2.0.0-beta.10 requires a peer of @angular/core@0.0.0-NG but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@2.0.0-beta.10 requires a peer of @angular/common@0.0.0-NG but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material-moment-adapter@5.0.0-rc0 requires a peer of moment@^2.18.1 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.

These warnings are normal. Unfortunately they happen within the Angular Flex Layout package that ADF depends on. You can safely ignore them.

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.

{
"/alfresco": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
},
"/activiti-app": {
"target": "http://localhost:9999",
"secure": false,
"changeOrigin": true
}
}

This is all you need to configure the Alfresco ADF application to use Alfresco Content Services or Alfresco Process Services powered by Activiti.

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 http://localhost:4200/.

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

The 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.

The 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

The 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

The 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.

The 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.

Next task: Anatomy of an ADF application >>

10 Comments
communicationbr
Member II

The repository link 

git clone https://github.com/Alfresco/angular-cli-adf-app.git


does not work. Cloning the remote causes a fatal crash, saying the repository is not found.

fcorti
Alfresco Employee

Hi Jessica,

You are right and we plan to review this getting started tutorial accordingly.

The main change is related to the use of the Yeoman Generator, today in beta version, that will use the same project but supported by the scaffolding system.

Until the tutorial will be updated, I suggest you to try the Yeoman Generator in Beta version. 

udayakumar_p
Active Member

Same issue. Not able to clone the repository

dvuika
Alfresco Employee

Please check information on the 2.0 GA release and corresponding Angular CLI bluprints as part of the reworked Yeoman generators:  

udayakumar_p
Active Member

Hi,

Getting an error when trying to login.

[HPM] Error occurred while trying to proxy request /alfresco/api/-default-/publi
c/authentication/versions/1/tickets from localhost:4200 to https://xxxx.com/share (SELF_SIGNED_CERT_IN_CHAIN) (https://nodejs.org/api/errors.h
tml#errors_common_system_errors)

udayakumar_p
Active Member

Do we need to set secure as "true" for an https URL?

Facing SELF_SIGNED_CERT_IN_CHAIN error

dvuika
Alfresco Employee

I suggest starting a different thread to address this issue, as it seems you are going beyond what current article dwells on.

rsocorro
Active Member II

Hi,

Has anyone manage to integrate this one into a Drupal 7 website? and what would be the best approach if its possible?

fcorti
Alfresco Employee

Hi Roman,

What do you mean with "integrate with Drupal"?
Maybe you would like to use Alfresco's Angular Components into a Drupal app?
I suggest you to raise a question here, describing the use case and further details.
I hope this will help you.

rsocorro
Active Member II

yup that's what I intend to do, thanks for the clarification and response.