> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-bar-code.md). # AX - Bar Code ## Übersicht **AX - Barcode** ist eine Experience-Cloud-Komponente, die scannbare Codes, einschließlich QR-Codes, Standard-Barcodes und anderer Formate, auf Experience-Sites-Seiten basierend auf Salesforce-Feldwerten generiert. Verwenden Sie sie, um Codes für Produktnummern, Bestell-IDs, Sendungsverfolgungsinformationen, Veranstaltungstickets oder beliebige Daten anzuzeigen, die Portalbenutzer mit Mobilgeräten scannen müssen. Konfigurieren Sie den Barcode-Typ, die Größe und das Styling im Experience Builder, damit sie zum Branding Ihres Portals passen. Perfekt für Kundenportale mit Bestellbarcodes, Registrierungsseiten für Veranstaltungen mit Ticket-QR-Codes, Partnerportale mit Produktverfolgung oder Self-Service-Sites, auf denen Benutzer scannbare Zugriffscodes benötigen. ## Konfiguration ### Den Barcode-Typ auswählen AX - Bar Code rendert 103 verschiedene Barcode-Typen. Wählen Sie den benötigten im **Typ** Attribut. Die Auswahlliste führt jeden Typ unter seinem technischen Namen auf, z. B. `qrcode` oder `code128`, daher steht unten neben jedem gängigen Typ dieser Name.

Sechs der 103 Typen, jeweils mit ihrem Namen in der Auswahlliste Typ beschriftet. Bei Codes, die ihren Wert nicht ausgeben (QR Code, Data Matrix, PDF417), ist Wert ausblenden aktiviert.

Unterstützte Haupttypen von Barcodes * **2D-Codes:** QR Code (`qrcode`), Data Matrix (`datamatrix`), PDF417 (`pdf417`), Aztec Code (`azteccode`), MaxiCode (`maxicode`), DotCode (`dotcode`) * **Einzelhandel / Produkt (1D):** EAN-13 (`ean13`), EAN-8 (`ean8`), UPC-A (`upca`), UPC-E (`upce`), GS1-128 (`gs1-128`) * **Logistik / Versand:** ITF-14 (`itf14`), Code 128 (`code128`), Interleaved 2 of 5 (`interleaved2of5`), GS1 DataBar (`databaromni` und die anderen `databar` Typen) * **Allzweck (1D):** Code 39 (`code39`), Code 93 (`code93`), Codabar (`rationalizedCodabar`), MSI (`msi`), Plessey (`plessey`), Telepen (`telepen`) * **Post:** USPS Intelligent Mail (`onecode`), POSTNET (`postnet`), PLANET (`planet`), Royal Mail (`royalmail`), Australia Post (`auspost`), Japan Post (`japanpost`) * **Pharmazeutisch:** Pharmacode (`pharmacode`), PZN (`pzn`), HIBC (die `hibc` Typen, wie `hibccode128`) Der vollständige Satz der 103 unterstützten Symbologien ist in der Komponente **Typ** Eigenschaft verfügbar.
### Eigenschaften **Typ** wählt die zu generierende Barcode-Symbologie aus. Wählen Sie den passenden Typ basierend auf Ihrem Anwendungsfall oder Branchenstandard. **Wert** ist die in den Barcode zu kodierende Datenmenge. Geben Sie statischen Text oder ein Token ein, das den in einer anderen AX-Komponente auf der Seite ausgewählten Datensatz liest, z. B. `{{accountTable.selectedRecord.AccountNumber}}`. Der Code wird dann aktualisiert, wenn der Benutzer einen anderen Datensatz auswählt. Siehe [Reaktive Komponenten](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md). {% hint style="info" %} Die Komponente bleibt leer, bis sowohl **Typ** und **Wert** festgelegt sind. Wenn der Wert nicht den Regeln des gewählten Typs entspricht (z. B. Buchstaben in einem EAN-13), zeigt die Komponente statt eines Codes eine Fehlermeldung an. {% endhint %} **Prüfsumme** aktiviert oder deaktiviert die Berechnung einer Prüfziffer und fügt eine zusätzliche Ebene der Datenintegrität hinzu, wenn der Barcode-Typ dies unterstützt. Wenn sie aktiviert ist, wird das Prüfszeichen auch im lesbaren Wert ausgegeben. Standardmäßig deaktiviert. **Breite** und **Höhe** legt die maximale Größe des Barcodes in einer beliebigen CSS-Einheit fest (eine einfache Zahl bedeutet Pixel). Die Breite ist standardmäßig 100 % des Containers, und die Höhe folgt der Breite, sofern Sie sie nicht festlegen. **Wert ausblenden** (standardmäßig deaktiviert) entfernt den mit dem Code ausgegebenen lesbaren Wert für eine sauberere visuelle Darstellung. **Alternativtext** stellt barrierefreien Text bereit, der den Barcode beschreibt. ## Stil | Name | Beschreibung | Verwendung | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Hintergrundfarbe der Barcode-Komponente fest. | Wählen Sie eine Farbe, die einen guten Kontrast zu den Barcode-Linien und -Ziffern gewährleistet und so Lesbarkeit und Scannbarkeit sicherstellt. | | **Farbe** | Legt die Farbe der Balken (oder Module bei 2D-Codes) fest. Der lesbare Wert verwendet **Textfarbe**. | Wählen Sie eine Farbe, die sich vom Hintergrund abhebt und die Sichtbarkeit optimiert. | | **Textausrichtung** | Positionieren Sie den lesbaren Wert um den Barcode herum. Zwölf Optionen kombinieren einen vertikalen Bereich (Oben, Mitte, Unten) mit einem horizontalen (Links, Mitte, Rechts, Blocksatz), von **Oben links** bis **Unten im Blocksatz**. Standardmäßig **Unten zentriert**. | Passen Sie die Textausrichtung an, um sie mit dem Gesamtdesign und dem Layout der Webseite oder des gedruckten Materials in Einklang zu bringen. | | **Textfarbe** | Legt die Farbe des lesbaren Werts fest, wo immer **Textausrichtung** sie ihn platziert. | Wählen Sie eine Farbe, die sich gut vom Hintergrund ablesen lässt und sicherstellt, dass der kodierte Wert visuell zugänglich ist. |

Derselbe Code-128-Wert mit drei Textausrichtungsoptionen. Blocksatz verteilt die Zeichen über die gesamte Breite des Codes.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-bar-code.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.