Integrating DocuVieware in your JavaScript/jQuery client application

In This Topic

The purpose of this tutorial is to highlight the integration of the DocuVieware control into a client application, so please first be sure to follow the Serving DocuVieware through a REST API tutorial.

The source code of both REST service implementation and integration are available in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware\ folder.

Prerequisite

DocuVieware™ only requires its own resources, one JavaScript file and one CSS file, both can be found in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder. In the following examples, it will be assumed that they are available locally.

HTML

Prerequisite	Copy Code
<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 tutorial it is assumed that the service is locally running on the machine using the port 62968. The complete URL to the method is http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl.
Be careful: your own implementation will most probably differ, especially the port that is usually randomly selected upon project creation by Visual Studio so be sure to adapt the URL to your configuration.

Integration using JavaScript/jQuery

Here is minimum HTML markup required to integrate the DocuVieware™ control:

The mandatory dependencies have been deliberately omitted for the sake of the structure clarity, make sure to refer to the previous section in order not to forget anything.

HTML

Integrating the DocuVieware™ control.	Copy Code
<!DOCTYPE html> <html> <head> <title>DocuVieware HTML5/jQuery App</title> </head> <body> <div id="dvContainer" style="width:1200px;height:1000px;"></div> </body> </html>

And here is the JavaScript/jQuery code required to access the REST service and fill the dvContainer element.

JavaScript/jQuery

Accessing the REST service.	Copy Code
$(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"]); } }); });

Accessing the REST service.

Copy Code

$(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"]);
         }
     });
 });