Docs / Print Views

Print Views - geschützte Endbenutzer-Labels + PWA

Mache aus jedem gespeicherten Design eine geschützte Druck-URL unter print.zplcloud.com - mit Endbenutzer-Formular (Form Designer), QR/Barcode-Scanner, PDF-Vorschau, Weblink-Druck und eigener, auf den Home-Screen heftbarer PWA.

Die Idee

Ein Produktlabel-Design hat z.B. zwei Views: eine Store-View, bei der der Mitarbeiter per EAN (tippen oder QR/Barcode-Scanner) ein Produktlabel erhält, und eine Versand-View, die pro Bestellnummer drei Labels druckt. Die Endbenutzer brauchen keinen Designer - sie öffnen eine URL, füllen das Formular aus, sehen die PDF-Vorschau und drucken auf einen WebLink-Drucker.

Jede Print-View ist zugleich eine eigene PWA (Progressive Web App): auf dem Smartphone lässt sie sich mit eigenem Namen und Icon auf den Home-Screen heften und öffnet im Vollbild (Standalone) - wie eine native App.

URL-Schema

  • Kurze URL (canonical): https://print.zplcloud.com/d/{designName}.{designId}/{viewSlug} - z.B. https://print.zplcloud.com/d/australia-open-rfid.15/store
  • Kürzeste URL: https://print.zplcloud.com/pv/{id} - leitet auf die kurze URL um (ideal für QR-Codes).
  • Zugriff: Login erforderlich; nur der Ersteller + freigegebene Accounts (allowedEmails) können die Seite öffnen - alle anderen erhalten 403.
https://print.zplcloud.com/d/australia-open-rfid.15/store
https://print.zplcloud.com/pv/7   # leitet auf die /d/-URL um

Print-View anlegen (Plattform)

  1. Sidebar → „Print Views" (Plattform /platform/printviews).
  2. Design aus der Liste der gespeicherten Designs wählen, Name und View-ID (Slug, nur a-z 0-9 -) vergeben, Beschreibung optional.
  3. Erlaubte Accounts: E-Mail-Adressen (eine pro Zeile oder mit ;) - der Ersteller hat immer Zugriff.
  4. Form Designer: Felder per Palette hinzufügen (dx-text-box, dx-select-box, dx-check-box, dx-button), Label/Feldname (Binding), Platzhalter, Pflichtfeld, Optionen, Datenquelle „100 Testartikel", Lookup-Spalte und optional QR/Barcode-Scanner.
  5. Standard-Drucker (WebLink) optional setzen.
  6. Speichern → beide URLs (kurz + /pv/{id}) mit Kopieren + QR-Code (PNG/PDF/ZPL + druckbar) erscheinen.

Formular-Felder & Daten

  • dx-text-box - Textfeld mit optionalem 📷 QR/Barcode-Scanner (Kamera liest Codes direkt ins Feld; Kamera-Auswahl bei mehreren Kameras wird im localStorage gemerkt, Erfolgs-Beep).
  • dx-select-box - Dropdown (statische Optionen oder die 100 Testartikel als Datenquelle).
  • dx-check-box - Option/Kennzeichen.
  • dx-button - auslösender Button (Vorschau).
  • Lookup: gibt der Endbenutzer z.B. eine EAN ein, wird die passende Zeile aus den Testdaten in den Datensatz übernommen - alle Spalten stehen dem Design als Bindings zur Verfügung. (Der echte Datenlayer folgt; aktuell 100 deterministische Testartikel mit EAN-13-Prüfziffer.)
  • Validierung: Vorschau/PDF/Drucken sind erst aktiv, wenn alle Pflichtfelder gültige Daten haben; der Server antwortet sonst mit 400 statt 500.

Lesbare Formate (Barcode/QR-Scanner)

Der Scanner nutzt ZXing-C++ (WASM, self-hosted) mit Fallback auf den ZXing-JS-Port (kein CDN) und erkennt folgende Formate:

  • Lineare Codes: EAN-13, EAN-8, UPC-A, UPC-E, Code 128, Code 39, Code 93, Codabar, ITF (Interleaved 2/5), DataBar (RSS-14), DataBar Expanded
  • 2D-Codes: QR-Code, Data Matrix, PDF417, Aztec, Micro QR-Code

Tipp für kleine/schlecht gedruckte Codes: den Code in den blauen Eckrahmen in der Bildmitte halten - zusätzlich zum Vollbild wird dort in nativer Auflösung dekodiert.

Vorschau & Drucken

  • Vorschau als PDF - rendert das Label (mit den Formulardaten) als PDF-Vorschau im Browser.
  • PDF drucken - Browser-Druckdialog der Vorschau.
  • WebLink drucken - ZPL an den gewählten WebLink-Drucker (Drucker werden dedupliziert angezeigt, Standard-Drucker vorausgewählt).

PWA - eigene App auf dem Home-Screen

Jede Print-View liefert ihr eigenes Web-App-Manifest, ein dynamisch generiertes Icon (mit der Initiale der View) und einen minimalen Service Worker - damit ist die Seite auf Android („App installieren") und iOS („Zum Home-Bildschirm") als eigene, standalone App heftbar:

  • Manifest: /{view}/manifest.json - Name = View-Name, display: standalone, Icons 192/512 px.
  • Icon: /{view}/icon.png?size=192|512 - dunkles Label-Icon mit Initiale (SkiaSharp).
  • Service Worker: /sw.js - Netzwerk-Passthrough, es werden bewusst keine sensiblen Label-/API-Daten gecacht.
  • iOS: apple-mobile-web-app-capable + apple-touch-icon - öffnet standalone ohne Browser-UI.
  • Nach Installation öffnet die App start_url; ohne Login erscheint die Anmeldung, danach geht es zurück zur View.

Daten-Routen (Frontend, kein CORS)

Die Verwaltung läuft über dieselbe Origin (zplcloud.com), damit im Form-Designer kein CORS nötig ist:

  • GET /api/printviews/list - Views im Benutzer-Scope.
  • POST /api/printviews/save - anlegen/aktualisieren (nur Ersteller).
  • POST /api/printviews/delete - löschen (nur Ersteller).
  • GET /api/printviews/{id} - Detail inkl. Design-JSON + 100 Testartikel.
  • GET /api/printviews/testdata - die 100 Testartikel.
  • GET /api/weblink/connections / POST /api/weblink/send-zpl - WebLink-Drucker (wie im Batch-Tab).

Host-Isolation

Auf print.zplcloud.com existieren nur die Print-Routen (/d/…, /pv/{id}, manifest.json, icon.png, /sw.js), die API (/api/*) und die Account-/Login-Seiten. SPA, Marketing und alles andere antworten dort mit 404 - alle anderen Hosts bleiben unverändert.