Creating your application with ADF

Document created by alfresco Employee on Sep 29, 2017
Version 1Show Document
  • View in full screen mode

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 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. Cloning and running the GitHub repository containing the Alfresco ADF application with the minimal of the components.

 

2. Configuring the Alfresco ADF application to point to the correct service layer, made by Alfresco Content Services, Alfresco Process Services 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.

 

Cloning and running the GitHub repository

 

Directly on GitHub, you can find the repository called angular-cli-adf-app.git, stored into the Alfresco’s profile. To clone locally the repository, run the following command in a terminal.

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

After the repository is cloned, enter into the angular-cli-adf-app folder and run the commands below.

npm install
npm start

The install task will require some time to be completed because it downloads all the dependencies from the web. Please ignore warning messages but consider errors. The start task will open a browser at http://localhost:4200, with a very simple home page, as described in the following picture.

 

 

Configuring the Alfresco ADF application

 

If you don’t plan to use the Alfresco Content Services or the Alfresco Process Services, you can skip this section. If you plan to use one of them or both, you can read here how to correctly configure your working application to point on them.

 

The first task to do, is to stop the application running (you can simply use the CTRL+C buttons). In the angular-cli-adf-app folder, more exactly in the proxy.conf file, you can configure the target systems quite easily. Everything can be configured customising the target attribute (one for Alfresco Content Services into the label ecm and one for Alfresco Process Services with the label bpm).

 

Once done, start the application again running the npm start command from a terminal. This is all you need to configure the Alfresco ADF application to use Alfresco Content Services or Alfresco Process Services.

 

Using the Alfresco ADF application

 

As you can see from the user interface, the Alfresco ADF application developed using the angular-cli-adf-app project, 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.

 

To use the Alfresco ADF application, start from the right icon (made by three vertical points) containing: Login, DataTable, Viewer and DocumentList. All of them are the most simple examples of Angular components you can imagine.

 

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. 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  <angular-cli-adf-app>/src/app/login folder and gets a session in Alfresco Content Services, Alfresco Process Services 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 DataTable component

 

The DataTable component is a generic Angular component developing a table showing data. The DataTable component lives in the source code hosted into the <angular-cli-adf-app>/src/app/datatable folder and can be modified changing the datatable.component.ts file.

 

Below a screenshot showing how the DataTable component look like.

 

 

The Viewer component

 

The Viewer component is a generic Angular component developing a viewer of content. The Viewer component lives in the source code hosted into the <angular-cli-adf-app>/src/app/viewer folder. Below a screenshot showing how the Viewer component look like, showing a PDF document.

 

 

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 repository. The DocumentList component lives in the source code hosted into the  <angular-cli-adf-app>/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 >>

Attachments

    Outcomes