Hi,
I have a picking list that we are using in the warehouse. The lines to pick are in a details table and it can be one to many pages long. The warehouse staff has asked that it should be a two column layout, i e where the details table first runs down the first column on the first page, then the second column on the same page before continuing in the first column on the second page.
Is that possible and if so, how do I set it up in designer?
Thanks,
Fredrik
You can email me at thomas.greer@oregon.gov and I can send you back a data map and template I created for creating multi-column labels, each individual label getting values from a detail table record. It uses a snippet and a control script to handle the pagination.
I’ll assume you have a good data map, and that each item in your pick ticket is in a detail table.
For your print section, place a single div, and nothing else. Here’s mine it it’s entirety:
<div id="myContent"></div>
For your Snippet, build a two column tables with enough rows to fill your page, with placeholder text that will be searched/replaced with values. Here’s mine:
<table id="label" class="table-no-style" data-column-resize="" cellpadding="0" cellspacing="0" style=" width: 100%;">
<tbody>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_01@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_02@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_03@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_04@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_05@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_06@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_07@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_08@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_09@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_10@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_11@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_12@<br>
</td>
</tr>
<tr>
<td style="width: 4.25in; height: 1.5in;">
@label_13@<br>
</td>
<td style="width: 4.25in; height: 1.5in;">
@label_14@<br>
</td>
</tr>
</tbody>
</table>
Lastly, create a control script that will loop through the detail records, replacing the placeholder text with values. It will keep doing this, creating new pages, until you run out of detail records. Here’s my control script:
var labelCounter = 0;
var Labels_per_Sheet = 14;
var Number_of_Labels = record.tables.detail.length;
var Number_of_Sheets = Math.ceil(Number_of_Labels / Labels_per_Sheet);
myTable = new Array(Number_of_Sheets);
var placeholders =
[
"@label_01@",
"@label_02@",
"@label_03@",
"@label_04@",
"@label_05@",
"@label_06@",
"@label_07@",
"@label_08@",
"@label_09@",
"@label_10@",
"@label_11@",
"@label_12@",
"@label_13@",
"@label_14@"
];
var html = '';
for (let i = 0; i < Number_of_Sheets; i++)
{
myTable[i] = loadhtml('snippets/Label_Snippet.html','#label');
for (let x = 0; x < Labels_per_Sheet; x++ )
{
if (labelCounter + x < Number_of_Labels)
{
myTable[i].find(placeholders[x]).html(record.tables.detail[labelCounter+x].fields.Label_Data);
}
else
{
myTable[i].find(placeholders[x]).html("");
}
}
html += myTable[i];
labelCounter = labelCounter + Labels_per_Sheet;
}
results.replaceWith(html);
Thank you very much for your kind help.
I had a look through your second post and it looks very nice. My problem is that each pick ticket can vary in length as it is structured per item with sub-lines for each invoice that gets that item. Right now I cannot figure out how to adjust it to work for me but it may be that I have to look at it from another angle.
Below is an example of what it looks like now. I didn’t manage to add the packed project to this response but I am happy to mail it if there is interest.
Each pick ticket will be a Record, and per record, each Invoice is a detail record. Yes?
The concept is the same: you’ll design your Print Section as needed to display the Record values, static text, header and so forth, and then put a DIV element where you want the detail record(s) to display. You’ll design the layout of the detail(s) in a snippet.
The Control Script is used to iterate through the detail record in the inner loop and pages in the outer loop.
I had 14 labels, but you have X number of invoice and three fields per. That’s fine. If your pick ticket can fit a max of say 40 invoices, you’d have 120 “placeholders”, (40 x 3).
You might have a more complex situation where you’ll need TWO snippets, one for Page 1 and then another for Page 2+. It’s all still do-able with the structure I provided, you just have to modify the code accordingly. (Since the snippet is called in code, you can call any snippet you need based on the page counters.)
Thanks. Currently the input file is one record per cart with a details table for each item and a details under that with the invoices for the item. I will see if I can change the file to create on record per item instead instead.