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.

Enabling Thumbnails for Viewer Component

Mark_Davidson

I'm using the Viewer Component. It renders various types of content correctly - PDF, TXT, DOCX, etc. I'm struggling to enable thumbnails.

I have 'allowThumbnails' set to true but no thumbnails are displayed. I had a look at the documentation at https://www.alfresco.com/abn/adf/docs/core/components/viewer.component/.

There's mention of configuring the PDF.js library. I ran 'npm install pdfjs-dist' as suggested. As for the next step 'vendors.ts' - I don't see this anywhere. Can someone point me in the right direction? Is there anything else that I need to do to enable thumbnails?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

I'm running ACS 6.2. The ADF app was created using the Yeoman generator.

Cheers

Mark

Is there anyway of adding new tags for posts? I see that I can choose 'ACS 6.1.x' but not 'ACS 6.2.x'. There's not even a tag for ADF posts, nevermind specific ADF components.

Find more posts tagged with

Application Development Framework

Comments

eugenio_romano

Hi, that property allowThumbnails is only to toggle the thumbnails area in the pdf viewer. By default, the viewer already gives you this button option. You don't need more code to enable it

Screenshot 2020-07-06 at 17.47.41.png

Mark_Davidson

I must be doing something wrong then as I don't get thumbnails in the Viewer. I've tried with files of various mime types. I've pasted the code/markup below. Have I missed out anything?

---------------------------------------------------------------------------------------

<adf-viewer *ngIf="documentId"
  id="docViewer"
  [overlayMode]="overlayMode"
  [nodeId]="documentId"
  [allowDownload]="allowDownload"
  [allowFullScreen]="allowFullScreen"
  [allowGoBack]="allowGoBack"
  [allowLeftSidebar]="allowLeftSidebar"
  [allowNavigate]="allowNavigate"
  [allowPrint]="allowPrint"
  [allowRightSidebar]="allowRightSidebar"
  [allowThumbnails]="allowThumbnails"
  [canNavigateBefore]="canNavigateBefore"
  [canNavigateNext]="canNavigateNext"
  [showLeftSidebar]="showLeftSidebar"
  [showRightSidebar]="showRightSidebar"
  [showToolbar]="showToolbar"
  [showViewer]="showViewer"
>
</adf-viewer>

import { Component, OnInit, Input } from '@angular/core';
import { StateService } from 'app/state.service';

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.scss']
})
export class ViewerComponent implements OnInit {

  overlayMode: boolean = false;
  allowDownload: boolean = true;
  allowFullScreen: boolean = true;
  allowGoBack: boolean = false;
  allowLeftSidebar: boolean = true;
  allowNavigate: boolean = false;
  allowPrint: boolean = true;
  allowRightSidebar: boolean = true;
  allowThumbnails: boolean = true;
  canNavigateBefore: boolean = true;
  canNavigateNext: boolean = true;
  showLeftSidebar: boolean = true;
  showRightSidebar: boolean = false;
  showToolbar: boolean = true;
  showViewer: boolean = true;

  @Input() documentId: string;

  constructor(private state: StateService) { }

  ngOnInit() {}

}

Mark_Davidson

Here's some more info. When I select a doc from the doc list component (which is bound to the viewer component) I see this in the browser console.

pdf.js:7221 Uncaught (in promise) TypeError: Promise.allSettled is not a function
    at MessageHandler._deleteStreamController (pdf.js:7221)
    at MessageHandler._processStreamMessage (pdf.js:7160)
    at Worker.MessageHandler._onComObjOnMessage (pdf.js:6817)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at Worker.globalZoneAwareCallback (zone.js:1781)

I'm wondering if this is why the thumbnails aren't appearing?

I googled the error message & some have suggested that zone.js needs to be updated. Any ideas?

Thanks

Mark

Mark_Davidson

Probably useful to paste a screenshot of the entire console contents: