Streaming Barcode Images in SharePoint

Users of Microsoft SharePoint 2003 and above have the ability to embed barcodes into their SharePoint applications without the need to install any components on client machines. This approach streams the barcode from a server-side process right into the SharePoint application and supports many advanced barcode types including Code 128, GS1-128, Intelligent Mail IMb, PDF417, Data Matrix, Aztec, QR-Code and MaxiCode.

Buy License

While IDAutomation hosts this service with their Dynamic Barcode Generator Subscription, companies can host the same service on their own server with the Streaming Barcode Server for IIS.

SharePoint Barcode Image Streaming Tutorial

The SharePoint Designer example takes a URL and streams it within the application. Specifically, this illustration explains how to add a textbox to the form and encode a barcode using a data string.

  1. Purchase a subscription to the Dynamic Barcode Generator Service or use the fully-functional free barcode generator. 2D barcode types such as Aztec, PDF417, DataMatrix and MaxiCode are only available in the purchased version of this product. For barcode generation on a server, IDAutomation recommends implementation with the ASP Barcode Server for IIS, which is the server-side version of the free barcode generator and is compatible with Windows Server 2000 and above, as well as all 32 bit and 64 bit versions. The IDAutomation Java Barcode Package may also be used when implemented as a servlet.
  2. This tutorial uses the free version of the Dynamic Barcode Generator Service. To transition from the free version to the purchased or server-side version, simply replace:
    https://www.bcgen.com/demo/linear-dbgs.aspx?D=     with the unique URL obtained from the streaming product to be used.
  3. Open SharePoint Designer. From the SharePoint Designer Toolbox, add an Image Box to the form.
    SharePoint Designer Toolbox
    The Image Box used to create the Barcode
  4. Right click the Image Object, select Picture Properties, and add the URL into the Picture textbox.
    Image Properties in Sharepoint
    Barcode in SharePoint Designer
  5. As an example in this tutorial, a text box will be used for the data that is to be encoded in the symbol. In a real-world implementation, the data encoded will most likely be a variable such as a record number, customer number, etc.
  6. Add an Input textbox to the form; this will be used to modify the DataToEncode.
    Input box for encoding data
     
  7. Switch to Code View, which is located at the lower left of the Designer.
  8. The textbox code should display: <input name="Text1" type="text" style="width: 213px" /><br />
    To create an identification to the Textbox add: id="datatoencode".
  9. Add onchange="javascript:changeBarcode();" to allow the barcode image to be updated as new data is entered:
    <input name="Text1" id="datatoencode" type="text" style="width: 213px" onchange="javascript:changeBarcode();"/>
  10. Create a function, a variable to hold the DataToEncode, and add the variable to the URL:
    <script>
      function changeBarcode() {
        var datatoencode = document.getElementByID('datatoencode').value;
        document.getElementByID('barcode').src="https://www.bcgen.com/demo/linear-dbgs.aspx?D="+datatoencode";
        }
       <script>
  11. Save the project as a Webpage. The page may now be displayed and modified in a browser.
    Dynamic barcode in SharePoint Designer

SSL encryption is enabled by changing "http" to "https". If a scanner is needed, consider purchasing the IDAutomation USB Barcode Scanner with DataBar.