Seed Information Management

Enterprise Content Management Consultants ECM Experts

Adding an extension library to Alfresco Content App

By

The Alfresco Content App is the new ADF (Alfresco Development Framework) based front end for content management in Alfresco Content Services. It has been specially designed with focus on streamlining the default Alfresco UX and fully supports extension libraries which are based on the standard Angular libraries and definition files in the JSON format.

So we thought it would be a good idea to write a blog about adding a redistributable/extension library to the Alfresco Content App.

Deploying Alfresco Content App

The Alfresco Content App can be downloaded from the following link

https://github.com/Alfresco/alfresco-content-app

Then from within the root of the Alfresco Content App run ‘npm install’ to install all the required dependencies. After all the dependencies have been installed, run ‘npm start’ and once the application is up, it should automatically open in your browser asking you to log in.

Assumptions

  • Node.js, NPM and Angular CLI are already installed.
  • Alfresco Content Services is running on the same box as Alfresco Content App.

Creating extension library

We start by generating a new project within the Alfresco Content App workspace and from the root of the Alfresco Content App run the following command;

ng generate library seed-contracts

This will create a new project with the name ‘seed-contracts’ in ./projects folder with the following default files created in the alfresco-content-app/projects/seed-contracts/src/lib directory

  • Example component seed-contracts.component.ts
  • Example service seed-contracts.service.ts
  • Example module seed-contracts.module.ts

Next, we need to build the project with the following command:

ng build seed-contracts

Registering dynamic components

For any component we want to use at runtime (initialised dynamically via the extension json file), we need to add them to the entryComponents section of the seed-contracts.module.ts. See below snippet;

@NgModule({

  declarations: [SeedContractsComponent],
  imports: [],
  exports: [SeedContractsComponent],
  entryComponents: [SeedContractsComponent]

})

Defining Routes

Create a file called seed-contracts.routes.ts under alfresco-content-app/projects/seed-contracts/src/lib and add the following

import { Routes } from '@angular/router';
import { SeedContractsComponent } from './seed-contracts.component';

export const appRoutes: Routes = [

    {
        path: 'contracts',
        component: SeedContractsComponent,
    }

]

Then we need to update seed-contracts.module.ts to import our new appRoutes.

@NgModule({

  declarations: [SeedContractsComponent],
  imports: [
        RouterModule.forChild(appRoutes)
  ],

  exports: [SeedContractsComponent],
  entryComponents: [SeedContractsComponent]
})

Plugin definition file

Create a new assets/seed-contracts.plugin.json file in the library project root folder with the following content:

{
    "$schema": "../../../extension.schema.json",
    "$id": "9a635542-d87a-2359-ae64-ffa199d1a364",
    "$version": "1.0.0",
    "$name": "seed.contracts.plugin",
    "$description": "contracts plugin",
    "$vendor": "Seed Information Management",
    "$license": "Apache-2.0",
    "$runtime": "1.6.0",

    "features": {
      "navbar": [
        {
          "id": "seed.contracts.nav",
          "items": [
            {
              "id": "seed.contracts.main",
              "order": 100,
              "icon": "next_week",
              "title": "Contracts",
              "route": "contracts"
            }
          ]
        }
      ]
    }
  }

Update the root package.json file and append the following entry to the scripts section:

“build:seed-contracts”: “ng build seed-contracts && cpr projects/seed-contracts/assets dist/seed-contracts/assets –deleteFirst”,

“build.extensions”: “npm run build:aos-extension && npm run build:seed-contracts”,

Copy assets

Edit the angular.json and add the following rule in order to be able to test extension libraries in the same workspace.

      {
                "glob": "seed-contracts.plugin.json",
                "input": "projects/seed-contracts/assets",
                "output": "/assets/plugins"
      }

 

Register module

In the main application, edit the src/app/extensions.module.ts file and append the our module declaration.

import { NgModule } from '@angular/core';
import { AosExtensionModule } from '@alfresco/adf-office-services-ext';
import { SeedContractsModule } from 'seed-contracts';

// Main entry point for external extensions only.
// For any application-specific code use CoreExtensionsModule instead.

@NgModule({
  imports: [AosExtensionModule,SeedContractsModule]
})
export class AppExtensionsModule {}

Register plugin

Finally, update the assets/app.extensions.json file and add a reference for our new plugin:

“$references”: [“aos.plugin.json”, “app.header.json”,”seed-contracts.plugin.json”],

Testing our new extension library

Start the application using the following command

npm start

After the Alfresco Content App has started and you have logged in successfully, you should see an additional link called Contracts to the bottom of the nav bar. Click the Contracts link and this should say the following.

seed-contracts works!

Conclusion

For more information about Angular Extension libraries, please see link below;

https://github.com/angular/angular-cli/wiki/stories-create-library#library-support-in-angular-cli-6