In this post I would like to share my experience using the Alfresco’s configuration parameters directly into the Aikau framework to customize and control the widgets. In this particular case creating a structured menu item into the header of Alfresco Share, but this approach could be used in every javascript code developed using the Alfresco’s Aikau framework. Read More →

In the various posts of this personal blog, the development of a custom theme of the Alfresco Share front end, is one of the most relevant and accessed. In a past tutorial, I share a simple way to develop your own theme for the Alfresco v4.2.c distribution.

In this post I would like to reach them same goal, but with an important improvement: the release of the theme in an AMP file or a ZIP file. All using an automatic solution based on a Java project managed by Eclipse IDE and Apache ANT.

Following the Dave Draperposts that describes the new header bar using the updated widget processing framework provided by Surf of the new Alfresco 4.2.d, I thought it could be useful to show how to modify the existing header without deploying again some custom source code.

We all are agree that modifying the native Alfresco source code is possible but discouraged, but my purpose is to show some tips, underling that the correct method is the “extension” that Dave well described in his article.

As usual, I’m going to show the content wit a practical example with a step by step approach to better understand and reproduce.

Prerequisites

All the description has been developed on a vanilla installation of Alfresco 4.2.d on a Ubuntu 12.04 LTS distribution. To know how to prepare the vanilla installation of Alfresco 4.2.d you can use the bundle installation or a more controlled installation described here.

Modifying the default header

Before starting to modify something, stop the Alfresco service running the command below from the Alfresco’s installation folder.

./alfresco.sh stop

Now that the Alfresco service is stopped, we can go ahead modifying the default’s header declaration. As you probably know, the Alfresco header management is radically changed starting from this new 4.2.d release and the default composition is stored directly in a javascript code instead of a configuration file. In particular, the javascript file we are talking about is:

Once the javascript is opened, find the ‘generateAppItems()’ function inside the code. In this function is declared the menubar definition in the ‘appItems’ variable using a JSON format. You can recognize all the items of the menubar that you can modify but in this post we are interested to add a new one: a new link to an external URL (in our example my blog at http://fcorti.com).

To add the new link is enough to append the code below immediately before the return command. In our case develop a dummy ‘if’ command useful if you want to control the visibility of the item with a condition.

Using the ‘targetUrlType’ you can control the Alfresco’s relative or absolute path. Using the ‘targetUrlLocation’ you can control the opening of a new window or the link to the current browser’s window. In every case, omitting to specify the properties, you request for a relative path in the same window.

Defining the label internationalization

Last but not least we have to define the label for the new item. To reach that goal you can modify the file described below.

The requested modification is simple because you can simply append the code below.

header.menu.myItem.label=myItem

Until now we have defined the label for the default value in all the languages but if you want to customize the value for your own language you have to repeat this definition for one or more of the property files listed below.

Check the result

Now that we have developed all the necessary, we are ready to start again the alfresco service and check the result. You know for sure that to start Alfresco you have simply to execute the command below in a terminal.

In a previous tutorial we learnt how to develop a custom theme for Alfresco Share and how to customize it according to your personal needs.
In this hands-on tutorial we are going to learn how to modify the Alfresco Share login page of the lightweight theme without writing any code (CSS included).