Customising Share widgets

[stuartleyland]

Hello,

I am trying to follow <a href=http://blogs.alfresco.com/wp/developer/2012/05/22/customizing-share-javascript-widget-instantiation-..."">this blog post by Dave Draper</a> about customising Share widgets. Unfortunately I haven't been able to get the message to display as Dave does. I have attached an image showing my project structure which I believe is correct. I have found <a href-"https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/what-file-structu...">this forum post</a> in which he explains the folder structure. I am building this project as a Jar file and putting it into the lib folder of a standard Alfresco Share 4.2 Enterprise install.

Any advice you can offer would be much appreciated - I've been tearing my hair out for a few hours now!

Thanks
Stuart

[ddraper]

Sorry you're having issues with one of the blog posts… I'm guess you mean this one: http://blogs.alfresco.com/wp/developer/2012/05/22/customizing-share-javascript-widget-instantiation-... ? (the link isn't working that you've included - neither is the one to a forum post. If you could paste the forum links again that would be helpful… it's quite a while since I wrote that post and something may have changed in the interim… certainly for 4.2 we've merged the old DocLib toolbar and doclist widget instantiation into a single new WebScript "documentlist-v2.get" - and I suspect that this is the cause of the problem.

[stuartleyland]

Hi Dave, thanks for your reply. You are correct, that's the blog post I attempted to link to and this is the forum post I referred to:  https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/what-file-structu.... While I'm here I may as well post the contents of all of my files in case I've missed something.

/src/main/resources/alfresco/site-data/extension/doclib-extension.xml

<extension>
   <modules>
      <module>
         <id>Custom DocumentList Widget</id>
         <description>Instantiate a custom DocumentList widget</description>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco.components.documentlibrary
               </targetPackageRoot>
               <sourcePackageRoot>blog.demo.customization</sourcePackageRoot>
            </customization>
         </customizations>
      </module>
   </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

/src/main/resources/META-INF/doclib/extension/custom-documentlist.js

// Declare namespace…
if (typeof Blog == undefined || !Blog) {
   var Blog = {};
}
if (!Blog.custom) {
   Blog.custom = {};
}
(function() {
   // Define constructor…
   Blog.custom.DocumentList = function CustomDocumentList_constructor(htmlId) {
      Blog.custom.DocumentList.superclass.constructor.call(this, htmlId);
      return this;
   };

   // Extend default DocumentList…
   YAHOO.extend(Blog.custom.DocumentList, Alfresco.DocumentList, {
      onFilterChanged : function CustomDL_onFilterChanged(layer, args) {
         // Call super class method…
         Blog.custom.DocumentList.superclass.onFilterChanged.call(this,
               layer, args);

         // Pop-up a message…
         Alfresco.util.PopupManager.displayMessage({
            text : "Filter Changed!"
         });
      }
   });
})();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

/src/main/resources/webscripts/documentlist.get.html.ftl

<@markup id="custom-documentlist-dependencies" target="js" action="after" scope="global">
  <@script src="${url.context}/res/doclib/extension/custom-documentlist.js" group="documentlibrary"/>
</@markup>
‍‍‍‍‍

/src/main/resources/webscripts/documentlist.get.js

// Find the default DocumentList widget and replace it with the custom widget
for (var i = 0; i < model.widgets.length; i++) {
   if (model.widgets.id == "DocumentList") {
      model.widgets.name = "Blog.custom.DocumentList";
   }
}
‍‍‍‍‍‍‍‍

[ddraper]

The key change is that your extension files will now need to be called "documentlist-v2.get.html.ftl" and "documentlist-v2.get.js" to match the new core WebScripts that are used. Give that a try and let me know if it works or not.

[stuartleyland]

I've now fixed this but the change to V2 is only part of the solution. I think the other aspect of it was the <sourcePackageRoot> tag in the XML file did not correctly match up with my folder structure. In any case I've moved a lot of files around now and this is my working solution.

/src/main/resources/alfresco/site-data/extensions/filter-change-popup.xml

<extension>
    <modules>
        <module>
            <id>Custom DocumentList Widget</id>
            <description>Instantiate a custom DocumentList widget</description>
            <auto-deploy>true</auto-deploy>
            <customizations>
                <customization>
                    <targetPackageRoot>org.alfresco.components.documentlibrary</targetPackageRoot>
                    <sourcePackageRoot>com.XXX.training.components.documentlibrary.customization</sourcePackageRoot>
                </customization>
            </customizations>
        </module>
    </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

/src/main/resources/alfresco/site-webscripts/com/XXX/training/components/documentlibrary/customization/documentlist-v2.get.html.ftl

<@markup id="custom-documentlist-dependencies" target="js" action="after" scope="global">
  <@script type="text/javascript" src="${url.context}/res/components/documentlibrary/extensions/custom-documentlist.js" group="documentlibrary"/>
</@markup>
‍‍‍‍‍

/src/main/resources/alfresco/site-webscripts/com/XXX/training/components/documentlibrary/customization/documentlist-v2.get.js

// Find the default DocumentList widget and replace it with the custom widget
for (var i=0; i<model.widgets.length; i++) {
  if (model.widgets.id == "DocumentList") {
    model.widgets.name = "Training.custom.DocumentList";
  }
}
‍‍‍‍‍‍‍‍

/src/main/resources/META-INF/components/documentlibrary/extensions/custom-documentlist.js

// Declare Training namespace…
if (typeof Training == undefined || !Training) {
    var Training = {};
}

if (!Training.custom) {
    Training.custom = {};
}

(function() {
  // Define constructor…
  Training.custom.DocumentList = function CustomDocumentList_constructor(htmlId) {
    Training.custom.DocumentList.superclass.constructor.call(this, htmlId);
    return this;
  };

  // Extend default DocumentList…
  YAHOO.extend(Training.custom.DocumentList, Alfresco.DocumentList,
  {
    onFilterChanged: function CustomDL_onFilterChanged(layer, args)
    {
      // Call super class method…
      Training.custom.DocumentList.superclass.onFilterChanged.call(this, layer,args);

      // Pop-up a message…
      Alfresco.util.PopupManager.displayMessage({
        text: "Filter Changed!"
      });
    }
  });
})();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Other points of note:

• I have moved the .get.html.ftl and .get.js files from a webscripts folder directly in the project root to a structure under site-webscripts.
• Some file names have been changed from the original and some code has been modified to remove identifying information.
• <auto-deploy>true</auto-deploy> has been added to the XML file. Without it you will need to go to http://localhost:8080/share/page/modules/deploy and deploy your module.

Hopefully this will be useful for someone else. I will add a link to this thread in the comments of the original blog post.

Thanks for your help Dave.

[ddraper]

Thanks for looking into this and resolving the issues, it's much appreciated… I'll try and get the blog post updated as soon as I have some time - thanks again!

[arunakumarkumar]

I have tried to do the custom-documentlist.js. Module is created successfully but "Filter changed" message is not coming. Could you please post the structure of the files.

My Requirement is , if i apply aspect the top menu's and document url should disable using custom-documentlist.js. If you have any idea.Please share.

Thanks in advance