Introduction

The Viewer offers the following features out of the box:

• A responsive UI
• A jQuery plugin for embedding the full Viewer
• Configuration options
• A customizable UI
• An API
• Reusable core component

Responsive UI

The Viewer’s responsive UI is designed for phone, tablet, and desktop users. A single UI implementation adapts to the viewport size of the device or element in which it is embedded.

jQuery Plugin

A jQuery plugin is used to embed the full-featured, responsive Viewer on the page.

Example

$("#myDiv").pccViewer(pluginOptions);

Configuration

The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters.

Example

var pluginOptions = {
    documentID : "1234abcd",
    encryption : false,
    viewMode : "EqualWidthPages"
}

Configurable options include:

• Disabling tabs
• DRM features
• Localization
• Rendering options
• Encryption
• Default tool settings
• Pre-defined search

Customizable UI

If the Viewer needs to be customized more than the configuration options allow, all of the UI code is open-source and can be modified to suit your customization needs. The open-source Viewer code is separated into CSS files, template HTML files, and JavaScript. The code leverages custom HTML attributes and Underscore.js’ templating system in order to maintain the separation of concerns.

API

The Viewer API offers complete control over the Viewer. The API allows callers to augment, customize, or automate the end user’s experience with the Viewer. The API functionality covers:

• Creating and destroying the Viewer
• Events
• Page navigation
• Zooming and fitting content
• Mark (annotation and redaction) CRUD
• Markup saving and loading
• Customizing mouse tools
• Searching document text
• Printing
• Getting page and document attributes

Example

var api = $("#myDiv").pccViewer(pluginOptions).viewerControl;
api.on("PageCountReady", function() {
    api.changeToLastPage();
});

Reusable Core Component

The core component used by the Viewer for rendering the document is the ViewerControl. The ViewerControl is a component that can be used independent of the full Viewer; it can be directly embedded into a page and used for building a fully custom UI:

• The only UI of the ViewerControl is the page list, which allows scrolling through a document.
• The ViewerControl exposes the API for programmatic control.

• Left example above: embedding the full Viewer using the jQuery plugin.
• Right example above: embedding the ViewerControl alone.

The ViewerControl does not have dependencies on third-party libraries.