Add button to Document Library in Alfresco

We have been talking about the Alfresco share extension module in the previous few articles. If you have not heard of it, we recommend you check them out first:

Here we are going to see how to extend document library using extension modules. We will add button on the toolbar of document library using extension module. If you are developer and have tried to extend document library in Alfresco you must have noticed there are two different versions of document library implementations available under Alfresco. Here we are going to use the second version i.e documentlibrary_v2 because that is the one which is being used by default.

Steps to Add button in toolbar.

Step 1: Create module extension xml under following location in your share project





            <id>Custom DocumentList Widget</id> 

            <description>Instantiate a custom DocumentList widget</description> 











Step 2: Create following folder structure in your share project

this is where your extension files of document library will be placed.


Step 3: Create extension files which will have logic for adding button.


for (var i=0; i<model.widgets.length; i++) { 

 if (model.widgets[i].id == "DocumentList") { 

    model.widgets[i].name = "my.custom.DocumentList"; 



and documentlist-v2.get.html

here we are pointing to our custom js file which will be respo

<@markup id="custom-documentlist-dependencies" target="js" action="after" scope="global"> 

  <@script type="text/javascript" src="${url.context}/res/components/documentlibrary/extensions/custom-documentlist.js" group="documentlibrary"/> 


 Step 4: Create client side javascript file for document library extension

This is the place where all action happens we are creating dynamic button called “NewButton” here and associating js function which will be called on click of it.


This will go under


// Declare My namespace...

    if (typeof My == undefined || !My) {

        var My = {};
    if (!My.custom) {
        My.custom = {};

    (function() {
      My.custom.DocumentList = function CustomDocumentList_constructor(htmlId) {, htmlId);
        return this;

  YAHOO.extend(My.custom.DocumentList, Alfresco.DocumentList,
    onReady: function CustomDL_onReady()
       var elms=Dom.getElementsByClassName("left");
        var spn=document.createElement('span');  

        var spn1=document.createElement('span');  

        var btn = document.createElement('button');        

        var t = document.createTextNode("Reports");       
        btn.onclick= this.onButtonClick;
        spn.setAttribute('class','yui-button yui-push-button');




       * @method onButtonClick

       * @param e {object} DomEvent

       * @param p_obj {object} Object passed back from addListener method


      onButtonClick: function CustomDL_onButtonClick(e, p_obj)


     //This is where control comes on click of button. You could create dynamic dialog or other logic based on your requirement.


    }  });


Step 5: Deployment

Create amp file for your share project, deploy and restart the server. You will be able to see new button on documentlibrary tool bar of any site as shown below.

AlfrescoShare New button

Hope this is going to be useful for developers in customization of alfresco share, it will also give you hint about how to extend and override existing components.

Looking for quality Alfresco Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Alfresco | RSS 2.0

Author Spotlight


I love opensource technologies working with those technologies from the time I have stepped in to the Software Industry. Alfresco CMS is my area of expertise. I have worked on various complex implementations which involved integration of Alfresco with other technologies, extensively worked with JBPM workflows and Webscripts.

Leave a Reply

Your email address will not be published. Required fields are marked *