Configure the E-Signature Viewers

The E-Signature viewers (Template Designer and E-Signer) can be configured in one of three ways as described below.

You can configure:

The Viewer parameters - Working with E-Signing > Developer Reference - E-Signing > External: jQuery.fn
The Viewer control parameters - Working with the Viewer > Developer Reference - Viewer > ViewerControl > ViewerControlOptions

If you specify the documentID viewer control parameter, it is still necessary to specify the templateDocumentId viewer parameter.

Option 1 - Configure the options that will be set when the Viewer is built

You can edit the sample-config.js module file and build the Viewer. This file is located in the modules/common folder of the Template Designer sample and E-Signer sample, which are installed when you install PrizmDoc.

Option 2 - Configure the options without having to build the Viewer

Using PrizmDoc v10.3 or later, in JavaScript you can set window.pccViewerConfig before the Viewer is loaded. Note that the Viewer is loaded when all DOM elements are available (that is, when the jQuery document ready event fires). Any window.pccViewerConfig options you set will be used instead of the sample-config.js module settings (described in #1) or the query parameters (form or document).

For example, you could update C:\Prizm\Samples\.net\cs\template-designer-sample\index.html to include the following JavaScript code to configure the following options in the C# Template Designer:

Viewer control parameter for hiding side handles (instead of corner handles) when the handles are close.
Viewer control parameter for displaying the pages in a single horizontal row (instead of a vertical column).
Viewer parameter for loading the document PdfDemoSample.pdf (instead of having to specify the document as a query parameter).

Example	Copy Code
<script type="text/javascript"> window.pccViewerConfig = { markHandleMode: 'HideSideHandlesWhenClose', pageLayout: 'Horizontal', templateDocumentId: 'PdfDemoSample.pdf', }; </script>

Option 3 - Manually Embed the Viewer

Using PrizmDoc v11.1 or later you can disable default embedding of the Viewer and instead use your own code to embed the Viewer into a web page. In order to do this you will need to perform the following steps:

Change the id property on the div reserved for embedding to something other than the default "pcc-viewer"; doing so will disable auto-embedding.
Create a separate js file that will hold all of the code for embedding. You can check viewer-init.js for an example. Make sure you reference the id that you specified in your html markup, as shown below:

Example	Copy Code
var viewer = $('#pcc-viewer-custom').pccESigner(options);

Reference the js file you created in Step #2 above in your web page, after the bundle.js reference.

Example	Copy Code
<head> ... <!-- load the viewer bundles --> <link rel="stylesheet" href="viewer-assets/css/bundle.css"> <script src="viewer-assets/js/bundle.js"></script> <!-- this file will contain code for custom embedding --> <script src="viewer-assets/js/embed.js"></script> ... </head> <body> <div id="pcc-viewer-custom"></div> </body>

Example

Copy Code

<head>
   ...
   <!-- load the viewer bundles -->
   <link rel="stylesheet" href="viewer-assets/css/bundle.css">
   <script src="viewer-assets/js/bundle.js"></script>
   <!-- this file will contain code for custom embedding -->
   <script src="viewer-assets/js/embed.js"></script>
   ...
</head>
<body>
   <div id="pcc-viewer-custom"></div>
</body>