nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

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-part-1/"">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-structure-share-webscript">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

Project structure.PNG

Find more posts tagged with

Comments

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-part-1/ ? (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-structure-share-webscript. 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.

Working project structure.PNG

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