Alfresco 3.2+: Share Custom Actions

This short post will show you how to add a custom action in alfresco share’s document library. It will basically open a link to the Repo browser view showing the group and user level management. NOTE: Creating an action prior to 3.2 is different and if you’re looking for custom actions take a look at there WIKI. Its pretty well documented.

Here is a screen shot of the end result:

Locate the following files:

  1. share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\documentlibrary\documentlist.get.config.xml
  2. share\components\documentlibrary\documentlist.js
  3. share\WEB-INF\classes\alfresco\messages\
  4. share\components\documentlibrary\documentlist.css

Step 1.

In documentlist.get.config.xml under actionSet id=”document” add the following (note the href reference, it will be used in some javascript to replace the url):

<actionSet id="document">

<action type="simple-link" permission="delete" id="onActionShowInRepo" href="{viewInRepo}" label="" />
<!-- END CUSTOM -->


Step 2.

In add the label:

## Custom Action Repo Permissions Permissions

Step 3.

In documentlist.js locate the function getActionUrls. There is a list of url replacements such as downloadUrl, viewUrl and documentDetailsUrl. Add the following to the list:

viewInRepo: “/share/page/manage-permissions?nodeRef=” + nodeRef,

NOTE: Remember to compress your javascript here and replace documentlist.min.js!

Step 4.

In documentlist.css add the following line for the repo icon:

.doclist .onActionShowInRepo a
background-image: url(“/share/res/components/images/header/repository.png”);

Reboot and take a look at your document library the link should take you to a screen like this:

Alfresco – HTML to PDF Transformation

Here is a quick way to create a “reliable” HTML (rendering) -> PDF.

Getting Started

First we will be using a simple shell utility to convert html to pdf using the webkit rendering engine, and qt. Click here to download wkhtmltopdf exe file.

NICE TO KNOW: This works on x64 Windows 7 too.

Install the exe on your machine and add find the install location. Usually in <drive>:\Program Files\wkhtmltopdf.

Add that directory to your windows path in windows environment variables. If you dont know what this means or how to click here

Once you have done that, test the install out. Open up CMD and type wkhtmltopdf test.pdf thats should output a pdf of google in what ever directory your CMD was just looking at.


Alfresco Custom Transformation

Now we need to add an alfresco custom transformation. I dont know how everyone sets up there projects, so ill just tell you where the file is supposed to go.

Create a new xml file and call it: html2pdf-transform-context.xml

Paste the following into that file and drop it into the alfresco extension folder “\tomcat\webapps\alfresco\WEB-INF\classes\alfresco\extension”.

The file to paste:

<?xml version='1.0' encoding='UTF-8'?>

	<bean id="transformer.worker.html2pdf">
		<property name="mimetypeService">
			<ref bean="mimetypeService" />
		<property name="checkCommand">
				<property name="commandMap">
						<entry key=".*">
							<value>wkhtmltopdf -help</value>
				<property name="errorCodes">
		<property name="transformCommand">
				<property name="commandMap">
						<entry key="Linux">
							<value>wkhtmltopdf '${source}' '${target}'</value>
						<entry key="Windows.*">
							<value>wkhtmltopdf "${source}" "${target}"</value>
				<property name="errorCodes">
		<property name="explicitTransformations">
					<property name="sourceMimetype">
					<property name="targetMimetype">
	<bean id="transformer.html2pdf" parent="baseContentTransformer">
        <property name="worker">
            <ref bean="transformer.worker.html2pdf" />

All this file does, is it performs an executable and uses alfresco paths for destinations.

Gotcha 1: LOCALTION, LOCATION, LOCATION – If you are using an archived HTML file in the repository for conversion, the source will be moved to a temporary file so make sure your URLS are absolute not relative.

Gotcha 2: If you are using HTML content nodes or Webscripts for the source, the executable does not have its own username and password therefore you will need to use the alfresco ticket authentication for things to work properly i.e. Append ticket=<ALF_TICKET> in freemarker you can use ${session.ticket}, if you need more help on tickets just post a comment. There are a couple of different ways to achive different things.

Gotcha 3: ……Gotcha!


Alfresco Share Custom Pages

In this tutorial we will be creating Alfresco Share custom pages. We will be developing in the Alfresco Shared folder. Locate the web-extensions folder in \tomcat\shared\classes\alfresco\web-extension.

1.0 The file Structure

This folder contains the following:

site-data – Contains the configuration for pages, components and template instances
site-webscripts – Contains the webscripts for the page content
templates - Contains the Page template files.

1.1a Setting up the page – Page Configuration

In site-data/pages folder create a file called opg.xml. The file contents will look something like this:

   <description>OPG Page Description</description>

The template-instance property will be used later on to link this page to the page template.

1.1b Setting up the page – Template Configuration

In site-data/template-instances folder create a file called opg.xml. The file contents will look something like this:

<template-type><b><your company=""></your></b>/opg</template-type>

The template-type property will tie in the file path for your template file in the next step.

1.1c Setting up the page – Template Definition

We should begin to see this pattern of relationships between files (If you dont see this pattern a Share PAGE (webpage) contains COMPONENTS which in turn displays WEBSCRIPTS):
Page -> Template -> Components -> Webscripts

In the templates folder (web-extension\templates) create a folder called . Within your company folder create two more folders: include and import. To get this to work with your versoin of alfresco copy the following files to these folders:

C:\< YOUR ALFRESCO >\tomcat\webapps\share\WEB-INF\classes\alfresco\templates\org\alfresco\include\alfresco-template.ftl – Copy to the include folder.
C:\< YOUR ALFRESCO >\tomcat\webapps\share\WEB-INF\classes\alfresco\templates\org\alfresco\import\alfresco-common.ftl – Copy to the import folder.
C:\< YOUR ALFRESCO >\tomcat\webapps\share\WEB-INF\classes\alfresco\templates\org\alfresco\import\alfresco-layout.ftl – Copy to the import folder.

Now create your template file in the templates/< YOUR COMPANY > folder. Call it opg.ftl. Feel free to copy this code and put it in your template file.
If you notice the path of this template file relative to the templates folder is < YOUR COMPANY >/opg.ftl this is the filepath from the configuration before.

<link href="/alfresco/css/custom-theme/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link href="/alfresco/css/custom-theme/demo_table.css" rel="stylesheet" type="text/css" />
<link href="/alfresco/css/screen.css" rel="stylesheet" type="text/css" />

<#include "include/alfresco-template.ftl" />
   <@script type="text/javascript" src="${url.context}/js/alfresco-resizer.js"><!--@script--> 
   <@templateHtmlEditorAssets />     

<div id="alf-hd">

	<@region id="header" scope="global" protected=true />
	  <@region id="title" scope="global" protected=true />
	  <@region id="navigation" scope="global" protected=true />

<div id="bd">
	<@region id="body" scope="template" protected=true /></div>
<div id="alf-ft">
	<@region id="footer" scope="global" protected=true /></div>

The region hilighted blue above is the definition of a “bucket” or content container. You will notice the red hilights, these are crutial to the development of custom pages. ID: This is used to identify the content and location of the webscript it will pull in. SCOPE: This allows us to globalize regions accross templates, or more so allow components to be globalized accross templates. The definition of the name which you will see in a moment allows us to do this.

2.0 Component Definition

In site-data\components create a file called template.body.opg.xml. Notice the file name is specifically defined for SCOPE.ID.PAGE NAME.xml. If you have a file defined as global then you can use the global scope thus making the file global by name definition and not by region attribute. The naming convention seems to be vital in version 3.2. The header, title and navigation global files need to be copied over from: C:\ < YOUR ALFRESCO >\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\components to this folder in order for them to work as we are working from the WEB-EXTENSION in shared. In the new file (template.body.opg.xml):


The GUID will be the same as the filename. URL is the Webscript URL you set your websripts. This allows the component to point at the webscript.

3.0 Webscripts

In web-extension\site-webscripts\org\alfresco\components (If the folders dont exist just create them). Create a folder called opg and beneith that level another called home.
In the home folder create three files:

1. home.get.desc.xml – Configuration of the webscript
2. home.get.html.ftl – HTML/Freemarker page
3. home.get.js – JavaScript page for GET Request

In the home.get.desc.xml the file will look like this:

	   <shortname>OPG Home</shortname>
	   <description>Some description</description>

Remember that URL we talked about in the component setup, the URL here is defining what this webscript URL will be thus the component can map to that.

In home.get.html.ftl feel free to add some HTML
Hello World!

4.0 Adding pages to the navigation

In the following file: C:\< YOUR ALFRESCO >\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\presets\presets.xml

Look for this line: [{"pageId":"wiki-page"}, {"pageId":"blog-postlist"}, {"pageId":"documentlibrary"}, {"pageId":"calendar"},{"pageId":"links"},{"pageId":"discussions-topiclist"}]

Add your pageId to the list it will look something like this (KEEP IN MIND THE PRESET ID SHOULD BE id=”site-dashboard”):

[{"pageId":"opg"}, {"pageId":"wiki-page"}, {"pageId":"blog-postlist"}, {"pageId":"documentlibrary"}, {"pageId":"calendar"},{"pageId":"links"},{"pageId":"discussions-topiclist"}]

Restart Alfresco and create a new site, your page and link will be in the navigation. Word!

Alfresco 4: Share custom actions

This post is a further demonstration from Custom share action 3.2+ showing how to add a custom action in Alfresco Share 4.

Here is a screen shot of the end result:

Locate the following files:


Step 1.

In share-documentlibrary-config.xml

Action Groups
In Alfresco 3.2 you would put your extension in actionSets such as &lt;actionSet id=&quot;document&quot;&gt;. The actionSet id would tell you wheather it was to be shown on the document actions in the doclib list, in the document details etc…
In Alfresco 4 you only need to declare the action once and then add it to the action group. Like shown below:

Firstly create your action:

<!-- Document Library Actions config section -->
<config evaluator="string-compare" condition="DocLibActions">
<!-- View document in repo for permissions -->
<action id="document-show-in-repo" type="link" label="">
<param name="href">/share/page/manage-permissions?nodeRef={node.nodeRef}</param>

Then add the action to the actionGroup:

<actionGroup id="document-details">
<action index="360" id="document-show-in-repo" />

Step 2.

In add the label:

## Custom Action Repo Permissions Permissions

Step 3.

The icons are now automatically added inline to your anchor so it will look like this:

<a style="background-image:url(/share/res/components/documentlibrary/actions/document-show-in-repo-16.png)" href="#" title="Repository Permissions" id="yui-gen121"><span id="yui-gen123">Repository Permissions</span></a>

Take a note at the URL. Now go and add the image you want to use using the action id and the image size this one is using 16px x 16px. url(“/share/res/components/documentlibrary/actions/document-show-in-repo-16.png”)

Reboot and take a look at your document library