Differences

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

--- de:cobi.wms:etikettenvorlagen [2025/10/24 10:53] – thuth
+++ de:cobi.wms:etikettenvorlagen [2025/10/24 11:08] (current) – [JavaScript-Integration] thuth
@@ Line 200: / Line 200: @@
 ==== Datums-Umformatierung ====
+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:
 <code>
 @dateReformat(DATUM|VON_FORMAT|ZU_FORMAT)@
 </code>
+**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:
@@ Line 213: / Line 226: @@
 ===== JavaScript-Integration =====
-Aktivierung:
+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:
 <code>
@@ Line 219: / Line 232: @@
 </code>
-Druckersteuerung erfolgt dann über JS:
+**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.
-''cobiwms.print()''
+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.
+<code>
+cobiwms.get(name)
+</code>
+Der Parameter ''name'' muss ein String sein. Er wird als Platzhalter interpretiert und sein Wert wird als String zurückgegeben.
+Beispiel: Ein Aufruf von ''cobiwms.get("itemName")'' liefert den Artikelnamen als Text zurück.
+(Man könnte zwar auch Platzhalter wie ''@itemName@'' direkt im Code verwenden, aber dann würde der Wert unverarbeitet in den Code eingefügt werden. Das heißt: Man müsste ihn in Anführungszeichen setzen wie ''"@itemName@"'', und sobald im tatsächlichen Wert selbst Anführungszeichen vorkommen, würde der Code fehlschlagen. Deshalb ist die Verwendung von ''cobiwms.get()'' in JavaScript deutlich sicherer.)
+<code>
+cobiwms.prompt(title, callback)
+</code>
+Durch den Aufruf dieser Funktion zeigt die App ein Popup mit einem Eingabefeld für den Benutzer an.
+Der Parameter ''title'' muss ein String sein und bestimmt die Überschrift des Popups.
+Der Parameter ''callback'' muss ebenfalls ein String sein und eine Funktion repräsentieren.
+Diese Funktion wird nach Bestätigung der Eingabe aufgerufen und erhält dabei einen Parameter,
+der den vom Benutzer eingegebenen Wert als String enthält.
 Zugriff auf Platzhalterwerte:
 <code>
-cobiwms.get("itemName")
+window.handleCurrency = function (currency) {
+    ...
+}
+cobiwms.prompt("Enter currency", "window.handleCurrency")
 </code>
@@ Line 237: / Line 275: @@
 <code html>
-<!-- Beispiel HTML unverändert aus Original -->
+<!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>
 </code>
 ==== Datei 2 ====
@@ Line 245: / Line 364: @@
 <code html>
-<!-- Beispiel HTML unverändert aus Original -->
+<!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>
 </code>