Barcode Tutorial using JavaScript in Microsoft SharePoint

Users of Microsoft SharePoint  2003 and above, who want to embed barcodes into their SharePoint applications, have the ability to do so without the need to install any components on client machines. This approach simply needs the IDAutomation's JavaScript Component available to all clients who need access to the application. The component files reside in the directory that contains the SharePoint application project.

This SharePoint Designer example uses the Native JavaScript AJAX Barcode Generator script file that may be easily inserted into a SharePoint application to create bar code images for display in HTML or text objects. Once implemented, no other components or fonts need to be installed to create barcodes; the Native JavaScript AJAX Barcode Generator is the complete barcode generator. This example passes a data string into a textbox which is displayed in a SharePoint application using the JavaScript Code128 function..

1. Extract the files from the package.
2. Several generator files are provided for different bar code types. Use the file that represents the barcode type that is needed. If in doubt, IDAutomation recommends choosing Code 128 Auto, which is in the file named IDAutomation_JavaScriptBarcode_C128.js.
3. Open a Microsoft SharePoint application that the barcode is to be integrated with.
4. Switch from Design view to Code view by selecting Code at the bottom left of the project.
5. Add the following line at the top of the file just before the </head> line to load the appropriate JavaScript file:
   <script language="JavaScript" src="IDAutomation_JavaScriptBarcode_C128.js"></script>
6. Add a script where the barcode is to appear in the HTML document or text object, which is the file name without the ".js":
   <script type="text/javascript">
   document.write(IDAutomation_JavaScriptBarcode_C128(DataToEncode))
   </script>
7. Add an Input Textbox to the form; this will be used to modify the Data To Encode.
8. In Code view, the Textbox code should display: <input name="Text1" type="text" style="width: 213px" /><br />
9. To create an identification to the Textbox add: id="datatoencode" The Textbox code should now display: <input name="Text1" id="datatoencode" type="text" style="width: 213px/><br/>    
10. Add onchange="javascript:changeBarcode();" to allow the barcode image to be updated when new data is entered: <input name="Text1" id="datatoencode" type="text" style="width: 213px" onchange="javascript:changeBarcode();"/><br/> 
11. Create a function, a variable to hold the Data To Encode:
    <script>
    function changeBarcode() {
    document.getElementById('barcode').innerHTML="";
    var datatoencode = getValue('datatoencode');
    document.getElementById('barcode').innerHTML=out;
    }
    <script>
12. Save the project as a webpage. The page can now be displayed and barcode modified in a browser. In the example, the default barcode is Code128Auto and the encoded data is: 123456789012.

© Copyright 2005-2007 IDAutomation.com, Inc., All Rights Reserved. Legal Notices.