Barcode Fonts, Components, ActiveX and .NET Windows Forms Controls, Java Servlets, 
DLLs and Barcode Scanners. IDAutomation.com, Inc., Computers Hardware, Software & Services, Tampa, FL   This site chose the Norton Secured Seal to promote trust online with consumers.    View your cart in the IDAutomation Store   


Home > Barcode Components > JavaScript Barcode Generator > Sharepoint

Barcoding with JavaScript in SharePoint

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

Order the AJAX JavaScript Bar Code Generator Download Demo of AJAX JavaScript Bar Code Generator Support for the AJAX JavaScript Bar Code Generator

Barcode Streaming Example

This SharePoint Designer example uses the Native JavaScript AJAX Barcode Generator script file that may be easily inserted into a SharePoint application to create barcode 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.

barcode image in webpage

 ©Copyright 2017 IDAutomation.com, All Rights Reserved. Legal Notices.

 Barcode Fonts | Components | Scanners | Support | Contact Us

Training Videos on YouTube  Join us on Google Plus  Join us on LinkedIn  Follow us on Twitter  Like us on Facebook
Over 70% of Fortune 100 companies use IDAutomation's products to automate their businesses.