Differences

This shows you the differences between two versions of the page.

--- cobi.wms:label_templates [2022/07/01 15:14] – tkammer
+++ cobi.wms:label_templates [2023/06/19 13:59] (current) – tkammer
@@ Line 16: / Line 16: @@
 | ''docDate''                     | Posting date |
 | ''docDueDate''                  | Due date |
-| ''businessPartnerCode''         | Code of business partner |
-| ''businessPartnerName''         | Name of business partner |
 | ''docReference''                | The "Reference 2" field that some documents have |
 | ''docComments''                 | The comments field |
+^ Based on document's business partner ^^
+| ''businessPartnerCode''         | Code of business partner |
+| ''businessPartnerName''         | Name of business partner |
 ^ Line-level ^^
 | ''lineNumber''                  | The line number **starting from zero** |
 | ''lineItemName''                | Description (normally contains item name) |
 | ''lineFreeText''                | Free text |
-| ''lineUnitName''                | UoM name (might have been manually entered) |
+| ''lineUnitName''                | UoM name as entered in document line |
+| ''lineBPCatalogCode''           | Business partner catalog number (''SubCatNum'') |
+| ''lineBPCatalogName''           | Business partner catalog description (''OSCN.Descriptio'') |
+^ Based on line's unit ^^
+| ''unitCode''                    | UoM code (if not "Manual") |
+| ''unitName''                    | UoM name (ignores manually entered name in document line) |
+| ''unitQtyInBaseUnit''           | Quantity of this unit measured in base unit |
 ^ Item-level ^^
 | ''itemCode''                    | Item code |
@@ Line 83: / Line 90: @@
 | ''serialLotNumber''             | Lot-number of serial number |
 | ''serialDetails''               | Serial details/notes |
+^ Warehouse-level ^^
+| ''warehouseCode''               | Warehouse code |
+| ''warehouseName''               | Warehouse name |
 ^ Bin location-level ^^
 | ''locationCode''                | Bin location code |
@@ Line 167: / Line 177: @@
 </code>
-In this example, the first GS1 barcode field is ''01'' which symbolizes that a GTIN-14 follows.  By using the placeholder ''itemBarcodeGTIN14'' we ensure that exactly 14 digits are inserted here.  This field does not need to be terminated with a pipe symbol, since it has a fixed length of 14 digits.
+In this example, the first GS1 barcode field is ''01'' which symbolizes that a GTIN-14 follows.  By using the placeholder ''itemBarcodeGTIN14'' we ensure that exactly 14 digits are inserted here.  This field does not need to be terminated with a vertical bar symbol, since it has a fixed length of 14 digits.
-The next field is ''10'' i.e. the batch number.  This field is allowed to contain 1 to 20 digits or arbitrary characters.  If we use batch numbers of 10 characters, this means we must end this GS1 field explicitly with a pipe symbol.
+The next field is ''10'' i.e. the batch number.  This field is allowed to contain 1 to 20 digits or arbitrary characters.  If we use batch numbers of 10 characters, this means we must end this GS1 field explicitly with a vertical bar symbol.
 Here's a list of commonly used GS1 field identifiers:
@@ Line 181: / Line 191: @@
 === Better control of generated HTML ===
-The ''barcode()'' placeholder generates a whole ''<img ... />'' tag in the generated HTML.  If you want closer control over the HTML, like adding additional attributes to the ''img'' tag, you can use the ''barcodeB64()'' placeholder instead, which produces a PNG in Base64.  Example:
+The ''barcode()'' placeholder generates a whole ''<img ... />'' tag in the generated HTML.  If you want closer control over the HTML, like adding additional attributes to the ''img'' tag, you can use the ''barcodeSrc()'' or ''barcodeBase64()'' placeholders instead.
+The ''barcodeSrc'' placeholder generates only the contents of the ''src'' attribute.  Example:
+<code>
+<img id='...' class='...' src='@barcodeSrc(...)@' />
+</code>
+The ''barcodeBase64'' placeholder generates only the Base64 string.  Example:
 <code>
-<img id='...' class='...' src='data:image/png;base64,@barcodeB64(...)@' />
+<img id='...' class='...' src='data:image/png;base64,@barcodeBase64(...)@' />
 </code>
-The parameters of the ''barcodeB64()'' placeholder are exactly the same as that of the regular ''barcode()'' placeholder.  That means you must still provide the ''WIDTH'' and ''HEIGHT'' parameters; these will be passed to the barcode generation system that produces the Base64 PNG.
+The parameters of the ''barcodeSrc()'' and ''barcodeBase64()'' placeholders are exactly the same as that of the regular ''barcode()'' placeholder.  That means you must still provide the ''WIDTH'' and ''HEIGHT'' parameters; these will be passed to the barcode generation system that produces the Base64 PNG.  (This has no effect on the width and height of the ''img'' element in HTML/CSS.)
 ==== User-input values ====
@@ Line 268: / Line 286: @@
 </code>
-**NOTE:** Don't put any spaces before or after the parentheses or the separating pipe symbols.  (The spaces would be considered part of the corresponding parameter.)
+**NOTE:** Don't put any spaces before or after the parentheses or the separating vertical bar symbols.  (The spaces would be considered part of the corresponding parameter.)
-This placeholder uses the pipe symbol instead of commas to separate its parameters, because the parameters themselves may contain commas.
+This placeholder uses the vertical bar symbol instead of commas to separate its parameters, because the parameters themselves may contain commas.
 The mechanism is as follows: the text found within the ''DATE'' parameter is interpreted in accordance to the format specification ''FROM_FORMAT'' so the software knows what date/time it represents, and it's then turned into ''TO_FORMAT''.
@@ Line 318: / Line 336: @@
 </code>
-====== Example template files ======
+===== Example template files =====
+The following example files serve to demonstrate the syntax and some of the features.
-===== File 1 =====
+==== File 1 ====
+This is a very simple template demonstrating the use of placeholders to print the item code and name, price, and a timestamp.
 <code html>
@@ Line 330: / Line 351: @@
     <style>
         @page {
+          /* You can use width/height, or a standardized size. */
+          /* For example, the following two are equivalent: */
+          /* size: 148mm 105mm; */
+          /* size: A6 landscape; */
+          size: A6 landscape;
+          /* Don't change, use the container padding below. */
           margin: 0;
           padding: 0;
         }
-        html {
+        body {
+          /* We could use 100vw/100vh to cover the whole size declared with @page, but this doesn't
+             work with ZPL printing, so repeat the page dimensions explicitly.  Note that we can't
+             use standardized sizes like A6 here.  The height should be minimally reduced to make
+             sure the HTML renderer doesn't start a second page. */
+          width: 148mm;
+          height: 104mm;
+          /* Don't change, use the container below. */
           margin: 0;
           padding: 0;
-          font-family: sans-serif;
-          text-align: center;
+          /* Useful to diagnose dimension issues. */
+          outline: 0.5mm solid black;
+          outline-offset: -0.5mm;
         }
-        body {
-          margin: 0;
+        .container {
-          padding: 0;
+          /* Don't change. */
-          width: 98mm;
+          box-sizing: border-box;
-          height: 48mm;
           position: relative;
+          width: 100%;
+          height: 100%;
+          font-family: sans-serif;
+          font-size: 18pt;
+          /* Global padding from the edges. */
+          padding: 3mm;
         }
     </style>
 </head>
-<body style="border: 0.5mm; border-style: solid; border-color: black;">
+<body>
+<div class="container">
-<div style="float: left; margin: 1mm;">
+    <div style="float: left;">
-    <b>Code:</b> @itemCode@
+        <b>Code:</b> @itemCode@
-</div>
+    </div>
-<div style="float: right; margin: 1mm;">
+    <div style="float: right;">
-    <b>W:</b> @itemSalesWidth@ @itemSalesWidthUnit@
+        <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@
-</div>
+    </div>
-<div style="float: right; margin: 1mm;">
-    <b>L:</b> @itemSalesLength@ @itemSalesLengthUnit@
-</div>
-<div style="text-align: center; margin-top: 12mm;">
+    <div style="text-align: center; margin-top: 24mm;">
-    @itemName@
+        @itemName@
-</div>
+    </div>
-<div style="text-align: center; margin-top: 1mm;">
+    <div style="text-align: center; margin-top: 2mm;">
-    @barcode(CODE_128,100,50,|90@itemCode@|10@batchNumber@)@
+        @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@
-</div>
+    </div>
-<div style="text-align: center; font-size: 0.8em;">
+    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;">
-    (90)@itemCode@(10)@batchNumber@
+        (90)@itemCode@(10)@batchNumber@
-</div>
+    </div>
-<div style="position: absolute; left: 1mm; bottom: 1mm;">
+    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;">
-    <b>@date(yyyy-MM-dd HH:mm)@</b>
+        <b>@date(yyyy-MM-dd HH:mm)@</b>
-</div>
+    </div>
+    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;">
+        <b>COBI.wms Sample Label</b>
+    </div>
+</div>
 </body>
 </html>
 </code>
-===== File 2 =====
+==== File 2 ====
+This file demonstrates the use of user-input values and JavaScript integration.
 <code html>
@@ Line 388: / Line 439: @@
     <style>
         @page {
+          /* You can use width/height, or a standardized size. */
+          /* For example, the following two are equivalent: */
+          /* size: 148mm 105mm; */
+          /* size: A6 landscape; */
+          size: A6 landscape;
+          /* Don't change, use the container padding below. */
           margin: 0;
           padding: 0;
         }
-        html {
-          margin: 0;
-          padding: 0;
-          font-family: sans-serif;
-          text-align: center;
-        }
         body {
+          /* We could use 100vw/100vh to cover the whole size declared with @page, but this doesn't
+             work with ZPL printing, so repeat the page dimensions explicitly.  Note that we can't
+             use standardized sizes like A6 here.  The height should be minimally reduced to make
+             sure the HTML renderer doesn't start a second page. */
+          width: 148mm;
+          height: 104mm;
+          /* Don't change, use the container below. */
           margin: 0;
           padding: 0;
-          width: 98mm;
-          height: 48mm;
+          /* Useful to diagnose dimension issues. */
+          outline: 0.5mm solid black;
+          outline-offset: -0.5mm;
+        }
+        .container {
+          /* Don't change. */
+          box-sizing: border-box;
           position: relative;
+          width: 100%;
+          height: 100%;
+          font-family: sans-serif;
+          font-size: 18pt;
+          /* Global padding from the edges. */
+          padding: 3mm;
         }
     </style>
     <!-- Input definitions:
-    @input(simpleInput[Insert value])@
+    @input(text[Insert value])@
-    @input(selectionInput[Select value];Value 1,Value 2,Value 3)@
+    @input(selection[Select value];Value 1,Value 2,Value 3)@
+    @input(codeFormat[Barcode type];CODE_128,DATA_MATRIX,QR_CODE)@
     -->
-    <!-- @useJavaScript@ -->
     <script>
+        // @useJavaScript@
         window.onload = function() {
             var insert = document.getElementById('js-insert')
             insert.textContent = "Hello World!"
-            window.cobiwms.print()
+            cobiwms.print()
         }
     </script>
 </head>
-<body style="border: 0.5mm; border-style: solid; border-color: black;">
+<body>
+<div class="container">
-<div style="float: left; margin: 1mm;">
+    <div style="float: left;">
-    <b>JS-Insert:</b> <span id="js-insert"></span>
+        <b>JS-Insert:</b> <span id="js-insert"></span>
-</div>
+    </div>
-<div style="float: right; margin: 1mm;">
+    <div style="float: right;">
-    <b>Selection:</b> @input(selectionInput)@
+        <b>Selection:</b> @input(selection)@
-</div>
+    </div>
-<div style="text-align: center; margin-top: 12mm;">
+    <div style="text-align: center; margin-top: 24mm;">
-    @itemName@
+        @itemName@
-</div>
+    </div>
-<div style="text-align: center; margin-top: 1mm;">
+    <div style="text-align: center; margin-top: 2mm;">
-    @barcode(CODE_128,100,50,|90@itemCode@|10@batchNumber@)@
+        @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@
-</div>
+    </div>
-<div style="text-align: center; font-size: 0.8em;">
+    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;">
-    (90)@itemCode@(10)@batchNumber@
+        (90)@itemCode@(10)@batchNumber@
-</div>
+    </div>
+    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;">
+        <b>Input:</b> @input(text)@
+    </div>
+    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;">
+        <b>COBI.wms Sample Label</b>
+    </div>
-<div style="position: absolute; left: 1mm; bottom: 1mm;">
-    <b>Input:</b> @input(simpleInput)@
 </div>
 </body>
 </html>
 </code>