Following the Dave Draper posts 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:
<alfresco>/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js
Let’s go ahead modifying the javascript with the command below. Of course you have to replace the ‘<alfresco>’ tag with the correct path depending on you environment/installation.
nano <alfresco>/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js
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.
... if (true /* dummy condition */) { appItems.push({ id: "HEADER_ADMIN_CONSOLE", name: "alfresco/menus/AlfMenuBarItem", config: { id: "HEADER_AAAR", label: "header.menu.myItem.label", targetUrl: "http://fcorti.com", targetUrlType: "FULL_PATH", targetUrlLocation: "NEW" } }); } return appItems; ...
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.
<alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar.properties
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.
<alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_de.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_es.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_fr.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_it.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_ja.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_nb_NO.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_nl.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_ru.properties <alfresco>/tomcat/webapps/share/js/alfresco/header/i18n/AlfMenuBar_zh_CN.properties
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.
./alfresco.sh start
Finally, your result should look like the screenshot below.
I notice this is a very simple procedure which I have followed carefully and successfully. Unfortunately, I didn’t see my new menu after even shutting down my pc and starting everything all over. No errors and no menu, any help? pls?
Hi Hannah,
If you don’t have any error on the Alfresco side, the problem could be in the javascript.
I suggest you to use firebug (or something similar) to check on the client side (i.e. the browser) to find some kind of problem.
I hope this help you.
sir i just follow your instruction and successfully created my own header menu. But i also want to have a ‘divider’ which you can see under ‘sites’ header menu.
The ‘Recent Sites’ & ‘Useful’, how to do that? Thanks!
Hi Medel,
You can easily find the answer to your question, taking a look at the ‘share-header.lib.js’ script that contains the items you are looking for.
I hope this will help you.
Hi Corti thanks for great tutorial
anyway if i want to create new page
how i could do that?
anyway if i want to imitate “Shared” what file should i see?
Hi Leonardo,
As you say, it is possible to create an Alfresco Share custom page, but it’s a different matter.
To reach that goal I suggest you to start reading here:
http://wiki.alfresco.com/wiki/Share_Custom_Pages
http://docs.alfresco.com/4.1/index.jsp?topic=%2Fcom.alfresco.enterprise.doc%2Ftasks%2Ftu_40_add-content.html
i put above mentioned code like ‘widgetUtils.deleteObjectFromArray(model.jsonModel, “id”, “HEADER_MY_FILES”); ‘ in share-header.get.js file but ‘MY Files’ menu is not removed
pls help!
Hi,
Which version of Alfresco are you using?
Please, consider that strategy and code changes rapidly in the various versions.
I suggest you to take a look also to the share-config-custom file.
I hope this help you.
how to change the text ‘User Name’ in New User Page in Alfresco 5.0