COBISOFT Documentation

User Tools

Site Tools

You are here: English » COBI.wms » Label Templates
cobi.wms:label_templates

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
cobi.wms:label_templates [2022/07/01 15:14] – tkammercobi.wms:label_templates [2023/06/19 13:59] (current) – tkammer
Line 16: Line 16:
 | ''docDate''                     | Posting date | | ''docDate''                     | Posting date |
 | ''docDueDate''                  | Due date | | ''docDueDate''                  | Due date |
-| ''businessPartnerCode''         | Code of business partner | 
-| ''businessPartnerName''         | Name of business partner | 
 | ''docReference''                | The "Reference 2" field that some documents have | | ''docReference''                | The "Reference 2" field that some documents have |
 | ''docComments''                 | The comments field | | ''docComments''                 | The comments field |
 +^ Based on document's business partner ^^
 +| ''businessPartnerCode''         | Code of business partner |
 +| ''businessPartnerName''         | Name of business partner |
 ^ Line-level ^^ ^ Line-level ^^
 | ''lineNumber''                  | The line number **starting from zero** | | ''lineNumber''                  | The line number **starting from zero** |
 | ''lineItemName''                | Description (normally contains item name) | | ''lineItemName''                | Description (normally contains item name) |
 | ''lineFreeText''                | Free text | | ''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 ^^ ^ Item-level ^^
 | ''itemCode''                    | Item code | | ''itemCode''                    | Item code |
Line 83: Line 90:
 | ''serialLotNumber''             | Lot-number of serial number | | ''serialLotNumber''             | Lot-number of serial number |
 | ''serialDetails''               | Serial details/notes | | ''serialDetails''               | Serial details/notes |
 +^ Warehouse-level ^^
 +| ''warehouseCode''               | Warehouse code |
 +| ''warehouseName''               | Warehouse name |
 ^ Bin location-level ^^ ^ Bin location-level ^^
 | ''locationCode''                | Bin location code | | ''locationCode''                | Bin location code |
Line 167: Line 177:
 </code> </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: Here's a list of commonly used GS1 field identifiers:
Line 181: Line 191:
 === Better control of generated HTML === === 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> <code>
-<img id='...' class='...' src='data:image/png;base64,@barcodeB64(...)@' />+<img id='...' class='...' src='data:image/png;base64,@barcodeBase64(...)@' />
 </code> </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 ==== ==== User-input values ====
Line 268: Line 286:
 </code> </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''. 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> </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> <code html>
Line 330: Line 351:
     <style>     <style>
         @page {         @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;           margin: 0;
           padding: 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;           margin: 0;
           padding: 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;           position: relative;
 +          width: 100%;
 +          height: 100%;
 +
 +          font-family: sans-serif;
 +          font-size: 18pt;
 +
 +          /* Global padding from the edges. */
 +          padding: 3mm;
         }         }
     </style>     </style>
 </head> </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> </body>
 </html> </html>
 </code> </code>
  
-===== File 2 =====+==== File 2 ==== 
 + 
 +This file demonstrates the use of user-input values and JavaScript integration.
  
 <code html> <code html>
Line 388: Line 439:
     <style>     <style>
         @page {         @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;           margin: 0;
           padding: 0;           padding: 0;
         }         }
-        html { +
-          margin: 0; +
-          padding: 0; +
-          font-family: sans-serif; +
-          text-align: center; +
-        }+
         body {         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;           margin: 0;
           padding: 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;           position: relative;
 +          width: 100%;
 +          height: 100%;
 +
 +          font-family: sans-serif;
 +          font-size: 18pt;
 +
 +          /* Global padding from the edges. */
 +          padding: 3mm;
         }         }
     </style>     </style>
  
     <!-- Input definitions:     <!-- 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>     <script>
 +        // @useJavaScript@
         window.onload = function() {         window.onload = function() {
             var insert = document.getElementById('js-insert')             var insert = document.getElementById('js-insert')
             insert.textContent = "Hello World!"             insert.textContent = "Hello World!"
-            window.cobiwms.print()+            cobiwms.print()
         }         }
     </script>     </script>
 </head> </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> </div>
- 
 </body> </body>
 </html> </html>
 </code> </code>
  
cobi.wms/label_templates.1656681286.txt.gz · Last modified: by tkammer
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki