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.

Customizing Aikau PdfJs Preview Widget

keith_bailey

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 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.

Cheers,

Keith

/src/main/amp/config/alfresco/web-extension/site-data/extensions/myco-custom-viewer.xml

<extension>
     <modules>
          <module>
               <id>Custom Document Preview Widget</id>
               <description>Instantiate a Document Preview Widget</description>
               <auto-deploy>true</auto-deploy>
               <customizations>
                    <customization>
                         <targetPackageRoot>org.alfresco.modules.preview</targetPackageRoot>
                         <sourcePackageRoot>com.myco.modules.preview</sourcePackageRoot>
                    </customization>
               </customizations>
          </module>
     </modules>
</extension>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

/src/main/amp/config/alfresco/web-extension/site-webscripts/com/myco/modules/preview/myco-preview.get.js

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

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

               widgetsForPluginsOverrides : [ {
                    id : "PdfJs",                    
                    name: "alfresco/preview/PdfJs/PdfJs",
                    replace: true,
                    config: {
                         maximized : "true" }
               } ]
          }
     });
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Find more posts tagged with

Alfresco Content Services

Comments

afaust

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.

keith_bailey

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

keith_bailey

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!