How to easily deploy a scan page in Office 365 SharePoint using Dynamic Web TWAIN SDK

More and more organizations have moved to the Office 365 / SharePoint environment for document management. Today, I’d like to cover how to easily build and deploy a scan page in Office 365 to scan records/documents from TWAIN scanners by using Dynamic Web TWAIN SDK, which  is a web-based TWAIN scanning SDK.

Key features of the SDK include:

  • Provides ActiveX for working with 32 bit and 64 bit Internet Explorer.
  • Provides Plugin for working with Chrome, Firefox, Safari on Windows, macOS, and Linux
  • Capable of scanning images from scanners and other TWAIN compatible devices
  • Support for BMP, JPEG, PNG, single/multi-page PDF and single/multi-page TIFF
  • Supports cookie & session integration.
  • Downloads/Uploads image(s) through HTTP/HTTPS or FTP.
  • Supports JavaScript + HTML/HTML5 on the client side
  • No limit on the server-side platform/language. You can use ASP.NET, PHP, JSP, ASP, VB.NET, etc.

How to develop a SharePoint scan page using Dynamic Web TWAIN?

There are mainly two ways to develop a SharePoint-hosted application:

  1. Develop in Visual Studio on a local environment (more details)
  2. Develop online using “Napa” (no need to configure, just need an account)

Either way, it is easy to integrate the Dynamic Web TWAIN plugin within an Office365 application. In this article, we will use the 2nd way – Napa – to quickly deploy a scan page.

First, please sign up for an Office 365 Developer Site if you don’t have an account yet (more details). Then you can follow the steps below to easily develop & deploy a scan page using Dynamic Web TWAIN SDK.

    1. Log into your SharePoint 2013 Developer Site and click on the ‘Build an app’ section.

Create an App for SharePoint

  1. Click ‘Add New Project’, select ‘App for SharePoint’ and specify the project name.
  2. Now you can write/upload the relevant code. To expedite the process, we will just use an existing sample of Dynamic Web TWAIN – Basic Scan – which can be downloaded from this page.
  3. After downloading the sample’s source code , unzip it, you see the items as shown in the picture below:Dynamic Web TWAIN sample files
  4. From here we can start deploying the sample as an Office365 App. In Napa, expand ‘resources’ in the left panel and click Upload. Browse to the ‘Resources’ directory of the Dynamic Web TWAIN sample and upload the cab, msi and pkg files. These are the web twain ActiveX and Plugin files for different browsers.Add Dynamic Web TWAIN Plugin files as resources
  5. Then go to the ‘Pages’ section in the left panel and we can create a new web page for document scanning with the Dynamic Web TWAIN plugin. Or you can directly code in ‘Default.aspx’.Create a scan page
  6. Add a div for theDynamic Web TWAIN plugin and a Scan button in HTML. Basically, you can copy over the corresponding code from the sample page ‘DWT_HTML_BasicScan.htm’ to have a quick test.
    <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
    <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">	
    
    	 <div class="DWTPage body_Broad_width">
            <div class="DWTBody">
                <!--This is where Dynamic Web TWAIN control will be rendered.-->
                <div id="dwtcontrolContainer" class="DWTContainer"></div>
    
                <!--This is where you add the actual buttons to control the component.-->
                <div class="ScanWrapper">
                    <div class="divTableStyle" >
                        <input class="DWTScanButton btn" type="button" value="Scan" onclick="acquireImage();" />
                    </div>
                    <div id="divInfo"></div>
                </div>
                <div class="body_clr"></div>
            </div>	
        </div>
    
    </asp:Content>
  7. Write the JavaScript code to  scan images from TWAIN scanners. It’s only a few lines using our Dynamic Web TWAIN SDK.
    function acquireImage() {
        var DWObject = gWebTwain.getInstance();
        if (DWObject) {
            if (DWObject.SourceCount > 0) {
                DWObject.SelectSource();
                DWObject.AcquireImage();
            }
            else
                alert("No TWAIN compatible drivers detected.");
        }
    }

    There is some other JS code work which includes initiation of the TWAIN SDK. You can just upload the JS files in ‘Scripts’ directly from the web twain sample which you downloaded in step #4.

    Please take a note of the JS files relative paths when you reference from the scan page.

    <script src="../Scripts/dynamsoft.webtwain.initiate.js"></script>
        <script src="../Scripts/DWTSample_BasicScan.js"></script>

All done. You can click the ‘Run Project’ icon in the lower left corner to test your scan page.

By clicking the Scan button, you will see all the available TWAIN devices available and you can click Scan in the user interface of the selected scanner to acquire images.

Office365 Dynamic Web TWAIN Scan Demo

The Office 365 scan project is available at:
https://www.napacloudapp.com/Share/Edit/c7afbc8a345a4a2da29fcccadc89e09c#/Pages/Scan.aspx

If you want to develop on your own machine and customize the code, you can download the 30-day free trial of Dynamic Web TWAIN.

 

Have you deployed a document scanning project in Office 365? How did it go? Please share your comments or questions in the Comment section below.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com