How to Implement Document Management in Office 365 SharePoint
Tags: sharepoint, document, office365
Published: 2021-09-22 07:22:30

More and more organizations have moved to the Office 365 / SharePoint environment for document management. This article introduces how to integrate [Dynamic Web TWAIN](https://www.dynamsoft.com/web-twain/overview/) SDK into SharePoint client-side web parts.

## Developing Document Management Page for Office 365 SharePoint
According to [Microsoft’s tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part), we use following commands to initialize the skeleton of a new web part project:

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

Afterwards, we install Dynamic Web TWAIN via npm:

```bash
npm install dwt --save
```

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

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

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

```ts
  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](https://www.dynamsoft.com/customer/license/trialLicense?product=dwt) 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:

```ts
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:

```ts
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:

```bash
gulp serve
```

![sharepoint web document management](https://www.dynamsoft.com/blog/wp-content/uploads/2021/09/sharepoint-web-twain.jpg)

## Source Code
[https://github.com/yushulx/sharepoint-web-twain-document-scan](https://github.com/yushulx/sharepoint-web-twain-document-scan)