Testing und Werkzeuge
QR-Code-Editor
QR-Codes testen, laden und speichern – Vorschau mit Farben, EC-Level und Vorlagen-Zuordnung
Der QR-Code-Editor ist ein Werkzeug, um dynamische QR-Codes mit echten Daten zu rendern und gespeicherte QR-Codes anzupassen. Mit QR-Codes platzieren Sie z. B. personalisierte Service-Portale oder Formularzugänge auf Rechnungen. Im Editor prüfen Sie, wie sich der kodierte Text mit Ihren Testdaten rendert und ob der Code optisch zur Vorlage passt. Erst nach erfolgreichem Rendern legen Sie den QR-Code als Element an.
Beachten Sie auch die Einführung zu QR-Code-Szenarien und deren Zuordnung zu Vorlagen.
Gespeicherte QR-Codes liegen unter Vorlagen-Management -> QR-Codes. Beim Testen wird dieser Editor geöffnet. Aus ihm können aber auch ganz neue QR-Codes angelegt werden.
Über den Dropdown können sie einen bestehenden QR-Code laden (oder per URL laden ?id=), Änderungen nach erfolgreichem Rendern mit Editierten QR-Code übernehmen zu persistieren, oder einen neuen QR-Code anlegen (inklusive Zuordnung zu DOCX-Vorlagen).
Diese Seite zeigt eine Liste aller Elemente, und darüber diverse Aktionen, die du ausführen kannst:
QR-Code im Editor laden, anlegen und speichern
In Bearbeitung: #id beispiel_identifier
In Bearbeitung
Zeigt den geladenen QR-Code (numerische id in der URL und technischer Identifier), solange Sie einen bestehenden Datensatz bearbeiten.
Erzeugt die Live-Vorschau (Base64) mit den aktuellen Einstellungen und dem JSON-Inhalt.
Speichert Änderungen am geladenen QR, sofern der Datensatz schreibbar ist; inklusive DOCX-Vorlagen-Zuordnung.
Wechselt in den Anlege-Flow (?create=1) um Identifier, Marke, tec. festzulegen – sichtbar nur nach einem erfolgreichem Render (nicht sichtbar, falls noch nicht erfolgreich gerendert).
QR-Code öffnen...
Dropdown mit allen gespeicherten QR-Codes; die Auswahl lädt den gewählten Datensatz per neuer ?id=-URL. Der aktuelle Eintrag ist markiert.
Bestehenden QR-Code bearbeiten
Wenn Sie mit QR-Code öffnen... ein Element auswählen oder in der QR-Code-Liste Testen wählen, öffnet der Editor mit einer numerischen ID in der Adresszeile, z. B. ?id=42. Es werden die gespeicherten Felder (u. a. QR-kodierter Text, Rand, Größe, Farben, EC-Level, zentriertes Bild, Bildunterschrift) geladen. Jetzt können Sie den QR-Code testen.
Der JSON-Bereich startet dabei leer und muss befüllt werden: Testpayloads liegen nicht in der QR-Entität und müssen bei Bedarf manuell oder über Testdaten laden ergänzt werden.
Nach QR-Code rendern und erfolgreicher Vorschau können Sie mit Editierten QR-Code übernehmen die Änderungen persistieren – sofern der QR nicht schreibgeschützt ist, z. B. weil er von der übergeordneten Umgebung geerbt wird.
Neuen QR-Code anlegen
Direkt über den Hauptnavigations-Link oder über Neuen QR-Code anlegen in der QR-Code-Verwaltung gelangen Sie in den Anlegeflow (?create=1) mit leeren Grundeinstellungen.
Oben im Formular erfassen Sie Identifier, Marke, Aktiv ab und Optionen wie Aktiv / Standard für Umgebungs-Mandanten; darunter konfigurieren Sie den QR und ordnen DOCX-Vorlagen zu.
Erst nach erfolgreichem Rendering kann mit Neuen QR-Code anlegen dieser als Element angelegt werden.
QR-Daten konfigurieren
Wird ein neuer QR-Code erstellt (?create=1), dann erscheint der Anlegeflow mit Stammdatenfeldern oberhalb der Konfiguration:
Eindeutige Kennung für programmatische Verwendung, Vorlagen-Zuordnung und API-Zugriff (snake_case, z. B. rechnung_qr_portal).
beispiel_identifier
Corporate-Identity-Zuordnung des QR-Codes; bei ?create=1 kann die Marke aus dem Listenfilter vorausgewählt sein.
default
Startdatum des QR-Codes; erst ab diesem Datum wird er beim Rendern berücksichtigt (Vor-Terminierung möglich).
01.01.2026
Aktiv
Sofortige De-/Aktivierung unabhängig vom Datum Aktiv ab.
Standard für Umgebungs-Mandanten
Legt den QR als Standard für alle Umgebungs-Mandanten der Umgebung fest (geerbte Defaults für Sub-Mandanten).
QR-kodierter Text
Hier tragen sie den eigentlichen Inhalt des QR-Codes ein. Dies kann ein statischer Text, ein dynamischer Platzhalter oder eine kombinierte Kombination aus beiden sein.
Zeilenumbrüche mit Enter sind möglich und wirken als codierte neue Zeilen. Andere Formatierungen werden nicht unterstützt.
https://portal.bsp/rechnung?request_id=<<payload.meta.request_id>>Verwenden Sie Payload-Platzhalter wie <<payload.customer.contract_id>>, um personalisierte Links zu erzeugen. Validieren Sie vor dem Rendern, dass alle im Text referenzierten Felder in den Testdaten gesetzt sind.
Größe & Rand
Leerraum um das QR-Bild, ganzzahlig in Modulen (QR-Rasterzellen) gemessen; Standard 4. Unabhängig von der Ausgabegröße in Pixeln (Size).
Endgültige Breite/Höhe des QR-Codes in Pixeln. Der Editor rendert quadratisch.
Farben & EC-Level
Dunkel
Hex-Farbcode für die dunklen Rasterzellen (Standard 000000, im Editor ohne #-Prefix.
Hell
Hex-Farbcode für die hellen Rasterzellen (Standard FFFFFF, im Editor ohne #-Prefix.
Fehlerkorrekturstufe (L, M, Q, H) — bestimmt die Fehlertoleranz des QR-Codes. In Rechnungen ist M üblich (ausgewogenes Verhältnis zwischen Datenmenge und Redundanz).
Bild & Beschriftung
Logos (Bild) werden in der Mitte des QR-Codes angezeigt, Bildunterschriften darunter im Weißraum.
Optionales Logo, das mittig im QR-Code liegt. Unterstützt HTTPS-Links zu PNG oder JPG-Dateien.
Fehlerhafte URLs, fehlende Berechtigungen oder ungeeignete Formate (z. B. SVG) können zu fehlgeschlagenen Renderings führen, oft ohne spezifische Fehlermeldung. Der Editor kennt nicht den Grund, warum das Bild nicht geladen wurde.
Wert zwischen 0,0 und 1,0. Definiert, wie viel Fläche das zentrale Bild einnimmt.
Optionaler Text unter dem QR-Code (z.B. Hinweis auf das Zielsystem).
Setzt die Font-Family für den Untertitel.
Schriftgröße in Pixeln für die Beschriftung.
Farbcode der Beschriftung, Hex.
JSON & Testdaten
Für realistische Previews benötigen Sie Payloads aus dem Kundenkontext (z. B. Rechnungsnummern oder Vorgangs-IDs). Laden Sie gespeicherte Datensätze über Testdaten laden oder pflegen Sie die JSON-Struktur manuell.
[
{
"key": "value",
"items": [1, 2, 3]
},
{
"nested": {
"property": "value"
}
}
]Verwenden Sie den "Testdaten laden" Button, um schnell gespeicherte Testdaten aus dem Testdaten-Bereich zu laden.
Der Inhalt des JSON-Editors wird nicht als Teil der QR-Code-Definition in der Datenbank gespeichert. Nach einem Seiten-Reload, nach dem Wechsel auf einen anderen gespeicherten QR oder wenn Sie die Seite ohne ?id= neu öffnen, ist der JSON-Bereich wieder leer — ergänzen Sie Testdaten bei Bedarf erneut oder über Testdaten laden.
DOCX-Vorlagen zuweisen
Als letztes folgt in der Konfiguration die Vorlagen-Zuordnung — die Auswahl der DOCX-Vorlagen, in denen der QR verwendet werden soll. Die Zuordnung wird mit Editierten QR-Code übernehmen bzw. nach Neuen QR-Code anlegen (nach erfolgreichem Render) gespeichert.
| ID | Identifier | Gruppen-Identifier | Aktiv | Aktiv ab | |
|---|---|---|---|---|---|
| 5929 | template_identifier | group_identifier | YES | 05.08.2023 | |
| 5930 | another_template | Null | YES | 05.08.2023 |
Render-Vorschau und Fehlermeldungen
Hier erscheint der gerenderte QR-Code.
Preview wird nach dem Rendern angezeigt
Validierungs- oder Renderfehler erscheinen in der App oberhalb oder unterhalb des Vorschau-Bereichs. Fehlerhafte Formularfelder werden links hervorgehoben. — Prüfen Sie die Meldungen und rendern Sie erneut.
Verwandte Bereiche
- QR-Codes verwalten: Backend-Liste mit Zuordnung zu Templates und Komponenten
- QR-Code Use Cases: Szenarien für Rechnungen, Service-Portale und Kampagnen
- Charts & Diagramme: Ergänzende Visualisierungen für Dokumente
- Output.Rocks-Syntax: Vollständige Referenz für Platzhalter innerhalb QR-kodierter Texte