Custom datalist button

[jlocke]

Hello

I'm trying to add a custom button into the datalists toolbar (next to the "New item" and "Selected items" buttons). This button (closeListButton) will be used to "close" a list (inactivate a data list thanks to a custom property) and create a new one.

I've created 2 files in <em>tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/data-lists</em> :

toolbar.get.head.ftl :

<#include "../component.head.inc">
<!– Data List Toolbar –>
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/data-lists/toolbar.css" />
<@script type="text/javascript" src="${page.url.context}/res/components/data-lists/toolbar.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/data-lists/extended-toolbar.js"></@script>‍‍‍‍‍

toolbar.get.html.ftl (to display my custom button) :

<#assign id = args.htmlid>
<script type="text/javascript">//<![CDATA[
new Alfresco.component.ExtDataListToolbar("${id}").setOptions(
{
siteId: "${page.url.templateArgs.site!""}"
}).setMessages(${messages});
//]]></script>
<div id="${args.htmlid}-body" class="datalist-toolbar toolbar">
        <div id="${args.htmlid}-headerBar" class="header-bar flat-button theme-bg-2">
                <div class="left">
                        <div class="new-row">
                                <span id="${id}-newRowButton" class="yui-button yui-push-button">
                                        <span class="first-child">
                                                <button type="button">${msg('button.new-row')}</button>
                                        </span>
                                </span>
                        </div>
                        <div class="new-row">
                                <span id="${id}-closeListButton" class="yui-button yui-push-button">
                                        <span class="first-child">
                                                <button type="button">Solder le mois</button>
                                        </span>
                                </span>
                        </div>
                        <div class="selected-items">
                                <button class="no-access-check" id="${args.htmlid}-selectedItems-button" name="doclist-selectedItems-button">${msg("menu.selected-items")}</button>
                                <div id="${args.htmlid}-selectedItems-menu" class="yuimenu">
                                        <div class="bd">
                                                <ul>
                                                        <#list actionSet as action>
                                                        <li><a type="${action.asset!""}" rel="${action.permission!""}" href="${action.href}"><span class="${action.id}">${msg(action.label)}</span></a></li>
                                                        </#list>
                                                        <li><a href="#"><hr /></a></li>
                                                        <li><a href="#"><span class="onActionDeselectAll">${msg("menu.selected-items.deselect-all")}</span></a></li>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </div>

                <div class="right" style="display: none;">
                        <span id="${id}-printButton" class="yui-button yui-push-button print">
                                <span class="first-child">
                                        <button type="button">${msg('button.print')}</button>
                                </span>
                        </span>
                        <span id="${id}-rssFeedButton" class="yui-button yui-push-button rss-feed">
                                <span class="first-child">
                                        <button type="button">${msg('button.rss-feed')}</button>
                                </span>
                        </span>
                </div>
        </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And into <em>tomcat/webapps/share/components/data-lists</em> folder : extended-toolbar.js, which contains a new custom javascript action which must be associated with my custom button :

(function()
{
   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       Selector = YAHOO.util.Selector,
       Bubbling = YAHOO.Bubbling;

   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML,
      $links = Alfresco.util.activateLinks,
      $combine = Alfresco.util.combinePaths,
      $userProfile = Alfresco.util.userProfileLink;

   Alfresco.component.ExtDataListToolbar = function(htmlId)
   {
      return Alfresco.component.ExtDataListToolbar.superclass.constructor.call(this, htmlId);
   };

   /**
    * Extend Alfresco.component.DataGrid
    */
   YAHOO.extend(Alfresco.component.ExtDataListToolbar, Alfresco.component.DataListToolbar);

   /**
    * Augment prototype with Common Actions module
    */
   YAHOO.lang.augmentProto(Alfresco.component.ExtDataListToolbar, Alfresco.service.DataListActions);

   /**
    * Augment prototype with main class implementation, ensuring overwrite is enabled
    */
   YAHOO.lang.augmentObject(Alfresco.component.ExtDataListToolbar.prototype,
   {
                /**
                * Fired by YUI when parent element is available for scripting.
                *
                * @method onReady
                */
                onReady: function DataListToolbar_onReady()
                {
                        this.widgets.closeListButton = Alfresco.util.createYUIButton(this, "closeListButton", this.onCloseList,
                        {
                                disabled: true,
                                value: "create"
                        });
                        Alfresco.component.ExtDataListToolbar.superclass.onReady.call(this);
                },

                /**
                * Terminate a list (create a new one)
                *
                * @method onCloseList
                * @param e {object} DomEvent
                * @param p_obj {object} Object passed back from addListener method
                */
                onCloseList: function ExtDataListToolbar_onCloseList(e, p_obj)
                {
                    Alfresco.util.PopupManager.displayPrompt(
                       {
                          title: "Yeah",
                          text: "Yeah",
                          noEscape: true,
                          modal: true,
                          buttons: [
                          {
                             text: this._msg("button.cancel"),
                             handler: function DLTB_onActionDelete_cancel()
                             {
                                this.destroy();
                             }
                          }]
                       });
                }
   }, true);
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

For now, the new button should display a prompt message. In the toolbar, I can see my new button, but when I click on it, nothing is happening. The javascript action doesn't seem to be launched… The extended-toolbar.js file is well loaded by Alfresco (I can see it with Firebug).

What's the solution ?

Thank you !

[billerby]

Well,  you created the button with the disabled property set to false, try change that to true.