DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Xiao Ling
Xiao Ling

Posted on • 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
Enter fullscreen mode Exit fullscreen mode

Afterwards, we install Dynamic Web TWAIN via npm:

npm install dwt --save
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!");
    }
  }
Enter fullscreen mode Exit fullscreen mode

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

gulp serve
Enter fullscreen mode Exit fullscreen mode

sharepoint web document management

Source Code

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

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.