Expand Microsoft SharePoint to Create the Ultimate Document Management Solution

Scan and upload documents to SharePoint via your website using Dynamic Web TWAIN ActiveX/Plugin

Microsoft SharePoint is often used on company intranets with the goal of keeping information centralized and easily accessible to all relevant parties. However, not only information needs to be centralized. Companies spend a huge amount of resources on IT to ensure that all computers are updated with the latest versions of tools and software. Having a SharePoint server that provides software tools can alleviate the need for synchronizing all that software across systems. Dynamic Web TWAIN is a web document processing SDK that can combine with SharePoint’s management features to create the ultimate document management solution for your company.

Dynamsoft provides an ActiveX control for Dynamic Web TWAIN, which can be accessed through the Internet Explorer browser naturally. Although Microsoft SharePoint is most commonly accessed through Internet Explorer, when other browsers are used Dynamic Web TWAIN can also be integrated through a browser plug-in. The following article explains how Dynamic Web TWAIN can be integrated into SharePoint as an object supporting both ActiveX and browser plug-in methods.

Key Features

  • Natural integration into SharePoint as a Web Part.
  • Upload files directly to SharePoint Libraries after scanning and editing the images.
  • ActiveX plug-in for Internet Explorer users.
  • Browser plug-in which supports other browsers: Firefox, Chrome, Opera, Safari.

Get Sample Code Now

Procedure

There are two common methods used to insert custom code into SharePoint: by using “Edit HTML source” on a Page or Content Editor, or by using custom Web Parts. While the first option is simple, it isn’t very modular and makes copying code messy and error prone. In this tutorial, we’re going to focus on the second method: using a custom Web Part.

A Web Part is a modular “object” that can be inserted into any SharePoint page easily. It is created using an .ascx source file that contains HTML, JavaScript, and/or .NET code. In our case, we have no need for any server side scripting, so we will just have HTML and JavaScript. We will use Visual Studio 2010 with SharePoint development tools installed to create the Web Part.

Step 1. Deployment

For the purpose of this tutorial, we’re assuming that you already have an installation of Dynamic Web TWAIN on your computer, or have downloaded a trial version. Go to your Dynamic Web TWAIN installation folder, and take a look at the folder named Resources. In our case, we’re using the trial version, and we have:

  • DynamicWebTWAIN.cab: for 32-bit IE on Windows
  • DynamicWebTWAINx64.cab: for 64-bit IE on Windows
  • DynamicWebTWAINMacEdition.pkg: for Mac OS
  • DynamicWebTWAINPlugIn.msi: for Chrome 26 or older, Firefox 26 or older, Safari and Opera on Windows
  • DynamicWebTWAINHTML5Edition.exe: for Chrome 27 or later, Firefox 27 or later on Windows
  • dynamsoft.webtwain.initiate.js: A JavaScript file that is used to initiate the Dynamic Web TWAIN control.
  • dynamsoft.webtwain.config.js: A JavaScript file that is used to set some configurations for the Dynamic Web TWAIN control.
  • dynamsoft.webtwain.install.js: A JavaScript file that contains some built-in functions for component installation prompt.
  • reference folder: Some related css, pictures and JavaScript for initialization.

These are the files required on the server side for Dynamic Web TWAIN. We’ll upload them to the SharePoint layouts folder so that they can be accessed through the SharePoint server. Find your SharePoint LAYOUTS folder. Typically, this is located at: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS.

Inside that folder, create a new folder called DynamicWebTWAIN or whatever you wish. Copy all the previously mentioned files into this new folder. You are now ready to move on and create a Web Part to use these files.

Note: In our example, we simply put all the Resource files in the folder named Resources under the folder we just created. In order to make the page more beautiful, we also put a css file under the folder named style.

Step 2. Load and upload images to your SharePoint Library

In Visual Studio create a new Web Part to contain Dynamic Web TWAIN. To do this, go to File -> New Project -> SharePoint -> 2010 -> Visual Web Part.

Visual Studio will ask some questions about your server setup, and then create a new .ascx file for you with a few headers. Below those headers, you will insert your HTML and JavaScript code for integrating Dynamic Web TWAIN. Here, you may insert any code which you use for other web pages outside of SharePoint, and it should work fine. For this tutorial I will demonstrate a simple implementation of Dynamic Web TWAIN. There are only 2 buttons in the page. One is for scanning an image from a scanner and another is for uploading it into a SharePoint library.

<link href="/_layouts/DynamicWebTWAIN/style/style.css" type="text/css" rel="stylesheet" />
 
<body>    
    <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" >DWT10.1

                    <input class="DWTScanButton btn" type="button" value="Scan" onclick="acquireImage();" />
                    <hr>
                    <input class="DWTUploadButton btn" type="button" value="UploadToSharePoint" onclick="Upload();" />
                </div>
            </div>
            <div class="body_clr"></div>
        </div>
    </div>
    <script src="/_layouts/DynamicWebTWAIN/Resources/dynamsoft.webtwain.initiate.js"></script>
    <script >
        var DWObject;

        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
        }

        function acquireImage() {
            if (DWObject) {
                if (DWObject.SourceCount > 0) {
                    DWObject.SelectSource();
                    DWObject.OpenSource();
                    DWObject.IfDisableSourceAfterAcquire = true;
                    DWObject.AcquireImage();
                }
                else
                    alert("No TWAIN compatible drivers detected.");
            }
        }

        function Upload() {
            if (DWObject) {
                DWObject.HTTPPort = location.port;
                DWObject.HTTPUploadThroughPut("localhost", DWObject.CurrentImageIndexInBuffer, "/TWAIN%20Uploads/twain_associate.pdf");
            }
        }
</script>   
    <script src="/_layouts/DynamicWebTWAIN/Resources/dynamsoft.webtwain.config.js"></script>
</body>

We also need to change the ResourcesPath in dynamsoft.webtwain.config.js accordingly:

/// <reference path="dynamsoft.webtwain.intellisense.js" />

///
Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer', Width:580, Height:600}];
///
Dynamsoft.WebTwainEnv.ProductKey = '5E4007D3BB2EDB34AB4E82A797362811477D2F61B47AE9EE83DF2C9C71933C86477D2F61B47AE9EE2AD30D0B614FBFD9477D2F61B47AE9EEA6A82A690DFC35B9477D2F61B47AE9EE74DBE7726E1F7D1E40000000',
///
Dynamsoft.WebTwainEnv.Trial = true;
///Dynamsoft.WebTwainEnv.Debug = false; // only for debugger output
///
Dynamsoft.WebTwainEnv.ResourcesPath = '_layouts/DynamicWebTWAIN/Resources';

/// All callbacks are defined in the dynamsoft.webtwain.install.js file, you can customize them.

// Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', function(){
// 		// webtwain has been inited
// });

Step 3. Test

Now that your Web Part has been created in Visual Studio, it’s time to test it through SharePoint. In the Visual Studio Debug menu, click Start Debugging (or press F5 on your keyboard). This will begin to debugging process, and start your default browser. Once you are logged into SharePoint, edit any Page. While editing the page, switch to the Insert tab under Editing Tools, and then click Web Part. (The Web Part button may take a few moments to become available).

Once the Web Part dialog comes up, select Custom and select the Web Part you just created in Visual Studio. Lastly, click the add button on the right to add it to the page.

Add the web part with Dynamic Web TWAIN Scanning

After adding the Web Part, save and view your Page. You should now have a functioning WebTWAIN object and 2 buttons on your page. If you do not see them, be sure to check your JavaScript console to identify any errors in your code. If Dynamic Web TWAIN loaded successfully, there should be a WebTWAIN object in the JavaScript console. In this page you can click the scan button to scan an image from your scanner and upload it into a SharePoint library.

Web Part with Dynamic Web TWAIN control

You may see in the above image that there is a “TWAIN Uploads” library. In our sample code, we uploaded the image to TWAIN uploads through PUT. If you’re using the sample code, be sure to create a new library called TWAIN Uploads to allow for the upload. Once the folder has been created, visit the WebTWAIN object page and do the scan & upload operation again, and the scanned image should be uploaded into the folder as seen below.

Images Uploaded to SharePoint Libraries by Dynamic Web TWAIN

Uploading scanned images directly to SharePoint allows for them to be tracked by SharePoint’s internal version control features. This kind of integration is very powerful for document management.

Just like that, you’ve unlocked the features of Dynamic Web TWAIN within SharePoint. Now that everything is tested and working, you can think about placing the Web Part onto your production Sharepoint server permanently. If you do not know how to proceed with this, you can view Microsoft’s documentation on deploying Web Parts.

Conclusion

For companies that use Microsoft SharePoint for their intranets or websites, WebTWAIN is the perfect option to implement a centralized document management tool. Using a web tool takes away from the need for installation and updating software across systems, which fits perfectly with Microsoft SharePoint.

Combining the powerful management features of Microsoft SharePoint with a document processing solution like Dynamic WebTWAIN results in a complete document management solution that will keep your company organized. Scanned documents can be tracked through version control, protected through access control, and viewed on your intranet. For more information about Dynamic Web TWAIN, visit the Dynamsoft website.

 

The article was posted on CodeProject .

 

  • Ashraf Gomaa

    where is the method “onPageLoad();” it is undefined method

    • Tom_Kent

      Thanks for the feedback, we are looking at the issue now. Will get back to you soon.

    • Tom_Kent

      Hi Ashraf, our team have sent you an email about the issue. Please check.

  • Ashraf Gomaa

    the object “DWObject” is always undefined.

  • Shanu

    “DWObject” is always undefined. Please give me any idea to solve it.

    • Tom_Kent

      Hi Shanu, what browser are you using for the test? For debugging, I personally recommend Chrome. In Chrome, please press ‘F12’ to open the developer console and check if there are error messages there, it’s very likely that some of the JS files are not in the corrrect folder.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com