Hi All, I am new to Alfresco share customization and new to YUI & client side implementation.I would like to add new button on document library page next t "Selected Item …" drop down. Below are the modification which I have done till now.1) Added Button To FTl (alfresco\web-extension\site-webscripts\org\alfresco\components\documentlibrary\include\<b>documentlist_v2.lib.ftl</b>): In this file I have added button same as File Upload button.
<#– Custom Select Value BUTTON –>
<@markup id="categoryButton">
<#if uploadable>
<div class="hideable toolbar-hidden DocListTree">
<div class="category-select">
<span id="${id}-categorySelect-button" class="yui-button yui-push-button">
<span class="first-child">
<button name="fileUpload">Select Category..</button>
</span>
</span>
</div>
</div>
</#if>
</@>
2) Modified (components\documentlibrary\<b>toolbar-min.js</b>) : (Not sure why i had to do this, but followd same code from File upload button, request to provide explanation for the same)
// Custom button to select category
this.widgets.selectCategory = Alfresco.util.createYUIButton(this, "categorySelect-button", this.onCategorySelect,
{
disabled: true,
title: "Select Category .."
});
this.dynamicControls.push(this.widgets.selectCategory);
3) Created onCategorySelect() in toolbar-min.js (same file used in step-2), which is creating a <b>SimpleDialog</b>
onCategorySelect: function DTLB_onCategorySelect(e, p_obj){
alert("—-> onCategorySelect Function Called <—- ");
var categorySelect = new Alfresco.module.SimpleDialog(this.id + "-categorySelect");
categorySelect.setOptions({
width : "30em",
templateUrl : Alfresco.constants.URL_PAGECONTEXT+ "modules/documentlibrary/select-category",
destroyOnHide: true,
onSuccess:
{
fn: function dlA_onActionEditTag_success(response)
{
Alfresco.util.PopupManager.displayMessage({
text: "Success"
});
},
scope: this
},
onFailure:
{
fn: function onActionEditTag_failure(response)
{
Alfresco.util.PopupManager.displayMessage({
text: "Failed"
});
},
scope: this
}
}).show();
},
4)Created a new module ftl (alfresco\web-extension\site-webscripts\org\alfresco\modules\documentlibrary\<b>select-category.get.desc.xml</b>), this is getting called using URL from above (step-3) function.
<webscript>
<shortname>select-category</shortname>
<description>Dialog to select category</description>
<url>/modules/documentlibrary/select-category</url>
</webscript>
5) Below is alfresco\web-extension\site-webscripts\org\alfresco\modules\documentlibrary\<b>select-category.get.html.ftl</b>, which returns html for module.
<@markup id="js">
<#– JavaScript Dependencies –>
<@script type="text/javascript" src="${url.context}/res/modules/documentlibrary/selectCategory.js" group="documentlibrary" />
</@>
<@markup id="html">
<@uniqueIdDiv>
<#assign el=args.htmlid?html>
<div id="${el}-dialog" class="create-folder">
<div id="${el}-dialogTitle" class="hd">${msg("title")}</div>
<div class="bd">
<form id="${el}-form" action="" method="post">
<div class="yui-g">
<h2 id="${el}-dialogHeader">${msg("header")}</h2>
</div>
<div class="bdft">
<input type="button" id="${el}-ok" value="${msg("button.ok")}" tabindex="0" />
<input type="button" id="${el}-cancel" value="${msg("button.cancel")}" tabindex="0" />
</div>
</form>
</div>
</div>
</@>
</@>
6) As in step-5 ftl i am adding <b>selectCategory.js</b>, which is as below.
/**
* Copyright (C) 2005-2010 Alfresco Software Limited.
*
* This file is part of Alfresco
*
* Alfresco is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Alfresco is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* Select Category .
*
* @namespace Alfresco
* @class Alfresco.SelectCategory
*/
(function() {
/**
* YUI Library aliases
*/
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Bubbling = YAHOO.Bubbling;
/**
* Alfresco Slingshot aliases
*/
var $html = Alfresco.util.encodeHTML, $hasEventInterest = Alfresco.util.hasEventInterest, $combine = Alfresco.util.combinePaths;
/**
* SelectCategory constructor.
*
* @param htmlId
* {String} The HTML id of the parent element
* @return {Alfresco.SelectCategory} The new SelectCategory instance
* @constructor
*/
Alfresco.SelectCategory = function(htmlId) {
Alfresco.SelectCategory.superclass.constructor.call(this,
"Alfresco.SelectCategory", htmlId, [ "button", "container" ]);
this.eventGroup = htmlId;
return this;
};
YAHOO.extend(Alfresco.SelectCategory, Alfresco.component.Base, {
/**
* Fired by YUI when parent element is available for scripting
*
* @method onReady
*/
onReady : function SelectCategory_onReady() {
alert(" —-> onReady called <—- ");
}
});
})();
Questions :1) When I click on Select Category button from document library page, I am getting first alert from <b>onCategorySelect</b> function. As you can see in step-5, i am adding selectCategory.js, and this file has onReady method with alert(), but i am not getting this alert. Though i am able to see ftl file with dialog title & dialog header. What i want is on load of that module/pop-up i want to call a webscript and get values from DB & display it in on drop-down.2) what is the use of group attribute in <@script> ?Request all to send you valuable inputs for share customization. Also if you can help me with a tutorial / document that helps me in understanding share implementation, that way it will be easy for me to customize something in share.Regards.
