topic Customizing Aikau PdfJs Preview Widget in Alfresco Forum

Customizing Aikau PdfJs Preview Widget

keith_bailey — Thu, 23 Feb 2017 11:40:16 GMT

Hi,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 th

Re: Customizing Aikau PdfJs Preview Widget

afaust — Thu, 23 Feb 2017 14:42:09 GMT

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

keith_bailey — Thu, 23 Feb 2017 15:21:20 GMT

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.

Keith

Re: Customizing Aikau PdfJs Preview Widget

keith_bailey — Wed, 01 Mar 2017 10:29:07 GMT

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 :

/src/main/amp/web/components/preview/PdfJs.js

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!