AnsweredAssumed Answered

Alfresco share 4.2.e customization

Question asked by alfsender on Dec 29, 2013
Latest reply on May 28, 2015 by rachana
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.

Outcomes