Title: Help with Creating Printable Shelf Label PDFs from a Queue in Retool (Multiple Pages, Template-Based)
Hi everyone! I’m working on an internal application in Retool for our retail store in Denmark, and I could use some guidance on building a shelf label generation feature. I will say as a disclaimer, I’m very unfamiliar with coding and developing, but have been using ChatGPT to get me a going. I have a pretty good idea of how to explain it, but don’t know how to execute, and I’m running into some issues here.
I'm trying to generate printable A4 PDF label sheets based on a queue of products that we build inside the Retool app. The idea is:
- User inputs a product number or scans a barcode (inputProductCode)
- It looks up the product info from our products table
- The user selects how many labels they want (qtyInput)
- That product is then added to a label_queue table (along with other metadata like price, product name, etc.)
- Once the queue is built, the user clicks generateLabelsButton to generate a printable PDF with labels, which should open in an iFrame inside Retool for preview and printing
Label Layout (HTML Template)
We’re starting with a 5x11 layout (55 labels per page) using this HTML + CSS template:
html
CopyEdit
body { margin: 0; padding: 0; background: white; font-family: Montserrat, sans-serif; } .a4 { width: 21cm; height: 29.7cm; margin: auto; border: 2px solid black; padding: 0.5cm 0.4cm 0.5cm 0.4cm; display: grid; grid-template-columns: repeat(5, 4cm); grid-template-rows: repeat(11, 2.6cm); gap: 0; } .label { border: 1px dotted #ccc; padding: 0.2cm; font-size: 8pt; display: flex; flex-direction: column; justify-content: space-between; } .product-name { font-weight: bold; font-size: 8pt; } .price-row { display: flex; justify-content: space-between; align-items: baseline; } .price { font-size: 16pt; font-weight: bold; } .savings { font-size: 6pt; text-decoration: line-through; } .price-type { font-size: 7pt; font-weight: bold; } .product-number { font-size: 7pt; }
Challenges / Questions
Here’s what I need help with:
- How do I dynamically generate HTML with labels based on the queue contents?
- I need to loop through all entries in label_queue and generate that many labels (based on quantity), and spread them across multiple A4 sheets if needed.
- Each label needs to inject: product name, price, optional before-price (struck through), price type (like “Tilbud”), and product number.
- Price formatting should be Danish-style: e.g. 48,- instead of 48.00.
- How can I display this in a PDF manner?
- Ideally, the user hits a generateLabelsButton, and it opens a new browser tab, with a pdf with the correct formatting, and the user is then able to print from there?
- How do I break the labels into multiple .a4 containers if more than 55 labels are needed?
- For example, 78 labels = 2 pages: one with 55, one with 23.
If you’ve done something like this before or have tips, I’d really appreciate it
Thanks in advance!