How to add a button/component on header of documentlist of Share

AlfrescoZZZ

Hi, i need to add a new customize "Upload Button" on the right of the standard on the component DocumentList of Share.

The javascript and the alfresco code of backend is not a big deal, but i find hard time to understand how can i show the button on the share component "DocumentList Header".

Here some screenshot of what i need to do:

Anyone can help me?

sp2

1)Create xxx.xml file inside /alfresco/we-extension/site-data/extensions and paste below code.

<extension>
<modules>
<module>
<id>ARMS Custom Document Lirary Button</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco.components.documentlibrary
</targetPackageRoot>
<sourcePackageRoot>com.arms.components.documentlibrary
</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>

2)Create documentlist-v2.get.html.ftl inside /alfresco/we-extension/site-webscript/com/arms/components/documentlibrary.

<@markup id="arms-documentlist-dependencies" target="js" action="after" scope="global">
<@script type="text/javascript" src="${url.context}/res/js/components/documentlibrary/extensions/arms-documentlist.js" group="documentlibrary"/>
</@markup&gt;

3)Create documentlist-v2.get.js inside /alfresco/we-extension/site-webscript/com/arms/components/documentlibrary.

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

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

model.widgets[i].name = "ARMS.components.DocumentList";

}
}

4) Create arms-documentlist.js inside web/js/components/documentlibrary/extensions/

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

var ARMS = {};
}
if (!ARMS.components) {
ARMS.components = {};
}

(function() {
var $siteURL = Alfresco.util.siteURL;
ARMS.components.DocumentList = function CustomDocumentList_constructor(htmlId) {
ARMS.components.DocumentList.superclass.constructor.call(this, htmlId);
return this;
};

YAHOO.extend(ARMS.components.DocumentList, Alfresco.DocumentList,
{
onReady: function CustomDL_onReady()
{

ARMS.components.DocumentList.superclass.onReady.call(this);
var elms=Dom.getElementsByClassName("left");
var spn=document.createElement('span');
var btn = document.createElement('button');
var t = document.createTextNode("Computer & Mobile");
btn.appendChild(t);
btn.onclick= this.onButtonClick;
spn.setAttribute('class','yui-button yui-push-button');
spn.appendChild(btn);
elms[0].appendChild(spn);


var spn=document.createElement('span');
var btn = document.createElement('button');
var t = document.createTextNode("Others");
btn.appendChild(t);
btn.onclick= this.onButtonClick1;
spn.setAttribute('class','yui-button yui-push-button');
spn.appendChild(btn);
elms[0].appendChild(spn);
},
onButtonClick: function CustomDL_onButtonClick(e, p_obj)
{

}
});

})();

Thanks,

Contcentric