Etikettenvorlagen (Label Templates) für COBI.wms sind HTML-Dateien, die spezielle Platzhalterwerte enthalten können, welche von COBI.wms interpretiert werden. Diese Platzhalter werden über eine einfache „Suchen-und-Ersetzen“-Logik durch die jeweiligen Werte ersetzt, bevor das resultierende HTML zur grafischen Darstellung an das Android-System übergeben wird.

Die folgenden Abschnitte beschreiben die verschiedenen Arten von Platzhaltern, die in COBI.wms-Etikettenvorlagen unterstützt werden.

Die Platzhalter müssen innerhalb des HTML-Dokuments im folgenden Format verwendet werden: @platzhalterName@ — ein @-Symbol vor und nach dem Namen, ohne Leerzeichen.

Platzhalter auf Dokument- und Positionsebene sind nur gültig, wenn das Etikett aus einer Belegposition heraus gedruckt wird.

Die itemBarcodeGTIN…-Platzhalter stellen sicher, dass die Barcode-Länge dem jeweiligen GTIN-Standard entspricht, oder setzen ggf. Nullen ein, um weiterhin ein gültiges Format zu erzeugen.

Preise können über den Platzhalter @itemPrice(x)@ aus Preislisten ausgegeben werden.

Format-Beispiele:

• 5.00 USD (bzw. geräteeinstellungabhängig 5,00 USD)

Weitere Varianten:

Spezial-Platzhalter zur Anzeige tatsächlicher Barcodes:

@barcode(FORMAT,BREITE,HÖHE,INHALT)@

Unterstützte FORMATE:

• CODEBAR
• CODE_39 / CODE_93 / CODE_128
• DATA_MATRIX
• EAN_8 / EAN_13
• QR_CODE
• UPC_A / UPC_E

Beispiel:

@barcode(EAN_13,100,50,@itemBarcodeGTIN13@)@

GS1-Barcodes erfordern als ersten Charakter: |

Beispiel:

@barcode(CODE_128,100,75,|01@itemBarcodeGTIN14@10@batchNumber@|)@

Alternativ:

* @barcodeSrc(…)@ → nur src-Attribut * @barcodeBase64(…)@ → nur Base64-Daten

Eingabeplatzhalter:

@input(NAME)@

Mit Anzeigename:

@input(quantity[Anzahl Kisten])@

Mit Auswahlwerten:

@input(Currency;EUR,USD,GBP)@

@date(FORMAT)@

Beispiele:

Der spezielle Platzhalter zur Datumsumformatierung kann verwendet werden, um ein Datum in einem bestimmten Format einzulesen und anschließend in einem anderen Format auszugeben. Die Verwendung sieht wie folgt aus:

@dateReformat(DATUM|VON_FORMAT|ZU_FORMAT)@

HINWEIS: Keine Leerzeichen vor oder nach den Klammern oder den trennenden senkrechten Strichen setzen! (Leerzeichen würden als Teil des jeweiligen Parameters interpretiert.)

Dieser Platzhalter verwendet das senkrechte Strichsymbol | anstelle von Kommata zur Trennung der Parameter, da die Parameter selbst Kommata enthalten können.

Die Funktionsweise ist wie folgt: Der Text, der im Parameter DATE gefunden wird, wird entsprechend dem Format FROM_FORMAT interpretiert, sodass die Software weiß, welches Datum bzw. welche Uhrzeit gemeint ist, und anschließend im Format TO_FORMAT ausgegeben.

Die Parameter FROM_FORMAT und TO_FORMAT entsprechen dem FORMAT-Parameter des regulären date()-Platzhalters, wie im vorherigen Abschnitt beschrieben.

Im folgenden Beispiel wird das Ablaufdatum einer Charge in einem benutzerdefinierten Format ausgegeben — unter Ausnutzung der Tatsache, dass der Platzhalter @batchExpiryGS1@ immer ein Datum im Format yyMMdd liefert.

Beispiel:

@dateReformat(@batchExpiryGS1@|yyMMdd|dd.MM.yyyy)@

Das HTML-Dokument, das nach der Verarbeitung einer COBI.wms-Etikettenvorlage entsteht, wird durch eine vollwertige Browser-Engine dargestellt. Das bedeutet, dass in der Vorlage nicht nur CSS, sondern auch JavaScript verwendet werden kann. Dies muss jedoch explizit aktiviert werden, indem der folgende Pseudo-Platzhalter irgendwo innerhalb der Datei eingefügt wird, z. B. innerhalb eines HTML-Kommentars am Anfang der Datei:

@useJavaScript@

HINWEIS: Wenn JavaScript aktiviert ist, wird der Druck des gerenderten HTML-Dokuments nicht mehr automatisch ausgelöst. Stattdessen muss der Druck manuell aus dem JavaScript-Code gestartet werden, indem an geeigneter Stelle cobiwms.print() aufgerufen wird.

Während der Ausführung des JavaScript-Codes steht das spezielle Objekt cobiwms zur Verfügung, das eine Reihe von Funktionen bereitstellt. Diese werden im Folgenden erläutert.

Zugriff auf Platzhalterwerte:

window.handleCurrency = function (currency) {
    ...
}

cobiwms.prompt("Enter currency", "window.handleCurrency")

Zwei vollständige Beispiel-HTML-Dateien:

Einfaches Etikett mit Barcode, Preis & Zeitstempel.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <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;
        }
 
        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;
 
          /* 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>
</head>
<body>
<div class="container">
 
    <div style="float: left;">
        <b>Code:</b> @itemCode@
    </div>
 
    <div style="float: right;">
        <b>Price:</b> @itemPriceCurrencySymbol(1)@ @itemPriceFormattedValue(1)@
    </div>
 
    <div style="text-align: center; margin-top: 24mm;">
        @itemName@
    </div>
    <div style="text-align: center; margin-top: 2mm;">
        @barcode(CODE_128,150,75,|90@itemCode@|10@batchNumber@)@
    </div>
    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;">
        (90)@itemCode@(10)@batchNumber@
    </div>
 
    <div style="position: absolute; left: 0; bottom: 0; padding: inherit;">
        <b>@date(yyyy-MM-dd HH:mm)@</b>
    </div>
 
    <div style="position: absolute; right: 0; bottom: 0; padding: inherit;">
        <b>COBI.wms Sample Label</b>
    </div>
 
</div>
</body>
</html>

Beispiel mit Benutzereingaben & JavaScript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <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;
        }
 
        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;
 
          /* 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(text[Insert value])@
    @input(selection[Select value];Value 1,Value 2,Value 3)@
    @input(codeFormat[Barcode type];CODE_128,DATA_MATRIX,QR_CODE)@
    -->
 
    <script>
        // @useJavaScript@
        window.onload = function() {
            var insert = document.getElementById('js-insert')
            insert.textContent = "Hello World!"
            cobiwms.print()
        }
    </script>
</head>
<body>
<div class="container">
 
    <div style="float: left;">
        <b>JS-Insert:</b> <span id="js-insert"></span>
    </div>
 
    <div style="float: right;">
        <b>Selection:</b> @input(selection)@
    </div>
 
    <div style="text-align: center; margin-top: 24mm;">
        @itemName@
    </div>
    <div style="text-align: center; margin-top: 2mm;">
        @barcode(@input(codeFormat)@,150,75,|90@itemCode@|10@batchNumber@)@
    </div>
    <div style="text-align: center; margin-top: 1mm; font-size: 0.8em;">
        (90)@itemCode@(10)@batchNumber@
    </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>
</body>
</html>