Skip to Content

image

A while ago, I was asked to come up with a way to show barcodes on our expenses-form.

Employees can fill in their expenses form online, but have to have some signatures on the printed version and then send it to the financial department. There, the form is checked and approved (or not).

Until recently, they had to type in the number of the form and then approve or disapprove it. But not anymore, now they can just use a hand-scanner and scan the barcode.

When I started looking for solutions to use barcodes on  webpages everything I could find needed third party software on the server-side. That wasn’t really an option for us, because this would require to big an effort for what was basically just a nice-to-have feature for our users. I also noticed that I wasn’t the only one looking for  this, there are some forum topics that also go in to this, but always with a more complicated approach using  smartforms  (BarCode is not getting printed) . What I did was creating a very simple way to show simple barcodes that can be read with basic barcode readers. No checksums are used and only code-39 barcodes can be generated.

Code39 (also called “3 of 9 code” or “USD-3”) was the first type of barcode to be developed, and is still widely used. The code39 barcode is a self-checking barcode, which means that a single print defect can never transpose a character into another valid character. (This basically means that if there is an error, you will not be able to read the barcode, and will never read the wrong value)

Now on to the technical side of it.

As you probably already know, a barcode is a way to present text and numbers in the form of white and black lines. So first we need to know how each character is represented. I found a very  usefull page  here : http://www.barcodeisland.com/code39.phtml  (http://www.barcodeisland.com/code39.phtml).

So with the codetable found on this page, I made a mapping array that maps each character with it’s representation in white and black lines.

<!code>     var ct = Array();

ct[“0”] = “101001101101”;

ct[“1”] = “110100101011”;

ct[“2”] = “101100101011”;

//etc., the complete array is on the bottom of the weblog

Now I needed two images, one that represents the white line  (https://weblogs.sdn.sap.com/weblogs/images/3747/wn.gif), and one that represents the black line  (https://weblogs.sdn.sap.com/weblogs/images/3747/bn.gif).

And the last step is a function that transforms a string into a barcode.

<!code>      function genCode39Barcode(text,height)

<!code>    {

<!code>        var width =1;

<!code>        var fulltext = “text“;

<!code>        strlen = fulltext.length;

<!code>        var strArr = Array();

<!code>        for (i=0;i<fulltext.length;i++)

<!code>        {

<!code>              code39 = ct[fulltext.charAt(i)];

<!code>              strArr[i] = “”;

<!code>              for (j=0;j<code39.length;j++)

<!code>              {

<!code>                     if (code39.charAt(j) == “1”)

<!code>                     {

<!code>   

<!code>                            strArr[i] += “!barcode/bn.gif border=0 style=!”;

<!code>                     }

<!code>                     else

<!code>                     {

<!code>                            strArr[i] += “!barcode/wn.gif border=0 style=!”;

<!code>   

<!code>                     }

<!code>              }

<!code>              strArr[i] += “!barcode/wn.gif border=0 style=!”;

<!code>              document.write(strArr[i]);

<!code>        }

<!code>   

<!code>        document.write (‘

fulltext‘</font></b><br/>’);

<!code>    }

You can pass a string x to this function and a number y, the result will be a barcode representing the value x that is y centimeters high. The width depends on the number of characters of x .

<!code>   

<!code>        genCode39Barcode(“valuebarcode”, 1); 

<!code>   

This will generate the following barcode :

!https://weblogs.sdn.sap.com/weblogs/images/3747/image003.jpg|height=64|alt=image|width=211|src=https://weblogs.sdn.sap.com/weblogs/images/3747/image003.jpg|border=0!</body>

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Mark Finnern
    Streamlines the expense process, which is great, although my biggest problem is to post expenses in time. Working on that one, Mark.
    (0) 
  2. Karen Pereira
    Hi,

    This blog was very useful. We used it in SRM to generate barcode in a custom BSP application.
    We were trying to access the images mentioned – black line and white line but were not able to access it (404 error). Can you help on this?

    Regards,
    Karen

    (0) 
    1. Dries Horions
      It’s been a few years and a few jobs ago I wrote this.  I don’t have the images anymore, but I think a 1px*1px black and 1px*1px white image is what I used.  That shouldn’t be too hard to recreate.
      (0) 

Leave a Reply