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

cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
4535992
Established Member II

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

Jump to solution

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?

1 Solution

Accepted Solutions
sanjaybandhniya
Senior Member

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

Jump to solution

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>

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

4 Replies
sanjaybandhniya
Senior Member

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

Jump to solution

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>

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

4535992
Established Member II

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

Jump to solution

Ty very much Sanja,

now i can see the button on the "documentlist" of the the site, but i still can't see the button on the "documentlist" of the repository page.

So in the end i can see on the url  https://localhost:8443/share/page/site/swsdp/documentlibrary  but i can't see on the url https://localhost:8443/share/page/repository there is some other configuration i must do for that?

sanjaybandhniya
Senior Member

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

Jump to solution

For that you have to to override toolbar.js of documentlibrary.

Check create new folder action.same way you can create.

4535992
Established Member II

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

Jump to solution

For anyone have the same problem of mine modify the toolbar.js seem not to work (or most likely it's me doing something wrong ),a extension of the Sanja solution can be found on this project https://github.com/angelborroy/alfresco-add-menu-sample where i modify repo,myfiles and sharedfile template and javascript.