Expand Microsoft SharePoint to Create the Ultimate Document Management Solution

Last Updated on 2021-06-17

Scan and upload documents to Microsoft SharePoint via your website using Dynamic Web TWAIN

Microsoft SharePoint is often used on company intranets with the goal of keeping information centralized. Dynamic Web TWAIN is a web document processing SDK that can combine SharePoint’s management features to create the ultimate document management solution for your company.

The following article explains how to integrate Dynamic Web TWAIN as an object into Microsoft Office 365 SharePoint.

Key Features of Dynamic Web TWAIN

  • 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

Integrating Dynamic Web TWAIN into Microsoft SharePoint

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 .NET code. In our case, we have no need for any server side scripting, so we only have HTML and JavaScript cpde. We use Visual Studio with SharePoint development tools installed to create the Web Part.

Step 1. Deployment

For the purpose of this tutorial, we’re assuming that you have installed 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.

Under the folder, create a new folder called DynamicWebTWAIN or whatever you wish. Copy all the previously mentioned resource files into the 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.

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 document scanner and the other 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:

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 document management app in SharePoint

Since 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 the debugging process, and start your default browser. Once you are logged into SharePoint, edit any page. While editing a 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. Finally, 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 two 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 document 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 and 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 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.

Scan and Upload to Cloud/Database Using Dynamic Web TWAIN

6

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com