As you probably know, there is a general user interface called Alfresco Share available out-of-the-box. Share is usually used as a quick way of getting started with content management with Alfresco. It gives you access to pretty much all the features provided by the Alfresco ECM system. And a lot of customers customize it for their specific domain.
However, there are use-cases that Share does not fit very well, such as:
Feature-based clients, exposing functionality to perform a specific task(s)
Role-based clients, exposing functionality based on role
Clients where the UI layout and style differs significantly from the Share layout and styling
Workflow clients, the new application development framework will also support BPM
This is where this application development framework can be very helpful as you build a solution on the Alfresco platform; it can be used to create exactly the user interface (i.e. web client) that the requirements demand.
The framework consists of a number of components that can be combined together to form a customized content management application. Here is a list of some of the available web components:
What you need to install to get going
The web application that we build will need an Alfresco Platform (Repository) to talk to. It will expect the lastest REST API that comes with Alfresco Platform 5.2.a-EA. This means that you cannot build a web application with this framework and expect to use an earlier version of the platform, such as 5.1.
The following need to be installed:
An Alfresco Platform Repository (version5.2.a-EA or newer) to talk to, which hasCORS enabled.
This will install the following Alfresco web applications:
Alfresco Platform with the Content Repository, which we need so we can access content from our custom web client (alfresco.war)
Alfresco Solr, which we need so we can search for content from our custom web client (solr4.war)
Alfresco Share, not technically needed, but can be useful for creating users and groups, and to access and upload content to the repository while we are developing the custom web client (share.war)
Enable CORS in Alfresco
The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on. So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access to the Content Repository. This is done by enabling CORS.
To enable CORS in the Alfresco Platform do the following:
Download the enablecors platform module JAR and add it to the $ALF_INSTALL_DIR/modules/platform directory and restart the server.
Note. by default the CORS filter that is enabled will allow any origin.
If you don't have Node.js installed then access thispage and use the appropriate installer for your OS.
Make sure the Node.js version is greater than 5:
$ node -v
Note. node.js comes with npm package manager so no need to install separately.
Installing Activiti (Optional)
If the solution includes a workflow that should be interacted with from the custom web application, then you need to also install the Activiti BPM Engine. Download and installation instructions are here.
Your first application
$ npm install -g yo
(Sometimes you might need to use sudo.)
The -g switch tells npm to install this package globally on your computer (i.e. /usr/lib/node_modules) so you don’t have to download it every time you need it. Without this switch the package will be installed in the local node_modules folder. So using the -g switch is similar to how maven downloads to ~/.m2/repository.
Installing/Updating the Alfresco Application Generator
To install the Alfresco application generator, which is built with Yeoman, we use the following command:
$ npm install -g generator-ng2-alfresco-app
You can check what version of the application generator you have as follows:
$ npm list -g|grep generator-ng2-alfresco-app
If you have used an earlier version of the application generator, then you might want to upgrade to the latest version. You can update as follows:
$ sudo npm update -g generator-ng2-alfresco-app
Generating the Application
It is now a simple task to generate the web application, use the Yeoman generator as follows:
$ yo ng2-alfresco-app
,.**. `***** <-_
******** ***** ####
,*******, *::* .;##### @
***' .,---, ,.-==@@@@@@@@
* /@@@@@',@ @\ '@@@@@@@
'@@@@/ @@@ @@@\ ':#'
!@@@@ @@@@ @@@@@@@@@^
@@@@ @@@@@ @@@@@@@'
`"$ '@@@@@. '##'
Welcome to the awesome
Angular 2 app generator
? What's the name of your App? my-app
Your generator must be inside a folder named my-app
I'll automatically create this folder.
? How would you describe the app? My Alfresco Web Component App
The new application can be started immediately via a supplied script (for script source see package.json and the scripts property).
Step into the directory and then execute the start script:
$ cd my-app/
.../my-app$ npm start
This will actually kick off a local web server that is run inside node.js, and the browser will be loaded with the web application:
Login with the usual admin/admin Alfresco user. You will then see the folders in Document library for the site that comes with the Alfresco installation.
Click around and familiar yourself with what features that are available to you when building Alfresco content based web applications.
Customizing the Application
Next thing you want to do is most likely changing stuff in the application to your liking. Let’s change the columns that are visible in the document list. The best way to see how to change stuff is to look up the documentation for the Alfresco Web Components, it can be found at this URL:https://devproducts.alfresco.com/browse:
Click on the Document List link in the left navigation bar to see specifics for that component:
You can directly see what you would need to do to install this component package on a host that did not have it. We just generated a complete application with all components so we have this component source already.
Scroll down on the doc page until you see the basic usage section:
This tells you what you would need to do in an Angular 2 component template to include this Alfresco web component. This is already done for us in our auto-generated application. See my-app/app/components/files/files.component.html source: