Custom datalist button

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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.