Barcode for each document and take me to that document name

[bghayad]

Hello;

I am thinking to do the following and need advise how to do it (from where to start and general headlines):

For each document, I need to have barcode for that document (this barcode is the same as the document name), so if I am logged in to the ERPNext and from any place (from desktop or any place), if the barcode scanner read the barcode of the document, then ERPNext should open the document that has this name.

Can someone guide me or give me hint from where to start?
Do I have to use the hooks?

Regards
Bilal

[bkm]

I do not believe you will be able to do this from within ERPNext.

The problem is in the ability to randomly scan a barcode from anywhere in the system and have that action take you to the document.

Barcode scanners are a generic HID (Human Input Device). This means that they can only act like a keyboard. If you want them to be able to respond as a custom input device you would need to write your own driver for the scanner.

In-other-words… Unless you can find a way to simply type a string of characters and have that take you to your document, you will not be able to do any better with the barcode scanner. This is because a barcode scanner only acts like a keyboard and faithfully ‘types’ the characters in the code as if they were done on a keyboard.

BKM

[brian_pond]

Hmm. It might possible. You’d have to do something like this:

1. First 2 characters of barcode: CTRL + T. On my browser (Firefox), that opens a new tab in the browser.
2. Remaining characters in the barcode: a precise URL to the document you want to see.
3. Finish with an “Enter” key.

It might be tricky. But the idea is a new tab would open, the URL would be typed, and entered. And your browser would display the desired document page.

Other ideas:

1. Create a new page in ERPNext, with a text box, designed for scanning in barcodes. Once your cursor was in that box? You could program it do take whatever action you wanted. The disadvantage is you couldn’t just scan barcodes from anywhere. You’d have to deliberately scan into that text box.

2. Another device/app. When it scans a barcode, it opens your browser to the desired page. This is much more complicated though.

[bghayad]

What about doing this from the awesome bar?

The problem that I tried this from awesome bar and it does not bring the document or the document name directly but it returns the below two images (one after one):

Then:

Why it returns all of these document names (so if I have a lot of invoices, then it will be too much hard to reach for the targeted document)?

In other words: how can we let it work from the barcode but to return the document name which is the same as the barcode scanner read?

Regards
Bilal

[bkm]

@bghayad

What about doing this from the awesome bar?

I thought about this as well (me wanting to make a suggestion other than “probably not possible”). The wall I ran into with the idea was the long established way the awesome bar reacts to input. It would mean re-writing the code that drives the awesome bar in order to be able to jump straight to a specific document. It is just not how the awesome bar was designed to work.

However, that does NOT mean that a similar function couldn’t be worked out.

For example:

• the ERPNext GUI could be altered to allow for a small set of “shortcut keys” that would open a new searchbox specific to searching for documents.

• The cursor attention would automatically be with the freshly opened searchbox.

• Then scanning the document barcode could take you to your specific document.

• The new type searchbox could be available as a pop-up from a desktop button for those without barcode scanners.

• And if you really wanted to make it “Fancy” you could make a simple barcode icon to put on the screen (maybe as the desktop button) that you could scan right off the screen to bring up your searchbox for documents. Then it would be a quick scan of the screen icon and then scan your document barcode.

Thais may not be quite as uber simple as you may have wanted, but this is at least in the realm of doable.

This has been a fun exercise in problem solving. Thanks for the the topic @bghayad
Hopefully other creative folks will add their ideas as well.

BKM

[bghayad]

Hello @bkm
Thank you too for your contribution and kindly reply.

@bkm

the ERPNext GUI could be altered to allow for a small set of “shortcut keys” that would open a new searchbox specific to searching for documents.

Searchbox like awesome bar? Where do you suggest it to be located?
Shortcut like Ctrl + G that take us for awesome bar?

@bkm

The cursor attention would automatically be with the freshly opened searchbox.

Can you please explain more and give example?

@bkm

Then scanning the document barcode could take you to your specific document.

After pressing enter or without pressing enter?

@bkm

The new type searchbox could be available as a pop-up from a desktop button for those without barcode scanners.

So you are suggesting to be doctype with the Searchbox?
What about adding this search box beside awesome bar? Really I was would if awesome bar can do it.

@bkm

And if you really wanted to make it “Fancy” you could make a simple barcode icon to put on the screen (maybe as the desktop button) that you could scan right off the screen to bring up your searchbox for documents. Then it would be a quick scan of the screen icon and then scan your document barcode.

Can you please explain it more, this is not clear for me.
Do you mean placing barcode icon at the desktop (same as account or crm or sales invoice icons)?
But what did you mean by this sentence: Then it would be a quick scan of the screen icon and then scan your document barcode?

Regards
Bilal

[bkm]

@bghayad

the ERPNext GUI could be altered to allow for a small set of “shortcut keys” that would open a new searchbox specific to searching for documents.

Searchbox like awesome bar? Where do you suggest it to be located?
Shortcut like Ctrl + G that take us for awesome bar?

My suggestion was to modify the ERPNext GUI to allow for shortcut key combinations that would open a pop-up window with your searchbox the only element in the window.

@bghayad

The cursor attention would automatically be with the freshly opened searchbox.

Can you please explain more and give example?

This is the default operation in almost all operating systems that support touch screen or mouse operations. If you open a dialogue box the cursor automatically defaults to being in that box so the next thing you type will be inside the new opened box. This is what is meant by “default cursor attention” This is important if you want to use a barcode scanner because the cursor will already be in the search box and ready for the string from the scanner to act as it’s input.

@bghayad

Then scanning the document barcode could take you to your specific document.

After pressing enter or without pressing enter?

All modern barcode scanners have the ability to configure their output to include prefixes and suffixes. The prefixes can be any character string. When the barcode is scanned, the output would include the configured prefix characters followed by the actual characters in the barcode.

Likewise, the suffix characters can also be any string of characters. Most of the time this is configured to be and Enter key or a Tab key. The user would not have to hit an enter key if the suffix is configured to automatically add the enter key after the barcode characters.

@bghayad

The new type searchbox could be available as a pop-up from a desktop button for those without barcode scanners.

So you are suggesting to be doctype with the Searchbox?
What about adding this search box beside awesome bar? Really I was would if awesome bar can do it.

Well, I guess you could make it a doctype, but I was thinging more along the lines of it being an add-on application that had it’s own icon on the desktop.

@bghayad

And if you really wanted to make it “Fancy” you could make a simple barcode icon to put on the screen (maybe as the desktop button) that you could scan right off the screen to bring up your searchbox for documents. Then it would be a quick scan of the screen icon and then scan your document barcode.

Can you please explain it more, this is not clear for me.
Do you mean placing barcode icon at the desktop (same as account or crm or sales invoice icons)?
But what did you mean by this sentence: Then it would be a quick scan of the screen icon and then scan your document barcode ?

Ok, so what I mean here is that the icon on the desktop screen can be a picture of a barcode. The barocde itself could be whatever shortcut key you define to be the trigger to open the pop-up searchbox window.

In this way you could point your barcode scanner at the screen and scan the barcode icon right off the screen like it were printed on paper. Modern barcode scanners can read barcodes right off of a cell phone screen or tablet screen. So, by pointing the scanner at the barcode picture on the screen that you area also using as the desktop icon, you can essentially make the scanner act like a keyboard and it will be as if you typed in the shortcut key.

This is why it would be a bit Fancy because 2 simple scans with the scanner would 1st open your popup searchbox and then enter your desired document barcode.

As for putting another searchbox on the screen permanently next to the awesome bar, this is NOT an easy thing to do. Believe me, I paid several developers to try this in the POS module and the code would always interfere with other parts of the user interface so we abandoned the concept. The best approach is to use a workaround to get your searchbox to open.

Altering the way the awesome bar works would be a major upset to the rest of the system. It is far to long established in it’s current abilities and changing it would have a lot of resistance from the core developers. It is better to create your own searchbox specific to calling up documents if you can.

I am not a developer, but I have paid for enough developer work in my time to know what can and cannot be easily done. It does not mean that you cannot re-make the awesome bar to your own liking, but if you succeed it would be a custom searchbar for your system only and you might not have very much assistance from the core developers because I don’t believe they really want to alter what they already have as a solid working feature.

Those are my thoughts.

BKM

[pipech]

I haven’t read all above comment, but if I have to do this I would do something like this.

1. Create new button next to awesomebar or add key-press listener using jQuery.
2. Bind dialog function to new button or event listener,
3. Dialog will take 2 variable. (You’ll have 2 barcode on document.) (You could use frappe.dialog but you might have to press enter and some mouse click or you could create your own dialog with your desire behavior using jQuery.)
   3.1 DocType
   3.2 Doc Name
4. Use frappe.set_route to redirect to desire doc. (Assuming that all barcode is valid.)
5. Use frappe.call with frappe.get_doc to check if doc barcode is valid. (If needed.)

[bkm]

Ah… good point @pipech

Also, if adding the Enter key as a suffix to the barcode scanner interferes with other barcode functions you may wish to be also using, then you can create a simple barcode that is nothing but the Enter key character. I do this now for some of my clients that use barcode scanners to build Material Transfers in ERPNext.

There is a either a sticker on the bezel of the laptop screen with the Enter character (in code 128) or on my Android tablets they have a picture of the Enter barcode in one corner of the desktop background and they scan it right off the tablet.

By doing it this way, they do not have to put the scanner down and go to the keyboard or a mouse to finish a process. They just point the scanner to the Enter barcode and pull the trigger. Most of the people I train in this manner can actually get so fast with the scanner that they can outrun the speed of the user interface. They eventually get into a rhythm and ultimately move much faster than anyone on a keyboard could possibly operate.

BTW… great outline for accomplishing Bilal’s goal.

BKM

[kirthi]

I may be oversimplifying this, but a QR code will easily do this, unless you cannot use a QR code in your setup. Just encode the url for each doctype into the QR code.

I have done this for a manufacturing client - the QR Code is printed on a thermal label (to be stuck on the stock containers). On scanning the QR Code from the label, it will take to the relevant document (I linked it to a custom doctype that contained details of quality inspection records). Of course it worked with a smart phone, i did not try with a PC.

[bkm]

@kirthi

I may be oversimplifying this, but a QR code will easily do this

Very true…

The only reason that I do not promote QR codes for such things is that most of the time people are trying to do these things in a warehouse or loading dock environment.

The cost of a ruggedized linear barcode scanner is already fairly pricey at about US $325 and the cost of a ruggedized 2D barcode scanner is approaching US $500. A ruggedized scanner can withstand unlimited drops to concrete floor from at least 2 meters height and will also operate in a very wide temperature range. The cheap ‘made-in-china’ versions will be trash on the first drop.

I always assume the lowest common denominator because I can never know what the financial status of the user might be at the time of the question.

I prefer 2D barcodes because you can encode a complete mailing address into one, but not everyone can afford them.

BKM

BKM

[hereabdulla]

@kirthi

can you explain the steps you followed for QR code integration,it might be helpful for fellow community members too

[kirthi]

The method I used involves printing on labels using Zebra printers. There are zebra codes to generate QR codes to generate QR Codes. You will find more info at https://support.zebra.com/cpws/docs/zpl/BQ_Command.pdf

You can encode any data (or url) in the QR Code. In this case, the url to the specific doctype can be encoded.

Kirthi

[hereabdulla]

@kirthi

Thanks for the detailed Explanation currently i am using qrcode(Python Library) to generate QR Code and saving it as a local file.I will try this also.

Regards,
@hereabdulla

[dirkvdl16]

A very simple solution is using a QR Code API, and embedding the image in an HTML field or section.

We use this to have a link as a QR code on our Delivery Notes. So the drivers take a picture of the signed delivery note, scan the QR code to navigate to the Delivery Note in ERPNext, and attach the picture as proof of delivery.

You can add something like this in a Custom HTML field on Report Builder:
<img src="http://bwipjs-api.metafloor.com/?bcid=qrcode&text=http%3A%2F%2Fyourwebsite.com%2Fdesk%23Form%2FDelivery%2520Note%2F{{ doc.name }}" height=100> </img>

[pioneerpathan]

Thanks. it’s working for me.

[simple]

Can someone please explain how to use this API method to generate QR code based on doctype URL and include it in the doctype or at least show it when printing?

I understand that this is a simple API call that takes doctype URL as the value and generates QR code, but I am not sure how and where to make it work.

Thanks!

[simple]

Okay, I figured it out. It is quite easy actually. For someone looking out in the future, here are the steps:

1. Add a custom HTML field in your doctype (customize doctype option).
2. Edit the field and add the HTML code (example code below) in the options field of that custom field.
3. Save the customized doctype.
4. Go to or create a new entry in this doctype.
5. Navigate to HTML field you added, and you’ll see a generated QR (or barcode) in the field.

Example code:

<img alt="Doctype QR Code"
     src="http://bwipjs-api.metafloor.com/?bcid=qrcode&text=AB1234567890&scale=3&rotate=I&includetext></img>

For documentation go to Online Barcode API · metafloor/bwip-js Wiki · GitHub

For help, feel free to reply.

[FredericVerville]

Even more simple code where the doctype url is fetched

Code:

<img src="http://bwipjs-api.metafloor.com/?bcid=qrcode&text={{frappe.utils.get_url_to_form(doc.doctype, doc.name)}}" height=100> </img>

[FredericVerville]

@dirkvdl16

elivery n

I am trying to add the “url signature” so my customers can see the documents without having to have reading permission.

I am adding this line to the API :

{{frappe.get_url(doc.doctype)}}/{{doc.name}}?&key={{frappe.get_doc(doc.doctype, doc.name).get_signature()}}

> <img src="http://bwipjs-api.metafloor.com/?bcid=qrcode&text={{frappe.get_url(doc.doctype)}}/{{doc.name}}?&amp;key={{frappe.get_doc(doc.doctype, doc.name).get_signature()}}" height=200> </img>

when scanning the QR code it doesnt take into account all the URL.

Here is what the URL is returning :

https://mywebsite.com/Delivery_Note/MAT-DN-2022-00219?

and it should be :

https://mywebsite.com/Delivery_Note/MAT-DN-2022-00219?&key=13675ead6ec94a90e3cf959e7a6e680aa7f14c3bda87d067b25257b9

Do you have any insight why it is doing that?

Thank you!

Edit :

I found the problem I removed the “&” it was causing the problem!