Skip to Content

This blog focuses on using the open source project Barcode Writer in PostScript (BWIPP), also translated to JavaScript, with SAP and is based on PostScript device types and JavaScript services. The BWIPP covers all major barcode symbologies ( including QRcodes, DataMatrix, Aztec Code and many more).

Note: If you are looking for SAP supported QR codes and Data Matrix barcodes then check out  the following note (and related notes) for the details.  2029824 – Support for QR code and data matrix bar code (ABAP part).

Background

I originally covered the method to use the BWIPP with SAP in 2010. Last year the postscript version was updated to produce 2d barcodes with an optimum size. This lead me to update the QR code device type and other barcode types I originally blogged about in 2010.  Also as the BWIPP project has offered a translated JavaScript version for a while, I took the opportunity to try and use this version with SAP as well.

Summary

I will split my blog into three parts. The first section will cover the update to the PostScript device types, the next two sections will show ways to incorporate the JavaScript versions with Node.js and then using PhantomJS with the ICM hosted JavaScript code.

Barcode Writer in Pure Postscript Update

Project site http://bwipp.terryburton.co.uk/

1) Updated postscript device types

Standalone device types updated

Originally I had created some Unix scripts to adapt the BWIPP code so it could be included with  SAP device types. I updated the scripts to use the ASCII85 packaged versions of the BWIPP project.  I was able to extract the relevant barcodes to copy and paste the code into the device types. Therefore I have a method to create any of the barcodes into SAP device types. QRcode, Data Matrix and Aztec Code device types can be downloaded by following this link. The download file also includes the other example smartforms and JavaScript code that I cover later in this blog.  In the main directory of the zip file the device types are as follows ZBWPQR3.PRI, ZBWPAZ3.PRI and ZBWPDM3.PRI. These need to be allocated to an output device as outlined in this blog.

Since the original blog in 2010, I have either replied to blog comments or direct emails about certain requirements people wanted for Smart Forms in particular. These comments and emails also confirming the process worked from SAP version 4.6c up to the latest versions.

An example QRcode based smartform can be downloaded via the same zip file link in the the root directory – called z_qrcode_bwipp.xml  . If you follow the original blogs method to create an output device and linked to the new Device Types then the smartform can be printed directly to PDF (or direct to any PostScript enabled printer).

The smartform is standalone and will work if tested via the generated function module. The Smart Form was created on a trial version of SAP 7.02.

Upload the Form via the smartforms transaction

importFORM.png

Follow the prompts to import the downloaded smartform


2formName_Z_QRCODE_BWIPP.PNG


3LoadXML.PNG

Select change once the form is imported


5change_form.PNG


Avtivate the Smart Form

6activate.PNG

Test (hit the test icon in the following screens and you will be prompted to select a printer, the one created with the device type ZBWPQR3 should be used). The generated function module is enough to run the Smart Form as it is self contained.

7test.PNG

The smartform is standalone and if executed should produce the following output.

exampleQRcodeSmartform.png


The Smart Form is an example and only a test of the print controls that have been added to the device type. Take a look at the smart form for the various ways the QRcode is manipulated.

Server side update

 

Updating to the latest version of the BWIPP to be used server side as per the blog post

http://scn.sap.com/community/output-management/blog/2012/08/08/barcodes-in-sap-with-the-barcode-writer-in-pure-postscript-update#jive_content_id_3_Server_side_BWIPP

To update the BWIPP using the server side method is a simple case of swapping out the one file which contains the BWIPP. I have tested the following version from the following download page (which will include the optimum sized 2d barcodes).

https://github.com/bwipp/postscriptbarcode/releases/tag/2015-01-11

The exact download file I used was

https://github.com/bwipp/postscriptbarcode/releases/download/2015-01-11/postscriptbarcode-monolithic-package-2015-01-11.zip

I extracted the barcode.PS script and replaced the Dbwipp from the original blog post. A copy of the updated Dbwipp in the serverside directory of the download.

An example smartform that can show 26 barcodes on one page. The example Smart Form is called z_26barcode.xml again in the serverside directory of the zip file above.

/wp-content/uploads/2015/02/26barcodesmartform_635553.png

Barcode Writer in Pure JavaScript

Project site https://code.google.com/p/bwip-js/

1) Node.js web service on OpenShift

The bwip-js project has translated the BWIPP PostScript code to native JavaScript.  Also it has been made available as a Node.js npm package. I have been using OpenShift (using the free applications running on their PAAS) with other applications so I thought I would try out the BWIPJS node npm version. OpenShift makes various “cartridges” available to run and Node.js is one. So I have deployed the bwip npm as one of my free OpenShift applications. This was based on the demo Node.js application from OpenShift which I adapted to include the demo code from the bwip npm page.

Example barcodes below generated by my OpenShift barcode web service I have running. (if outside images are allowed at your site a QRcode and Aztec Code should be shown below –

* if my site is up and running  )

QRcode http://bwipp-rjruss.rhcloud.com/bwip?bcid=qrcode&text=http%3A%2F%2Fscn.sap.com%2Fpeople%2Frobert.russell2%2Fprofile        Aztec Code http://bwipp-rjruss.rhcloud.com/bwip?bcid=azteccode&text=http%3A%2F%2Fscn.sap.com%2Fpeople%2Frobert.russell2%2Fprofile


As the barcode web service produces PNG images I searched SCN to find a way to use these with Smart Forms (previously I had used the bitmap class)

I came across this document http://scn.sap.com/docs/DOC-47644 that is based on a Google service to generate QRcodes. I did doubt my cut and paste skills with my own 7.02 SAP NSP trial edition as the code did not activate without making some minor changes to the code. However once activated it worked fine and a great idea. I would recommend running the BWIPJS service on an internal Node.js server and not a cloud service. However this is just a demo and my site will not be around forever. I will leave it running though as long as I can, if the live images above are not shown then that indicates my OpenShift application is not running.

I swapped out the following line that uses the Google service from the above linked SCN document.

* CONCATENATE ‘http://chart.apis.google.com/cha…..

With a line that used my OpenShift application to generate a QRcode

CONCATENATE ‘http://bwipp-rjruss.rhcloud.com/bwip?bcid=qrcode&text=‘ qr_text  INTO url.

The result

NodeQRcode.png

Then to get an Aztec Code simple change the bcid parameter to the following. (Therefore any of the supported barcodes in the BWIPjs application can be used.)

CONCATENATE ‘http://bwipp-rjruss.rhcloud.com/bwip?bcid=azteccode&text=‘ qr_text  INTO url.

Nodeazteccode.png

2) ICM, BWIPJS and Phantomjs barcode method

The following method is also based on the blog More Barcodes with Barcode Writer in Pure Postscript  by calling external commands to generate images. This time using phantom.js to create an image that can be used in smartforms. This is just an example to see if it would work. As the JavaScript version relies on the canvas of a browser, I needed Phantom.js to be able to covert the code into a usable image for the Smart Form.

I had previously followed the blog linked below to serve up sapui5 with the ICM,  I used openui5 in its place

http://scn.sap.com/people/dj.adams/blog/2012/02/13/sapui5-says-hello-odata-to-netweaver-gateway

Using this as a base I copied the BWIP-js code as a subdirectory as below.

ICMandBWIPJS.png

Once the SAP system was restarted, then the demo page of the bwip-js is available from the SAP server. As shown below.

bwipjsDemoPagewithICM.png

One option for me to do is to use the bwip-js directly with openui5. However for my Smart Form tests I used my adapted bwipjs code to generate a QRcode image with Phantom.js.

The example code I used to generate an image can be found in the zip file download above, under the directory Javascript\smartform. I then adapted some bsp code I had created and covered here (changed the imagemagick and ghostscript commands to the phantom.js script found in the Javascript\smartform directory in the download). The way I cropped the image with Phantom.js is covered in this stackoverflow question and answer. My adaption was to adjust the offsets to get the barcodes into the final position. The rasterizecrop.js script in the download directory is based on the stackoverflow answer and the batch file zbwipjs.bat was created and called via an external command with transaction sm69 to control the process. I have not included the exe for Phantom.js as that needs to be installed from the Phantom.js site. There is a batch file called barcodeimage.bat in the download file that does not require SAP or any web server to generate the image. As long as Phantomjs.exe is in the executable PATH of your system the code should generate an image as per below.

Screenshot_2015-01-31-22-33-31.png

Using the code with the controlling bsp with the same Smart Form from before. http://scn.sap.com/docs/DOC-47644

Calling the BSP with the URL

CONCATENATE ‘http://haw.robert.russell:8000/sap/bc/bsp/sap/zbwipjs/bc.htm?text=‘ qr_text  INTO url.

BSPbarcode.png

.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply