Qrcode not displaying

Frappe Framework Customization
,
1

Qrcode not displaying.
I am using HTML, Jinja,JS.

For more clarification , you can check:

HTML code:

	<script type="text/javascript">
		var qr = new QRious({
	      element: document.getElementById('qr'),
		    value: 'HEELO WORLD',
		    background: 'white', // background color
		    foreground: 'black', // foreground color
		    size: 100, // Size of the QR code in pixels.
		    padding: null // padding in pixels
		});
	</script>

Thanks in advance…

1 Like
2
  • Check if you installed qrious .
  • Secondly you will need to insert element qr in the html for this to work, You can use frappe.msgprint() and print the QR code Image inside it would be a better option.
3

Thanks @hrwx for replying,

  <td><div id="qrcode" width="200" height="200">hi</div></td>
<script src="qrcode.js"></script>
<script type="text/javascript">
	var qrcode = new QRCode(document.getElementById("qrcode"), {
			text: "Hello",
			width: 50,
			height: 50,
			colorDark : "#000000",
			colorLight : "#ffffff",
			correctLevel : QRCode.CorrectLevel.H
		});
	</script>

I am trying to use this now, it is printing if I use html.
But if I use this with jinja, it will not display bar code…
Help with this.

4
5

@hrwx , I tried first one but not working

6

Hi

  • Add a HTML field in the form using Customize Form.
  • Get the wrapper for the HTML field in js and then append the OR code to it.

Regards
hrwX

7

Thanks @hrwx ,
But can you explain this,
I mean which type of field to be included…

I am trying trying this code in html and jinja.

8

Hey @Saditi

  • Do not change any code in html and jinja, itll break updates.
  • Follow the steps to add QR Code:
    • Lets consider you want to add QR Code in Item.
    • Go to Customize Form → Item
      • Add QR Code custom field and select HTML as Type and Save it.
    • Now you need to add Custom Script to display the QR Code generated by qrious.
      • Go to Custom Script and create a new custom script for Item.
      • When you create the Custom Script you’ll have something like this
        frappe.ui.form.on('Item', {
    refresh(frm) {
        // your code here
    }
})
      • In refresh, get the HTML field which you just added, lets say you name it as qr_code, get the wrapper of the field using frm.get_field("qr_code").
      • Once you have the wrapper, then you can just append it to the field like you do in jQuery

I hope this resolves your doubt.

Regards
hrwX

9

Thanks for replying @hrwx,
But it didn’t work in my case…

Check this one, I have written my problem in detail

10
  • The best way is to add Image Attach field in the form and
  • You can then attach Image link to the Image Attach field using frappe.db.set_value. I think this should work