Alfresco share 4.2.e customization

[alfsender]

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.

[scouil]

Hi,

I'll go with some quick answers to both of your questions but mostly will advise you to read some doc.
Depending on your version, you'll see several examples in docs.alfresco.com or in Alfresco employees blogs that are way better than anything I could write here.

The whole surf extension mechanism is some kind of strange impossible to debug beast when you don't know it.
But it's a jewel when you get to know it and see what it enables you to do.
So if you don't want to just struggle, I'd really recommend you read a bit about it before actually diving into modifications.

1) All you do in your code is include a javascript that declares a class name Alfresco. SelectCategory
It is never instanciated, called or anything.
Depending on your version, the solution is different.
In 4.2 you will want to look at the model.widgets object that is returned by most of the modules' server javascript
In 4.1, the object is usually instantiated in the .html.ftl

2) All the scripts from the same group are fetched in a grouped way from the server to save some time

[rachana]

Hi,

I am also trying to do same thing. I followed same step as you wrote above and it's working fine. I am very thankful to you for this post. Now i want that when i click on button, form will display and values of that form will save in alfresco one new custom table. Any kind of help is appreciable. Thanks allot for this.