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!");
    }
  }

Now, enter the following command to build and preview your web part:

gulp serve

Source Code

https://github.com/yushulx/sharepoint-web-twain-document-scan