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/08/31 16:02] – 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 |
-| ''lineUnitCode''                | UoM code (if item's UoM group is not "Manual") | +| ''lineUnitName''                | UoM name as entered in document line |
-| ''lineUnitName''                | UoM name (might have been manually entered) |+
 | ''lineBPCatalogCode''           | Business partner catalog number (''SubCatNum'') | | ''lineBPCatalogCode''           | Business partner catalog number (''SubCatNum'') |
 | ''lineBPCatalogName''           | Business partner catalog description (''OSCN.Descriptio'') | | ''lineBPCatalogName''           | Business partner catalog description (''OSCN.Descriptio'') |
Line 90: 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 174: 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 188: 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 275: 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 325: Line 336:
 </code> </code>
  
-====== Example template files ======+===== Example template files =====
  
 The following example files serve to demonstrate the syntax and some of the features. 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. This is a very simple template demonstrating the use of placeholders to print the item code and name, price, and a timestamp.
Line 340: Line 351:
     <style>     <style>
         @page {         @page {
-          /* Set this to the width and height of your labels. */ +          /* You can use width/height, or a standardized size. */ 
-          size: 148mm 105mm;+          /* For example, the following two are equivalent: */ 
 +          /* size: 148mm 105mm; */ 
 +          /* size: A6 landscape; */ 
 +          size: A6 landscape;
  
-          /* Don't touch these, modify the container padding below. */ +          /* Don't change, use the container padding below. */
-          margin: 0; +
-          padding: 0; +
-        } +
- +
-        html { +
-          /* Don't touch these, modify the container padding below. */+
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
Line 355: Line 363:
  
         body {         body {
-          /* Repeat the width and height of your labels here.  Yes, this is necessary! */+          /* 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;           width: 148mm;
-          height: 105mm; +          height: 104mm;
- +
-          /* If you want the label printed sideways, enable this. */ +
-          /* NOTE: The negative value within translate() must equal the height value above! */ +
-          /*transform: rotate(90deg) translate(0, -105mm);*/ +
-          /*transform-origin: top left;*/+
  
-          /* Don't touch these, modify the container padding below. */+          /* Don't change, use the container below. */
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
  
           /* Useful to diagnose dimension issues. */           /* Useful to diagnose dimension issues. */
-          /*outline: 0.5mm solid black;*/ +          outline: 0.5mm solid black; 
-          /*outline-offset: -0.5mm;*/ +          outline-offset: -0.5mm;
- +
-          /* It's best to use a generic sans-serif font. */ +
-          font-family: sans-serif; +
-          font-size: 1.5em;+
         }         }
  
         .container {         .container {
-          /* Don't change these. */+          /* Don't change. */
           box-sizing: border-box;           box-sizing: border-box;
 +          position: relative;
           width: 100%;           width: 100%;
           height: 100%;           height: 100%;
  
-          /* Set the global padding from the edges here. */+          font-family: sans-serif; 
 +          font-size: 18pt; 
 + 
 +          /* Global padding from the edges. */
           padding: 3mm;           padding: 3mm;
         }         }
Line 391: Line 397:
 <div class="container"> <div class="container">
  
-<div style="float: left;"> +    <div style="float: left;"> 
-    <b>Code:</b> @itemCode@ +        <b>Code:</b> @itemCode@ 
-</div>+    </div>
  
-<div style="float: right;"> +    <div style="float: right;"> 
-    <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@ +        <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@ 
-</div>+    </div>
  
-<div style="text-align: center; margin-top: 24mm;"> +    <div style="text-align: center; margin-top: 24mm;"> 
-    @itemName@ +        @itemName@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 2mm;"> +    <div style="text-align: center; margin-top: 2mm;"> 
-    @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@ +        @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 1mm; 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;"> +    <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;"> +    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> 
-    <b>COBI.wms Sample Label</b> +        <b>COBI.wms Sample Label</b> 
-</div>+    </div>
  
 </div> </div>
Line 422: Line 428:
 </code> </code>
  
-===== File 2 =====+==== File 2 ====
  
 This file demonstrates the use of user-input values and JavaScript integration. This file demonstrates the use of user-input values and JavaScript integration.
Line 433: Line 439:
     <style>     <style>
         @page {         @page {
-          /* Set this to the width and height of your labels. */ +          /* You can use width/height, or a standardized size. */ 
-          size: 148mm 105mm;+          /* For example, the following two are equivalent: */ 
 +          /* size: 148mm 105mm; */ 
 +          /* size: A6 landscape; */ 
 +          size: A6 landscape;
  
-          /* Don't touch these, modify the container padding below. */ +          /* Don't change, use the container padding below. */
-          margin: 0; +
-          padding: 0; +
-        } +
- +
-        html { +
-          /* Don't touch these, modify the container padding below. */+
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
Line 448: Line 451:
  
         body {         body {
-          /* Repeat the width and height of your labels here.  Yes, this is necessary! */+          /* 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;           width: 148mm;
-          height: 105mm; +          height: 104mm;
- +
-          /* If you want the label printed sideways, enable this. */ +
-          /* NOTE: The negative value within translate() must equal the height value above! */ +
-          /*transform: rotate(90deg) translate(0, -105mm);*/ +
-          /*transform-origin: top left;*/+
  
-          /* Don't touch these, modify the container padding below. */+          /* Don't change, use the container below. */
           margin: 0;           margin: 0;
           padding: 0;           padding: 0;
  
           /* Useful to diagnose dimension issues. */           /* Useful to diagnose dimension issues. */
-          /*outline: 0.5mm solid black;*/ +          outline: 0.5mm solid black; 
-          /*outline-offset: -0.5mm;*/ +          outline-offset: -0.5mm;
- +
-          /* It's best to use a generic sans-serif font. */ +
-          font-family: sans-serif; +
-          font-size: 1.5em;+
         }         }
  
         .container {         .container {
-          /* Don't change these. */+          /* Don't change. */
           box-sizing: border-box;           box-sizing: border-box;
 +          position: relative;
           width: 100%;           width: 100%;
           height: 100%;           height: 100%;
  
-          /* Set the global padding from the edges here. */+          font-family: sans-serif; 
 +          font-size: 18pt; 
 + 
 +          /* Global padding from the edges. */
           padding: 3mm;           padding: 3mm;
         }         }
     </style>     </style>
 +
     <!-- Input definitions:     <!-- Input definitions:
- 
     @input(text[Insert value])@     @input(text[Insert value])@
     @input(selection[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)@     @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>
Line 500: Line 500:
 <div class="container"> <div class="container">
  
-<div style="float: left;"> +    <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;"> +    <div style="float: right;"> 
-    <b>Selection:</b> @input(selection)@ +        <b>Selection:</b> @input(selection)@ 
-</div>+    </div>
  
-<div style="text-align: center; margin-top: 24mm;"> +    <div style="text-align: center; margin-top: 24mm;"> 
-    @itemName@ +        @itemName@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 2mm;"> +    <div style="text-align: center; margin-top: 2mm;"> 
-    @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@ +        @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@ 
-</div> +    </div> 
-<div style="text-align: center; margin-top: 1mm; 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;"> +    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;"> 
-    <b>Input:</b> @input(text)@ +        <b>Input:</b> @input(text)@ 
-</div>+    </div>
  
-<div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> +    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;"> 
-    <b>COBI.wms Sample Label</b> +        <b>COBI.wms Sample Label</b> 
-</div>+    </div>
  
 </div> </div>
cobi.wms/label_templates.1661954545.txt.gz · Last modified: by tkammer
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki