DS Server: Merging Documents using the DocumentProcessing Web API in Angular

<tx-ds-document-editor width="1024px" height="600px" serviceURL="https://trial.dsserver.io" oauthClientID="dsserver.MpgG1D123pueDblkrRTUWASud2Lvl3Xx" oauthClientSecret="RQSupqYENd123tYBx5A1nu9HkiDy5LzgO" [userNames]="['user1', 'user2']"> </tx-ds-document-editor>

<br />

<input (click)="onClickMergeDocument()" type="button" value="Merge Document" />

export class AppComponent {

public _http: HttpClient; private _mergeData: any; private _dsDocumentProcessing: DsDocumentProcessingModule;

constructor(http: HttpClient) { this._http = http; this._dsDocumentProcessing = new DsDocumentProcessingModule(this._http);

// dummy merge data this._mergeData = [{ customer: [ { name: "Peter Petersen", company: "Software House", }, { name: "Jack Developer", company: "Software Company", } ], }]; }

@HostListener('document:dsDocumentEditorLoaded') onDsDocumentEditorLoaded() { // attached textControlLoaded event TXTextControl.addEventListener("textControlLoaded", () => { // fill reporting drop-down structure with dummy merge data this._dsDocumentProcessing.loadData(this._mergeData); }); }

async onClickMergeDocument() { // get the saved document from TXTextControl let mergeBody: MergeBody = { mergeData: this._mergeData, template: await this._dsDocumentProcessing.saveDocument(), mergeSettings: null };

this._dsDocumentProcessing.mergeDocument(mergeBody, 'TX'); }; }

class MergeBody { mergeData: any; template: any; mergeSettings: string; }

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClient, HttpHeaders } from '@angular/common/http';

declare const TXTextControl: any;

@NgModule({ declarations: [], imports: [ CommonModule ] })

export class DsDocumentProcessingModule {

private _http: HttpClient; private _baseUrl: string = 'https://trial.dsserver.io'; private _clientId: string = 'dsserver.MpgG1DH4123eDblkrRTUWASud2Lvl3Xx'; private _clientSecret: string = 'RQSupqYEN123tYBx5A1nu9HkiDy5LzgO'; private _urlMerge: string = '/documentprocessing/document/merge'; private _urlOAuth: string = '/oauth';

constructor(http: HttpClient) { this._http = http; }

private getAccessToken() {

return new Promise(resolve => {

let options = { headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Basic ' + btoa(this._clientId + ':' + this._clientSecret) }) }; this._http.post<any>(this._baseUrl + this._urlOAuth + "/token", 'grant_type=client_credentials', options).subscribe(result => { resolve(result.access_token); }, error => console.error(error));

});

}

async mergeDocument(mergeBody, returnFormat) {

var accessToken = await this.getAccessToken();

console.log(accessToken);

let options = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + accessToken, }) };

this._http.post<any>(this._baseUrl + this._urlMerge + '?returnFormat=' + returnFormat, mergeBody, options).subscribe(result => {

// load the results into TXTextControl this.loadDocument(result[0]); }, error => console.error(error)); }

saveDocument() { return new Promise(resolve => { TXTextControl.saveDocument(TXTextControl.streamType.InternalUnicodeFormat, function (e) { resolve(e.data); }); }); }

loadDocument(document) { TXTextControl.loadDocument(TXTextControl.streamType.InternalUnicodeFormat, document); }

loadData(data) { TXTextControl.loadJsonData(JSON.stringify(data)); }

}