Integrating DocuVieware in your Angular2 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.

Legacy guide notice

This guide uses Angular 2 with ASP.NET Web API on .NET Framework 4.6.

Angular 2 and .NET Framework 4.6 are no longer recommended for new applications.

This guide is intended for maintaining existing applications or environments with fixed legacy constraints.

Prerequisite

DocuVieware requires its own JavaScript that can be found in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources) folder. In the following examples, it’s assumed that they’re available locally.

Below is what’s needed in your <head> section:

HTML
<!-- DocuVieware resources -->
<script src="docuvieware-min.js"></script>

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 Angular2

This guide assumes you have all the Angular and Node.js prerequisites and modules installed and set up.

To integrate DocuVieware in an Angular2 client application, create a DocuVieware component and service so it can be inserted in the HTML using a <docuvieware></docuvieware> tag.

First, the service — this is the part that actually accesses the REST API through a POST request that returns the control markup. This is also where you set the control properties as needed:

TypeScript
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class DocuViewareService {
 headers: Headers;
 options: RequestOptions;
 constructor(private http: Http) {
 this.headers = new Headers({ 'Content-Type': 'application/json' });
 this.options = new RequestOptions({ headers: this.headers });
 }
 getDocuViewareMarkup() {
 let 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
 };
 let body = JSON.stringify(docuViewareConfig);
 return this.http
 .post('http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl', body, this.options)
 .map(this.extractData)
 .catch(this.handleError);
 }
 private extractData(res: Response) {
 let body = res.json();
 return body || {};
 }
 private handleError(error: any) {
 let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
 console.error(errMsg);
 return Observable.throw(errMsg);
 }
}

Next, create the component that handles the <docuvieware> tag using the newly created service. This is where the DocuVieware CSS is injected, so make it available locally (similar to the JavaScript, you’ll find it in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources) folder):

TypeScript
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DocuViewareService } from './docuvieware.service'
@Component({
 selector: 'docuvieware',
 template: `<div id="dvContainer" style="width:1200px; height:1000px;"></div>`,
 styleUrls: ['docuvieware-min.css'],
 encapsulation: ViewEncapsulation.None
})
export class DocuViewareComponent implements OnInit {
 htmlContent: any;
 constructor(private docuviewareService: DocuViewareService) {
 }
 ngOnInit(): void {
 this.docuviewareService.getDocuViewareMarkup().subscribe(
 response => this.insertElement(response["HtmlContent"]),
 error => this.htmlContent = <any>error
 );
 }
 insertElement(content: string): void {
 const fragment = document.createRange().createContextualFragment(content);
 document.getElementById("dvContainer").appendChild(fragment);
 }
}

Wrap it in an app.module.ts file so it can be injected in the main.ts file:

TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { DocuViewareService } from './docuvieware.service'
import { DocuViewareComponent } from './docuvieware.component'
@NgModule({
 imports: [BrowserModule, HttpModule],
 declarations: [DocuViewareComponent],
 providers: [DocuViewareService],
 bootstrap: [DocuViewareComponent]
})
export class AppModule { }
TypeScript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);