QR Codes in Gallery Reports

[jlockwood]

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 ✌️

[Volomeister]

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:

<script>

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

document.querySelectorAll('.qrcode-2').forEach(div=>{
let qrcode = new QRCode(div, {text: div.innerText, // and write the rest of it after
...
}

})

})

  </script>

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.

[jlockwood]

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. 

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