Jump to content

QR Codes in Gallery Reports

Recommended Posts

Hello code wizards! Here's an interesting challenge for you.

I'd like to create packing slips for our orders. The design I came up with was a gallery report, with each cell containing the part number and a QR code containing a link to all the documentation generated for that part (inspections, evaluations, quality control reports, etc). Here's the configuration:


The output of this script is pretty wacky when more than one part is associated with the order.


All the part numbers are in their own cells, as intended. But the QRs are all smashed together into a QR snake. What's more, all the codes are identical - they don't update according to the individual orderDetailID (parameter in the code above).


Do you have any ideas on how to 1. ensure that a unique code is generated for each record, and 2. properly distribute the codes to the cells?


Let me know if you need more information. Cheers ✌️

Link to comment
Share on other sites

Hi @jlockwood

The problem with this setup is as follows:

1. There are multiple div elements with the same id=qrcode-2. It goes against industry standards to have various elements sharing the same ID. ID is supposed to be a unique identifier of the HTML element on the page. I would use class in this particular case instead of ID.
2. For each record on the list report, you run the same script that is added in HTML block 1. Inside the script you refer to the element where id=qrcode-2. It will always affect the very first element where  id=qrcode-2

Steps to fix:
1. Only this should be written inside HTML block:

<div class="qrcode-2">DPURl?orderDetailID=[@field:orderDetailID]</div>

(don't forget to customize URL)

2. Script tag that connects 3rd party QR code library should be added to the header of the DataPage and not inside the HTML block

3. The script should be rewritten to run only once per DataPageReady event. Here is a draft example:


document.addEventListener('DataPageReady', ()=>{

let qrcode = new QRCode(div, {text: div.innerText, // and write the rest of it after




This script should also be added in the header of the DataPage.

Next time, instead of providing a screenshot of the code, please provide code so people can copy-paste your code instead of writing from the screenshot.

Link to comment
Share on other sites

Hello Volo,


Thanks for the clarification. This is my first try at web development so a lot of these conventions are brand new to me. It took a little trial and error but the page works now. image.thumb.png.981010fecec487cc3f9fa6e0f4c45304.png

For some reason, when "Download Data" is clicked, the generated PDF is missing the codes, but that is probably a separate topic.


Have a great day - JL

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...