| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| cobi.wms:label_templates [2022/05/11 20:03] – tkammer | cobi.wms:label_templates [2023/06/19 13:59] (current) – tkammer |
|---|
| | ''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 | |
| | ''itemName'' | Item name | | | ''itemName'' | Item name | |
| | ''itemForeignName'' | Foreign name of item (often used for an alt. item code) | | | ''itemForeignName'' | Foreign name of item (often used for an alt. item code) | |
| | | || |
| | ''itemBarcode'' | Primary barcode of the item, as text | | | ''itemBarcode'' | Primary barcode of the item, as text | |
| | ''itemBarcodeGTIN12'' | Primary barcode, fitted into GTIN-12 format | | | ''itemBarcodeGTIN12'' | Primary barcode, fitted into GTIN-12 format | |
| | ''itemBarcodeGTIN13'' | Primary barcode, fitted into GTIN-13 format | | | ''itemBarcodeGTIN13'' | Primary barcode, fitted into GTIN-13 format | |
| | ''itemBarcodeGTIN14'' | Primary barcode, fitted into GTIN-14 format | | | ''itemBarcodeGTIN14'' | Primary barcode, fitted into GTIN-14 format | |
| | | || |
| | ''itemSupplierCatalogNumber'' | Item number in supplier's catalog | | | ''itemSupplierCatalogNumber'' | Item number in supplier's catalog | |
| | ''itemAdditionalIdentifier'' | Additional identifier (database field ''SWW'') | | | ''itemAdditionalIdentifier'' | Additional identifier (database field ''SWW'') | |
| | | || |
| | ''itemGroupName'' | Name of the item group in which the item is | | | ''itemGroupName'' | Name of the item group in which the item is | |
| | ''itemPurchaseUnitQty'' | Quantity of items in one purchase unit | | | || |
| | ''itemSalesUnitQty'' | Quantity of items in one sales unit | | | ''itemPurchasePackQty'' | Quantity of items in one purchase package | |
| | | ''itemSalesPackQty'' | Quantity of items in one sales package | |
| | | || |
| | | ''itemPurchaseUnitQty'' | Stock quantity per purchased unit | |
| | | ''itemSalesUnitQty'' | Stock quantity per sold unit | |
| | | || |
| | ''itemPurchaseUnitName'' | Name of the purchase UoM | | | ''itemPurchaseUnitName'' | Name of the purchase UoM | |
| | ''itemSalesUnitName'' | Name of the sales UoM | | | ''itemSalesUnitName'' | Name of the sales UoM | |
| | ''itemStockUnitName'' | Name of the stock UoM | | | ''itemStockUnitName'' | Name of the stock UoM | |
| | | || |
| | ''itemPurchaseLength'' | Length of the purchase UoM | | | ''itemPurchaseLength'' | Length of the purchase UoM | |
| | ''itemPurchaseWidth'' | Width of the purchase UoM | | | ''itemPurchaseWidth'' | Width of the purchase UoM | |
| | ''itemPurchaseHeight'' | Height of the purchase UoM | | | ''itemPurchaseHeight'' | Height of the purchase UoM | |
| | | || |
| | ''itemPurchaseLengthUnit'' | Unit in which the purchase UoM length is given | | | ''itemPurchaseLengthUnit'' | Unit in which the purchase UoM length is given | |
| | ''itemPurchaseWidthUnit'' | Unit in which the purchase UoM width is given | | | ''itemPurchaseWidthUnit'' | Unit in which the purchase UoM width is given | |
| | ''itemPurchaseHeightUnit'' | Unit in which the purchase UoM height is given | | | ''itemPurchaseHeightUnit'' | Unit in which the purchase UoM height is given | |
| | | || |
| | ''itemSalesLength'' | Length of the sales UoM | | | ''itemSalesLength'' | Length of the sales UoM | |
| | ''itemSalesWidth'' | Width of the sales UoM | | | ''itemSalesWidth'' | Width of the sales UoM | |
| | ''itemSalesHeight'' | Height of the sales UoM | | | ''itemSalesHeight'' | Height of the sales UoM | |
| | | || |
| | ''itemSalesLengthUnit'' | Unit in which the sales UoM length is given | | | ''itemSalesLengthUnit'' | Unit in which the sales UoM length is given | |
| | ''itemSalesWidthUnit'' | Unit in which the sales UoM width is given | | | ''itemSalesWidthUnit'' | Unit in which the sales UoM width is given | |
| | ''itemSalesHeightUnit'' | Unit in which the sales UoM height is given | | | ''itemSalesHeightUnit'' | Unit in which the sales UoM height is given | |
| | | || |
| | ''itemPurchaseUnitContents'' | Contents of the purchase UoM in terms of the base UoM of the UoM group | | | ''itemPurchaseUnitContents'' | Contents of the purchase UoM in terms of the base UoM of the UoM group | |
| | ''itemSalesUnitContents'' | Contents of the sales UoM in terms of the base UoM of the UoM group | | | ''itemSalesUnitContents'' | Contents of the sales UoM in terms of the base UoM of the UoM group | |
| | ''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 | |
| </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: |
| === 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 ==== |
| </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''. |
| </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> |
| <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> |
| </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> |
| <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> |
| |
