> 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/dynamic-components/components/barcode.md). # Barcode The Avonni Barcode component generates and displays scannable barcodes from a value you provide, supporting a wide range of barcode symbologies with customizable colors, size, and text display. Use it whenever you need to encode product codes, serial numbers, tracking IDs, URLs, or other data into a scannable image inside your Dynamic Components. ## Overview The Barcode component turns any value into a scannable image, helping you automate data capture and reduce manual entry errors across your Salesforce applications. **Why Use the Barcode Component?** * **Automate Data Capture:** Enable quick and accurate data capture using barcode scanners. * **Improve Efficiency:** Streamline workflows that involve product tracking, inventory management, or data entry. * **Reduce Errors:** Minimize manual data entry errors by using barcodes. * **Enhance User Experience:** Provide a convenient way to access information or act by scanning barcodes. **Example Use Cases** * **Product Management:** Generate barcodes for products to track inventory and sales. * **Event Ticketing:** Create barcodes for event tickets to manage attendance and check-in. * **Asset Tracking:** Assign barcodes to assets to monitor their location and usage. * **Document Management:** Use barcodes to access and retrieve documents quickly. ## Configuration To configure the Barcode, select it on the canvas. The **Edit Barcode** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab. ### Properties #### Value Enter the data you want to encode in the barcode. This is the information that will be scanned or read by a barcode reader — for example a product code, serial number, tracking ID, URL, or any other relevant data. You can type the value directly, or use a formula or variable to pull it from a Salesforce field. This setting is required. #### Type Select the barcode symbology to render, based on your data and industry standards. This setting is required. The component supports a large catalog of one- and two-dimensional barcode types. Common choices include: * **UPC-A / UPC-E (Universal Product Code):** Retail product identification, primarily in North America. * **EAN-13 / EAN-8 (International Article Number):** Retail product identification used globally. * **Code 128:** A versatile barcode that can encode letters, numbers, symbols, and control characters. * **Code 39:** An older barcode type that encodes uppercase letters, numbers, and a few special characters. * **QR Code:** A two-dimensional barcode capable of storing large amounts of data such as URLs, contact information, or plain text. Beyond these, the **Type** dropdown also offers many specialized symbologies — Aztec Code, Data Matrix, PDF417, GS1 variants, DataBar family, postal codes (Japan Post, Royal Mail, KIX, PostNet), Pharmacode, MaxiCode, and more. When choosing, consider the kind of data you're encoding, your industry, and the capabilities of the scanners that will read it. #### Background Sets the background color shown behind the barcode (typically white). #### Color Sets the color of the barcode bars or squares. Defaults to black (`#000000`). #### Text Color Sets the color of the human-readable value displayed alongside the barcode. Defaults to black (`#000000`). #### Text Alignment Sets the position of the displayed value relative to the barcode. The position combines a vertical placement (Top, Center, Bottom) with a horizontal one (Left, Right, Center, Justify) — for example **Bottom Center** or **Top Left**. Defaults to a right alignment. #### Hide Value When enabled, the human-readable value is hidden so the barcode displays on its own. #### Height Sets the maximum height of the barcode. Accepts length values in any CSS unit; unitless numbers are treated as pixels. By default the height depends on the width. #### Width Sets the maximum width of the barcode. Accepts length values in any CSS unit; unitless numbers are treated as pixels. Defaults to `100%`. #### Checksum When enabled, the barcode's checksum value is shown. #### Alternative Text Available under Advanced options, this provides assistive-text describing the barcode for screen readers and other accessibility tools. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Styling The **Style** tab of the Edit Barcode panel gives you fine-grained control over the barcode's spacing, dimensions, and frame. {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the barcode, creating space between it and other elements on the screen. * **Top / Right / Bottom / Left:** Adjust the space on each side of the barcode. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the barcode and its border. * **Top / Bottom / Left / Right:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} Controls the barcode's dimensions. * **Width / Height:** Set fixed dimensions. * **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds. * **Overflow:** Control how content that exceeds the bounds is handled. {% endtab %} {% tab title="Border" %} Customizes the border around the barcode. * **Color:** Set the border color. * **Size:** Adjust the border thickness. * **Style:** Choose a border style (e.g. solid, dashed, dotted). * **Radius:** Control the roundness of the corners. {% endtab %} {% endtabs %} --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/barcode.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.