Seed Information Management

Enterprise Content Management Consultants ECM Experts

Angular 2 and Alfresco

By

As mentioned in our previous blog on Angular 2, we recently implemented an angular application which gathers data, connects to Alfresco and populates it as metadata in Alfresco; so as a continuation of that, this blog will focus more on the Angular Service, Method calls and connection to Alfresco.

Angular 2 Service

An Angular 2 service is a class that encapsulates some sort of functionality and provides it as a service for the rest of the application to use. So our SeedService imports look like the following;

import {Injectable} from “@angular/core”;
import {Http, Headers, RequestOptions, Response } from ‘@angular/http’;

import {MediaData} from “../media-data”;

import { Observable }     from ‘../../node_modules/rxjs/Observable’;
import ‘../rxjs-operators’;

  • We have imported the Angular Injectable function and would apply that function as an @Injectable() decorator later in our service class. This makes our service injectable in any of our component classes.
  • Http, Headers and RequestOptions are required to make HTTP requests
  • Observable is the favoured library in Angular 2 compare to Promise when it comes to manipulating data being emitted. We have used RxJS as it provides Observable operators for doing just that. Some of these operators are:

·         Map

·         Filter

·         Take

·         Skip

·         Debounce

Now that we have imported what we need, let’s look at the service class and its methods.

@Injectable()
export class SeedService{

submitURL:string = “https://www.seedim.com.au/alfresco/service/seed/media/createnode”;

postSubmit(model:MediaData){
  let body = JSON.stringify(model);
  let headers = new Headers({ ‘Content-Type’: ‘application/json’ });
  let options = new RequestOptions({ headers: headers });
  return this.http.post(this.submitURL, body, options)
      .map(this.extractData)
      .catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body || { };
}

  • submitURL

We have defined a POST webscript with the url seed/media/createnode in Alfresco and the variable submitURL is just pointing to that webscript

  • postSubmit Method

The postSubmit method is the method is making the HTTP post request to our alfresco webscript by passing the data captured from the form through the content model (MediaData)as JSON in the body of the POST request. The post request returns an observable.

  • extractData Method

The extractData Method is just a utility method to return the response of the HTTP call as JSON.

MediaFormComponent Class

Now that we have our service in place we can use it in our MediaFormComponent Class introduced in our previous blog.

export class MediaFormComponent {

errorMessage: string;
submitData:any;

constructor(private seedService:SeedService) {} 

onSubmit() {

  this.seedService.postSubmit(this.model)
    .subscribe(
      data => this.submitData = data,
      error => this.errorMessage = <any>error,
      () => this.submitComplete()
    );
}

submitComplete(){

  if(this.submitData.success != null)
  {
    console.log(this.submitData.success);
  }
  else
  {
     console.log(this.submitData.error); 
  }
};

}

  • SeedService

We start by creating an instance of our injected SeedService in the constructor of the MediaFormComponent class.

  • onSubmit Method

The onSubmit Method is the method that gets called when the user clicks on the submit button after filling in the form. As mentioned previously, the postSubmit method returns an observable and in order to get the data out of an observable, we need to subscribe to it.

  • submitData

The returned response from the observable is stored in the submitData variable

  • errorMessage

Any error returned from the observable response gets stored in errorMessage

  • submitComplete Method

The submit complete method gets executed after the post request has been completed and is used to indicate whether the node was successfully created in alfresco or there was any error.

Enabling CORS in Alfresco

CORS needs to be enabled in Alfresco in order to be able to can make requests from one repository to the other.  CORS stands for Cross-Origin Resource Sharing and supports any HTTP requests such as GET and POST .

CORS can be enabled in Alfresco as follows;

  • Add the following jars to ../tomcat/lib folder in alfresco.

cors-filter and java-property-utilslatest jars can be found at here

  • Remove all other jars with same name but different version in ../alfresco/WEB-INF/lib otherwise it will create conflict.
  • Add the following snippet to web.xml located at ../alfresco/WEB-INF/ in alfresco.

<filter>
                <filter-name>CORS</filter-name>
                <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

</filter>

<filter-mapping>
                <filter-name>CORS</filter-name>
                <url-pattern>/*</url-pattern>

</filter-mapping>

‘filter’ can be placed anywhere in web.xml but ‘filter mapping’ must be placed before authentication filters.