Integrating DocuVieware in your JavaScript/jQuery client application

This guide focuses on integrating the DocuVieware control into a client application. Follow the serving DocuVieware through a REST API guide.

Find the source code for both the REST service and integration examples in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware folder.

Prerequisite

DocuVieware only requires its own JavaScript and CSS files from your [SDK INSTALL DIR]\Redist\DocuVieware (Resources) folder. In the following examples, it’s assumed that they’re available locally.

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="docuvieware-min.js"></script>
<link rel="stylesheet" type="text/css" href="docuvieware-min.css">

The last thing required is the complete and accurate URL your REST service is reachable at.

For this guide, it’s assumed that the service is locally running on the machine using port 62968. The complete URL to the method is:

http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl

Your own implementation will mostly differ — especially the port that’s usually randomly selected upon project creation by Visual Studio. Adapt the URL to your configuration.

Integration using JavaScript/jQuery

Below is the minimum HTML markup required to integrate the DocuVieware control.

The mandatory dependencies have been deliberately omitted for the sake of structure clarity.

HTML
<!DOCTYPE html>
<html>
<head>
 <title>DocuVieware HTML5/jQuery App</title>
</head>
<body>
 <div id="dvContainer" style="width:1200px;height:1000px;"></div>
</body>
</html>

Below is the JavaScript/jQuery code required to access the REST service and fill the dvContainer element:

JavaScript
$(document).ready(function () {
 var docuViewareConfig = {
 SessionId: "mySessionId", //Set to an arbitrary value, should be replaced by the session identifier from your session mechanism
 ControlId: "DocuVieware1",
 AllowPrint: true,
 EnablePrintButton: true,
 AllowUpload: true,
 EnableFileUploadButton: true,
 CollapsedSnapIn: true,
 ShowAnnotationsSnapIn: true,
 EnableRotateButtons: true,
 EnableZoomButtons: true,
 EnablePageViewButtons: true,
 EnableMultipleThumbnailSelection: true,
 EnableMouseModeButtons: true,
 EnableFormFieldsEdition: true,
 EnableTwainAcquisitionButton: true
 };
 $.ajax({
 url: "http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl",
 type: "POST",
 contentType: "application/json",
 data: JSON.stringify(docuViewareConfig),
 success: function (data) {
 $("


#dvContainer").html(data["HtmlContent"]);
 }
 });
 });