AnsweredAssumed Answered

Extending Share widgets

Question asked by stuartleyland on Jan 10, 2014
Latest reply on Jan 14, 2014 by stuartleyland
Hi all. This is somewhat related to my previous question (http://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/customising-share-widgets-01082014-1810) which I am using as a stepping stone for my next task. My ultimate goal is to be able to make the preview on the document details page "float" down the page when you scroll down the page so that it is always visible. For example when you look at the version history the document is often out of sight. However as a baby step I would like to customise the preview widget so that it pops up a message when some event occurs. The problem I am having is that the document-details page tries to instantiate my component before the script containing it has been loaded. The actual error is:

<blockquote>
Uncaught ReferenceError: Training is not defined document-details?nodeRef=workspace://SpacesStore/e0d90fa6-580c-408a-9b52-d0cb330cfac7:212
</blockquote>

Here is my code:

/src/main/resources/alfresco/site-data/extensions/floating-preview.xml

<extension>
    <modules>
        <module>
            <id>Floating Document Preview</id>
            <description>Keeps the preview visible even when scrolling</description>
            <auto-deploy>true</auto-deploy>
            <customizations>
                <customization>
                    <targetPackageRoot>org.alfresco.components.preview</targetPackageRoot>
                    <sourcePackageRoot>com.XXX.training.components.preview.customization</sourcePackageRoot>
                </customization>
            </customizations>
        </module>
    </modules>
</extension>


/src/main/resources/alfresco/site-webscripts/com/XXX/training/components/preview/customization/web-preview.get.html.ftl

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


/src/main/resources/alfresco/site-webscripts/com/XXX/training/components/preview/customization/web-preview.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 == "WebPreview") {
      model.widgets.name = "Training.custom.WebPreview";
   }
}


/src/main/resources/META-INF/components/preview/extensions/floating-preview.js

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

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

(function() {
  // Define constructor…
  Training.custom.WebPreview = function CustomWebPreview_constructor(containerId) {
    Training.custom.WebPreview.superclass.constructor.call(this, containerId);
    return this;
  };

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

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


I have attached two files showing the where the widget is instantiated and where the JavaScript file that contains its definition is - note the line numbers, the widget is instantiated before the JavaScript file is included.

I imagine that the problem is due to how I change the WebPreview component - simply by changing the name when I find it in the list of widgets. This is how Dave Drapper does it in the blog post linked in my other question but I can't help but feel it's a fairly flaky way of doing business.

Any advice would be much appreciated.

Outcomes