Understand YUI component in share page

[need]

Hi all,

I'm trying to put a button on the page of search results, when the user clicks the button the action that is generated is equal to the one you run when you click on the action in the copy detail pages document.

since it is the first time I interact with the YUI libraries, I do not understand why if I add this simple code in a search.js page:

var oButton = new YAHOO.widget.Button({
                id: "copy-button", 
                type: "button", 
                label: "Copy", 
                container: "someelement" 
            });
            
            alert("oButton===>"+oButton);‍‍‍‍‍‍‍‍

i see in alert a oButton===>button copy-button, I should not see the button in html?

I read this:

http://developer.yahoo.com/yui/examples/button/btn_example01.html

Thanks at all.

[dantuffery]

Have you added the button HTML to the page? The button id in your YUI code should match the button id in your HTML

YUI code

onReady()
{
    this.widgets.copyButton = Alfresco.util.createYUIButton(this, "copy-button", this.onCopyClick);
    ….
    …
},

onCopyClick: Search_onCopyClick()
{
    //copy code goes here
},‍‍‍‍‍‍‍‍‍‍‍

HTML

<span class="yui-button yui-push-button" id="${el}-copy-button">
    <span class="first-child"><button>${msg("button.copy")}</button></span>
</span>
‍‍‍‍‍

Dan

[need]

Hi Dan,

thanks for the reply,

My problem is: The part of html are dinamically created by js file for example, the interested page is search.js, see in renderCellThumbnail:

if (dataType === "document")
            {
               var viewUrl = Alfresco.constants.PROXY_URI_RELATIVE + "api/node/content/" + oRecord.getData("nodeRef").replace(":/", "") + "/" + oRecord.getData("name");
               //var oButton = new YAHOO.widget.Button({ label: "Copy!", onclick: { fn: onButtonClick } });
               
               //var copyButton = Alfresco.util.createYUIButton(this, "copy-button", this.onCopyClick);
               //alert("viewUrl—>"+viewUrl);
               html = '<div class="action-overlay">' + 
                      '<a href="' + encodeURI(viewUrl) + '" target="_blank"><img title="' + $html(me.msg("label.viewinbrowser")) +
                      '" src="' + Alfresco.constants.URL_RESCONTEXT + 'components/search/images/view-in-browser-16.png" width="16" height="16"/></a>' +
                      '<a href="' + encodeURI(viewUrl + "?a=true") + '" style="padding-left:4px" target="_blank"><img title="' + $html(me.msg("label.download")) +
                      '" src="' + Alfresco.constants.URL_RESCONTEXT + 'components/search/images/download-16.png" width="16" height="16"/></a>' +
                      '<div id="buttoncontainer"></div>' +
                      '</div>' + html;
               
               alert("HTML===>"+html);
            }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I added a div with id buttoncontainer and on html page i added this code but don't works:

<script type="text/javascript">//<![CDATA[
   new Alfresco.Search("${el}").setOptions(
   {
      siteId: "${siteId}",
      siteTitle: "${siteTitle?js_string}",
      initialSearchTerm: "${searchTerm?js_string}",
      initialSearchTag: "${searchTag?js_string}",
      initialSearchAllSites: ${searchAllSites?string},
      initialSearchRepository: ${searchRepo?string},
      initialSort: "${searchSort?js_string}",
      searchQuery: "${searchQuery?js_string}",
      minSearchTermLength: ${args.minSearchTermLength!searchconfig.getChildValue('min-search-term-length')},
      maxSearchResults: ${args.maxSearchResults!searchconfig.getChildValue('max-search-results')}
   }).setMessages(
      ${messages}
   );
   
    new YAHOO.widget.Button({
                id: "copy-button", 
                type: "button", 
                label: "Copy", 
                container: "buttoncontainer" 
            });
//]]></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

What's wrong?

Thanks at all

[need]

Hi all,

now i try this solution:

added html code in search.js:

html = '<div class="action-overlay">' + 
                      '<a href="' + encodeURI(viewUrl) + '" target="_blank"><img title="' + $html(me.msg("label.viewinbrowser")) +
                      '" src="' + Alfresco.constants.URL_RESCONTEXT + 'components/search/images/view-in-browser-16.png" width="16" height="16"/></a>' +
                      '<a href="' + encodeURI(viewUrl + "?a=true") + '" style="padding-left:4px" target="_blank"><img title="' + $html(me.msg("label.download")) +
                      '" src="' + Alfresco.constants.URL_RESCONTEXT + 'components/search/images/download-16.png" width="16" height="16"/></a>' +
                      '<span class="yui-button yui-push-button" id="copy-button">' +
                      '<span class="first-child"><button>Copia</button></span> ' +
                      '</span>' +
                      '</div>' + html;
               
               alert("HTML===>"+html);
‍‍‍‍‍‍‍‍‍‍‍‍‍

declared button in onReady function in search.js:

//Copy YUI button
         this.widgets.copyButton = Alfresco.util.createYUIButton(this, "copy-button", this.onCopyClick);

‍‍‍‍‍

and declared onCopyClick function in search.js:

onCopyClick: function Search_onCopyClick()
      {
         alert("HELLO");
      },
‍‍‍‍‍‍

With this solution, i see the button in cellthumbnail section but when i click on button don't see a alert.

What's wrong?

Thanks a lot.

[need]

Help me please.

[need]

Hi all,

now i have try added new column with sample button copy that call a simple function in Search result page ( file search.js ), i see the column and button, but when i click on the copy button the sample function don't works.

This is my client side js code:

         renderCellCopy = function Search_renderCellCopy(elCell, oRecord, oColumn, oData)
         {
           
             Dom.setStyle(elCell.parentNode, "width", oColumn.width + "px");
             Dom.setStyle(elCell, "height", oColumn.height + "px");
             Dom.addClass(elCell, "copy-cell");
             
             html = ' <span id="pushbutton" class="yui-button"><button type="button">Copy</button></span>';


             
             //html = '<div id="bcontainer"> </div>';
             elCell.innerHTML = html;
             
             YAHOO.util.Event.addListener("pushbutton", "click", this.onCopyClick,this);
           
         };
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And this is my sample function:

onCopyClick: function Search_onCopyClick(obj)
      {
         alert("HELLO");
      },‍‍‍‍

Dont works, please help me to understand what's wrong…Thank's at all.

[zladuric]

Hi,

Glad to see that you got on your own to add this copy-butotn column. Now, from this point, you have two possible issues.
1. Your button instantiation code (the

new YAHOO.widget.Button‍

part) fires too early - before the results are in. So there is no DOM element, so your button can't get attached to anything.

2.. If there are multiple results, you have multiple DOM elements with the same id, 'copy-button'.
You can handle that by having, for example, this a class, not an id. Then you use in your button init code a

var buttonsArray = YAHOO.util.Selector('.copy-button')‍

and then init a listener on each of those. Or, don't add the element as an innerHTML thing - add it as a real DOM element. Ie in your renderCellCopy, you create a new button and then attach a listener to it. Like this:

…
var buttonEl = document.createElement('button');
buttonEl.setAttribute('id', 'something_unique_here_ie_from_oRecord');
..
// now make this a button or something:
var myButton = new YAHOO.widget.Button(buttonEl, buttonConfigObject);
…
// then attach it to child element
elCell.appendChild(buttonEl);
‍‍‍‍‍‍‍‍‍‍‍

Hope that helps.

[mohitshah]

I am creating a similar Action like the CopyTo and MoveTo Actions on the Document Library Page. I am using the Alfresco.module.DoclibGlobalFolder to accomplish the task.

After selecting a folder from the picker and once the 'OK' button is clicked on the Dialog, I am catching the 'folderSelected' event and calling my webscript using Ajax.

My problem is that whenever you click the Action and then the 'OK' button the 'folderSelected' event keeps queing up. Without closing the browser, if you have tried the functionality 3 times you would be catching the event 3 times.

Here's my code:

(function()
{
    Alfresco.doclib.Actions.prototype.onActionLinkTo = function dlA_onActionLinkTo(record, owner)
    {
        // Get action & params and start create the config for displayForm
        var action = this.getAction(record, owner),
            params = action.params,
            config =
            {
                title: this.msg(action.label)
            },
            displayName = record.displayName;

        // Make sure we don't pass the function as a form parameter
        delete params["function"];

        if (!this.modules.linkTo) {
            this.modules.linkTo = new Alfresco.module.DoclibGlobalFolder(this.id + "-linkTo");
        }

        this.modules.linkTo.setOptions(
            {
                allowedViewModes: [
                Alfresco.module.DoclibGlobalFolder.VIEW_MODE_SITE,
                Alfresco.module.DoclibGlobalFolder.VIEW_MODE_REPOSITORY,
                Alfresco.module.DoclibGlobalFolder.VIEW_MODE_USERHOME
            ],
                title: "Link " + record.fileName + " to…",
                siteId: this.options.siteId,
                containerId: this.options.containerId,
                path: this.currentPath,
                files: record,
                rootNode: this.options.rootNode,
                parentId: this.getParentNodeRef(record)
            }).showDialog();

      YAHOO.Bubbling.on("folderSelected", this.onFolderSelected, this.modules.linkTo);

    };

    Alfresco.doclib.Actions.prototype.onFolderSelected = function linkFolder_onFolderSelected(event, args)
    {
        Alfresco.logger.info("— event : " + event);
   }

})();

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So, the log statement "— event :  folderSelected" keeps incrementing as many times as you using the Link.

Please suggest how do I terminate/consume the event.

[zladuric]

mohitshah, what's firing your onFolderSelected event? Find that and change it to either fire only once and then remove the listener, or you can manually remove the listener from the OK button giving you issues?