Example Integration

When a document loads, it defaults to the size of the screen. While this ensures all documents fit on the screen, certain documents may be sized too large. To prevent this, you can set an initial zoom of the document before it is displayed. To set a specific scaling factor before the document loads with optimal performance, subscribe to the PageOpening event to set the target scale before PageDisplayed has fired.

The PageOpening event is triggered when a page being opened has reached the point that it has height, width, and resolution data but hasn't yet been displayed. This example sets the initial zoom of the Viewer at runtime so that it will initialize at 125% zoom factor instead of auto-fit:

Example

function pageOpeningHandler() {
  // Set the initial page zoom to a maximum of 125%
  if (viewerControl.getScaleFactor() > 1.25) {
    viewerControl.setScaleFactor(1.25);
  }
  // Remove the event subscription since we only want to respond to the first PageOpening
  viewerControl.off(PCCViewer.EventType.PageOpening, pageOpeningHandler);
}
viewerControl.on(PCCViewer.EventType.PageOpening, pageOpeningHandler);

The code example above will need to be placed in the location where the Viewer is being created and initialized. For example, in our current NodeJS and HTML sample, in the createViewer.js file, the sample code can be implemented like this:

$(function () {
    var scriptSrc = $('script[src*=createViewer]');
    var documentID = scriptSrc.attr('data-document-id');
    let viewerControl;
    viewerControl = $('#viewerContainer').pccViewer({
        documentID: documentID,
        imageHandlerUrl: '/pas-proxy',     // Base path the viewer should use to make requests to PAS (PrizmDoc Application Services).
        viewerAssetsPath: 'viewer-assets', // Base path the viewer should use for static assets
        resourcePath: 'viewer-assets/img', // Base path the viewer should use for images
        language: viewerCustomizations.languages['en-US'],
        template: viewerCustomizations.template,
        icons: viewerCustomizations.icons,
        annotationsMode: "LayeredAnnotations", // Use the new "LayeredAnnotations" system, which will persist annotation data as JSON (instead of the default "LegacyAnnotations" system, which uses a different XML format)
        redactionReasons: {
            enableRedactionReasonSelection: true, // Enable the UI to allow users to select a redaction reason.
            enableFreeformRedactionReasons: true, // Allow users to type a custom redaction reason.
            enableMultipleRedactionReasons: true, // Allow users to apply multiple redaction reasons to a single redaction (requires a backend running version 13.13 or higher)
            // TODO: Define your own set of redaction reasons for your users to pick from:
            reasons: [{
              reason: '1.a',                   // Text to apply to the redaction itself.
              description: 'Client Privilege'  // Optional extended description the user will see when choosing from the list of redaction reasons.
            }, {
              reason: '1.b',
              description: 'Privacy Information'
            }, {
              reason: '1.c'
            }]
        },
        uiElements: {
            attachments: true,                 // Enable the email attachments UI
            advancedSearch: true               // Enable advanced search
        },
        immediateActionMenuMode: "hover",    // Enable immediate action menu
        attachmentViewingMode: "ThisViewer", // The email attachment will be opened in the same view
    }).viewerControl;

    function pageOpeningHandler() {
      // Set the initial page zoom to a maximum of 125%
      if (viewerControl.getScaleFactor() > 1.25) {
        viewerControl.setScaleFactor(1.25);
      }
      // Remove the event subscription since we only want to respond to the first PageOpening
      viewerControl.off(PCCViewer.EventType.PageOpening, pageOpeningHandler);
    }
    viewerControl.on(PCCViewer.EventType.PageOpening, pageOpeningHandler);
});

NOTE: We need to access Viewer Control, so additional code has been added before the initialization code and right after with let viewerControl on line 4, viewerControl = on line 5, and .viewerControl on line 35.