Posted on Sep 22, 2021 • Originally published at dynamsoft.com

How to Implement Document Management in Office 365 SharePoint

More and more organizations have moved to the Office 365 / SharePoint environment for document management. This article introduces how to integrate Dynamic Web TWAIN SDK into SharePoint client-side web parts.

Developing Document Management Page for Office 365 SharePoint

According to Microsoft’s tutorial, we use following commands to initialize the skeleton of a new web part project:

mkdir helloworld cd helloworld npm install -g yo npm install @microsoft/generator-sharepoint yo @microsoft/sharepoint

Afterwards, we install Dynamic Web TWAIN via npm:

npm install dwt --save

Once the installation is done, we can import Dynamic Web TWAIN module to src/webparts/HelloWorldWebPart.ts as follows:

import Dynamsoft from 'dwt'; import { WebTwain } from 'dwt/dist/types/WebTwain';

The onInit() function is the appropriate place for initializing Dynamic Web TWAIN object:

 protected onInit(): Promise<void> { return super.onInit().then(_ => { // Initialize the WebTwain object Dynamsoft.DWT.Containers = [{ WebTwainId: 'dwtObject', ContainerId: this.containerId, Width: '300px', Height: '400px' }]; Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); }); Dynamsoft.DWT.ResourcesPath = '/dist'; Dynamsoft.DWT.ProductKey = 'LICENSE-KEY'; let checkScript = () => { if (Dynamsoft.Lib.detect.scriptLoaded) { Dynamsoft.DWT.Load(); } else { setTimeout(() => checkScript(), 100); } }; checkScript(); }); } public Dynamsoft_OnReady(): void { this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId); this.bWASM = Dynamsoft.Lib.env.bMobile || !Dynamsoft.DWT.UseLocalService; }

Here, a valid license is required to make the SDK work. The resource path points to the CSS, JS and installer files of Dynamic Web TWAIN, which can be found at node_modules/dwt/dist. In order to load them successfully, we add the following code snippet in gulpfile.js to copy these assets to the directory we set:

let resCopy = build.subTask('resCopy', (gulp, buildOptions, done) => { gulp.src('./node_modules/dwt/dist/**.*') .pipe(gulp.dest('./dist/')); gulp.src('./node_modules/dwt/dist/dist/**.*') .pipe(gulp.dest('./dist/dist')); gulp.src('./node_modules/dwt/dist/addon/**.*') .pipe(gulp.dest('./dist/addon')); gulp.src('./node_modules/dwt/dist/src/**.*') .pipe(gulp.dest('./dist/src')); done(); }) build.rig.addPreBuildTask(resCopy);

Finally, we add a button and its corresponding function for scanning documents:

public render(): void { this.domElement.innerHTML = ` <div class="${ styles.helloWorld }"> <div class="${ styles.container }"> <div class="${ styles.row }"> <div class="${ styles.column }"> <span class="${ styles.title }">Welcome to SharePoint!</span> <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p> <p class="${ styles.description }">${escape(this.properties.description)}</p> <button class="${ styles.button } id="scan">Scan</button> <div id="${this.containerId}"></div> </div> </div> </div> </div>`; this.button = this.domElement.querySelector('button'); this.button.addEventListener('click', this.acquireImage.bind(this)); } public acquireImage(): void { if (!this.DWObject) this.DWObject = Dynamsoft.DWT.GetWebTwain(); if (this.bWASM) { alert("Scanning is not supported under the WASM mode!"); } else if (this.DWObject.SourceCount > 0) { const onAcquireImageSuccess = () => { this.DWObject.CloseSource(); }; const onAcquireImageFailure = onAcquireImageSuccess; this.DWObject.OpenSource(); this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure); } else { alert("No Source Available!"); } }