Embedding the Viewing Client

The PrizmDoc Viewing Client has been designed to be integrated into both new and existing web applications. Using the familiar jQuery plugin syntax, you can embed the viewing client into your application, and easily configure it to meet your needs.

The Viewing Client requires PrizmDoc Server (either hosted by Accusoft or self-hosted) in order to supplement viewing session requests. The Viewing Client also needs access to PrizmDoc Application Services; for more information on setting up PrizmDoc Application Services routing, see Configuring PrizmDoc Application Services in your Server's Entry Point .

Setting up your Application to use the Viewing Client

Before initializing the Viewing Client using the jQuery plugin, some basic setup is required.

1. Add <meta> tags to the head of your page

These <meta> tags are important for utilizing the responsive features of the Viewing Client across devices and enabling support for Internet Explorer. Include these in the in the <head> of your page, if they are not already there.

Example	Copy Code
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Example

Copy Code

<meta http-equiv="Content-Type" content="text/html;
      charset=utf-8">
<meta name="viewport" content="width=device-width,
      initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2. Include the CSS files

To use the viewing client’s user interface chrome, link to these stylesheets in the <head> of your page:

Example	Copy Code
<link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/viewercontrol.css"> <link rel="stylesheet" href="css/viewer.css">

3. Include the JavaScript files

Four JavaScript files need to be included to run the Viewing Client. The first two are common open-source JavaScript libraries, and the second two (viewercontrol.js and viewer.js) power the Viewing Client itself, and are updated with each release of PrizmDoc.

Example	Copy Code
<script src="//ajax.googleapis.com/ajax/libs/jquery/ 1.10.2/jquery.min.js"></script> <script src="js/underscore.min.js"></script> <script src="js/viewercontrol.js"></script> <script src="js/viewer.js"></script>

Example

Copy Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/
     1.10.2/jquery.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/viewercontrol.js"></script>
<script src="js/viewer.js"></script>

The order the scripts are loaded is important, and should be added in the order shown here.

4. Add a <div> to hold the Viewing Client

To add the Viewing Client to your application, you will need to create a <div> element with a unique ID where you would like to place the Viewing Client. In this example, we are using myDiv as our unique ID, but you may name it whatever fits your application’s coding guidelines.

Example	Copy Code
<div id="myDiv"></div>

5. Adding legacy support (optional)

If you would like to include support for Internet Explorer 8, add the following conditional block in the <head> of your web page:

Example	Copy Code
<!--[if lt IE 9]> <link rel="stylesheet" href="css/legacy.css"> <script src="js/html5shiv.js"></script> <![endif]-->

Embedding the Viewing Client using the jQuery Plugin

Now that the setup is complete, you are ready to embed the full-featured, responsive Viewing Client into your web application using jQuery’s plugin syntax.

Example	Copy Code
$("#myDiv").pccViewer(pluginOptions);

If you chose a different ID than the example in Step 4 above, replace #myDiv with your chosen ID value.

Configuring the Viewing Client

The Viewing Client’s user interface and behavior can be configured when it is embedded using JavaScript parameters. Only three parameters are required to initialize the Viewing Client: documentID, language, and template. Add the following snippet to your JavaScript file to set the required properties:

Example	Copy Code
var pluginOptions = { documentID: viewingSessionId, language: languageItems, template: htmlTemplates }

There are lots of other configuration options for the Viewing Client. For detailed information on all the configuration options available to you, see the Configuration Options section.

Troubleshooting

There are a few issues that may arise while initializing the Viewing Client that may not be immediately obvious. Here are some common console errors and their possible causes:

Uncaught TypeError

Cannot read property 'languageElements' of undefined

This error is thrown when viewer.js cannot find the language object. Verify that the language.json file is being read and parsed correctly.

Uncaught TypeError

Cannot read property 'viewer' of undefined

This error is thrown when viewer.js cannot find the template object. Make sure that the template object exists and that there is a viewer property.

Uncaught ReferenceError

x is not defined

This error could be thrown if you have referenced a variable in the HTML templates that is not defined as data when loading the template. Check to see that this variable exists in either the language.json file or as a template data property used when loading a template.

If you’re still having issues setting up the Viewing Client, visit our Support page or call Accusoft at 813-875-7575.