Customizing Aikau PdfJs Preview Widget

Showing results for 
Search instead for 
Did you mean: 

Customizing Aikau PdfJs Preview Widget


I'm pretty new to Share development so please bear with me.

What I'd like to do is the following :

1) Change the behaviour of the Aikau PdfJs viewer, so that it is maximized by default.

2) Show the PDF outline/thumbnail sidebar by default.

So, far I'm failing to make much progress on 1) - i've got the following config, and I suspect the <targetPackageRoot> is incorrect, but i've tried 'preview' and 'document-details' packages. The preview one seems the most logical.

What else do I need ? Is the below sufficient to push an updated config to the widget ? 

What about the ID's ?

I couldnt figure out what the ID should be for AlfDocumentPreview, so I tried finding by name. At the moment, I dont think the .js is even being run, so its a non-starter.

Can you push a config to the widget without an ID ?

On the off-chance that i'm on the right track, is using 'widgetsForPluginsOverrides' the correct mechanism to use? 

Finally, can I use the same mechanism to perform requirement 2) - It doesnt look like there is a flag for the sidebar, although the vanilla mozilla pdfjs appears to have a "sidebarViewOnLoad"... I can see there is a onSideBarToggle() method, but how can I cause this to fire ?

For what its worth, I have been through the excellent Aikau tutorials by Dave Draper, but I cant help feeling i'm missing something fundamental when it comes to lightly modifying a widget through a surf extension module.

Thanks for any help / pointers.




               <id>Custom Document Preview Widget</id>
               <description>Instantiate a Document Preview Widget</description>


var docPreview = widgetUtils.findObject(model.jsonModel, "name",
this.alfLog("log", "In override viewer Widget", config);

if (docPreview != null) {
this.alfLog("log", "Found Preview Widget ", config);
          name : "alfresco/preview/AlfDocumentPreview",
          config : {
               heightMode : 600,

               widgetsForPluginsOverrides : [ {
                    id : "PdfJs",                    
                    name: "alfresco/preview/PdfJs/PdfJs",
                    replace: true,
                    config: {
                         maximized : "true" }
               } ]
3 Replies

Re: Customizing Aikau PdfJs Preview Widget

The Aikau PDF.js previewer is currently only used within the Faceted Search page for the preview popup when you click on the thumbnail of a document in the search result. The preview in the document-details page is a non-Aikau PDF.js instance. The package you are targeting (org.alfresco.modules.preview) does not contain a web script that is using Aikau / model.jsonModel at all, so there is nothing to customise. Also, your JavaScript file is called myco-previewer.get.js so the Surf customisation will only work for an Alfresco file /alfresco/site-webscripts/org/alfresco/modules/preview/myco-previewer.get.js - such a file does not exist.

Lastly, the document-details page is currently not based on the Aikau-based details page, which is only an experimental / work-in-progress page. This is a result of Alfresco not prioritising the migration of old YUI-based pages over to Aikau in the last years. So to customise the document previewer you would need to customise the legacy YUI PDF.js previewer component.


Re: Customizing Aikau PdfJs Preview Widget

Thanks Axel, most informative. 

Oh dear - well, at least I know my confusion was justified - I was directed to JSDoc: Module: alfresco/preview/PdfJs/PdfJs  by Alfresco Support.

I wasn't sure about the naming of my customised .get.js - in fact i've just tried renaming it to pdfjs.get.js, and I can see it gets loaded now, which is a start. 

I'll go back to support with this information and ask them to advise on your response.



Re: Customizing Aikau PdfJs Preview Widget

I’ve had some success.  I’m sure there is a ‘nicer’ way of doing this, although I suspect the benefit is marginal given where I had to perform the change.


I modified the non-Aikau PdfJs.js directly : Initially I tried changing the value of the “maximized”  to ‘true’ in the configuration attributes – this had no effect. I did, however have some success by calling  the this.onMaximizeClick() at the end of _loadPdf.  


I placed the file in in an amp at :




This had the effect of overwriting the OOTB file.


Unfortunately attempting to call onSideBarToggle() in the same place didn’t work, but I suspect this is because it’s happing too early during the rendering of the JS. If there was a way to fire the OOTB javascript methods after the viewer has been loaded, that would remove the need to replace the standard product.


So, I’m nearly there!