Technical FAQs

As the software industry continues to transition to web-based applications and Software-as-a-Service (SaaS) solutions, developers are prioritizing flexibility more than ever. Building a unique and compelling customer experience frequently requires versatile software toolkits that are easy to customize and adapt to changing requirements.  Customizing the PrizmDoc Viewer interface makes this simple.

Accusoft’s PrizmDoc Viewer is an HTML5 viewing integration that not only provides an extensive array of viewing, conversion, and annotation features, but was also designed with customization in mind. Creative developers have several options at their disposal when they deploy this innovative solution within their applications.

PrizmDoc Viewer Interface Basics

Once PrizmDoc Viewer is integrated into an application, developers can deploy the pre-built user interface to start viewing documents and image files. Out of the box, the viewer consists of a number of components:

• Tab Navigation: PrizmDoc Viewer can perform a variety of different functions, such as basic viewing, annotation, and redaction. The Tab Navigation indicates which function is currently active.
• Tab Pane: Each tabset selected in the Navigation features a specific set of tools. They can be configured to display either vertically or horizontally.
• Status Bar: This component indicates the current page being viewed. By selecting a different page number, a user can quickly jump to another document page.
• Dialog: Extended options and settings are displayed in this menu area.
• Context Menu: Used primarily for markups, this menu allows users to change annotation properties.
• Page List: The core element of the viewer control, this component is where the document or image itself is rendered for viewing.

Any of these tabs can be disabled easily by altering the configuration parameters. For example, to disable the navigation tab for redaction, the following code could be applied:

var pluginOptions = {
    uiElements: {
        redactTab: false
    }
};

Customizing the Viewer

While developers can simply deploy the viewer interface as-is, PrizmDoc Viewer provides extensive customization features that allow them to change almost every aspect of the viewing experience. The viewer’s functionality itself is built upon the Viewer API, so changing different elements of the viewing interface doesn’t alter the rendering performance or other core PrizmDoc Viewer functionality.

Here are just a few quick customization options that can be added to the viewer with minimal effort:

Custom Buttons

Adding a customized button that performs a specific task can greatly improve the viewer’s functionality for end users. Developers can quickly add custom buttons with a bit of JavaScript and uploading an SVG icon for display.

Keyboard Shortcuts

The PrizmDoc Viewer interface already supports a variety of keyboard shortcuts that allow users to easily scroll up and down the page, adjust the zoom level, and delete selected marks. Developers can alter the existing key bindings to enable new shortcuts or create their own.

Customize Style

In order to provide a consistent brand experience, many developers choose to alter the look and feel of the viewer to match the rest of their application. PrizmDoc Viewer provides extensive controls that allow them to alter image resources, colors, toolbar sizing, icons, and more.

Reorganize Menus

All of the menus and navigation elements can be adjusted based on application needs. Developers can add or remove different viewer templates that feature unique elements for specific use cases. Each template could use different styles and feature custom tabs or markup tools.

Create/Customize Mouse Tools

Unique mouse tools can be created along with a custom button within the UI, although PrizmDoc Viewer comes with a variety of predefined mouse tools that can be deployed and customized. Creating a new mouse tool is a quick two-step process that involves some JavaScript code that first defines the tool and then updates the UI to add a button for it (usually in the annotation tab pane).

Step 1

// Create the new mouse tool. var myTool = PCCViewer.MouseTools.createMouseTool(
                 "PinkLine",
                 PCCViewer.MouseTool.Type.LineAnnotation);

// Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick myTool.getTemplateMark()
    .setColor("#FF69B4")
    .setThickness(10);

Step 2

<!-- The following markup will create a button that enables use
     of the mouse tool named "PinkLine".

     The custom attributes that are used:
      \* data-pcc-mouse-tool="PinkLine" - specifies that the button selects the mouse tool named "MyLineTool"
      \* data-pcc-context-menu="false" - specifies that a context menu is not shown for this mouse tool
     -->
<button>
    data-pcc-mouse-tool="PinkLine"
    data-pcc-context-menu="false"
    class\="pcc-icon pcc-icon-annotate-line"
    title="Pink Line Tool"\></button>

Build a Customized UI

Developers may decide that the default PrizmDoc Viewer UI isn’t quite right for their application needs. In such cases, they can easily use the available components to build a customized viewing UI that is better suited to their application and end users. Creating a custom interface allows developers to strategically place menu and button elements to improve application workflows and conform to their own user experience priorities.

Embrace the Power of Flexibility

Turning to a third-party solution for an application’s viewing and imaging needs doesn’t mean a developer has to give up control over their application’s user experience. Accusoft’s PrizmDoc Viewer delivers powerful viewing, conversion, and annotation features in a fully customizable package that can be adapted to a wide range of application needs. Developers can use the available tools to craft a unique viewing experience from the ground up or utilize the built-in viewing interface to get their solution up and running quickly while putting off customization until later in their development cycle.

PrizmDoc Viewer’s versatile HTML5 rendering technology makes it an ideal integration for web-based applications that need the flexibility to adapt to changing user expectations. Thanks to those customization options, the application a developer brings to market can evolve over time to support a wide range of additional features throughout the product’s lifecycle. To experience the customizable power of PrizmDoc Viewer firsthand, download your free trial today.