> 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/app-builder-components/app-builder-components/ax-barcode.md). # AX - Barcode ## Overview **AX - Barcode** is a Lightning App Builder component that generates scannable codes—including QR codes, standard barcodes, and other formats—directly on your record pages, app pages, and home pages. Use it to display codes based on Salesforce field values like record IDs, product numbers, URLs, or tracking information. Users can scan these codes with mobile devices to quickly access records or information. ### Getting Started Use this simple tutorial to learn the basics of the Barcode component and start building your use cases. {% @arcade/embed url="" flowId="8j7qoXDuUEWZh3YEe2I5" %} ### Use Cases #### Inventory & Asset Management * Generate asset tags with QR codes linking to equipment records * Create inventory labels with product codes and tracking information * Display serial numbers as scannable codes for quick lookup #### Event & Access Management * Generate event tickets with QR codes for attendee check-in * Create access badges with unique identifiers for security * Display conference session codes for quick registration *** ## Configuration ### Properties | Label | Type | Default | Required | Description | | ------------------ | ------- | --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Value | String | — | Yes | The data or text string to encode and display as a barcode or QR code. Example: or Asset-001. | | Type | String | — | | Defines the barcode format to render. Supports a wide range of barcode standards including QR codes, Code128, DataMatrix, EAN, UPC, PDF417, and many others. Options: `auspost`, `azteccode`, `azteccodecompact`, `aztecrune`, `bc412`, `channelcode`, `codablockf`, `code11`, … (105 total). | | Width | String | — | | The width of the barcode in pixels or valid CSS units (e.g., 200px, 100%). | | Height | String | `150` | | The height of the barcode in pixels or valid CSS units (e.g., 200px, 150px). | | Hide Value | Boolean | `false` | | If true, hides the human-readable value displayed below the barcode. | | Background Color | String | — | | The background color of the barcode area. Accepts valid CSS color values such as hex codes (#FFFFFF), RGB, or named colors. | | Color | String | — | | The color of the barcode's bars or QR modules. Accepts valid CSS color values. | | Text Color | String | — | | The color of the human-readable value text, if displayed. Accepts valid CSS color values. | | Text Alignment | String | `bottom-center` | | Controls how the human-readable value (the text shown with the barcode/QR) is aligned. Valid values: left, center, right. Applies to the text label—not the bars/modules themselves. Options: `top-right`, `top-left`, `top-center`, `top-justify`, `center-right`, `center-left`, `center-center`, `center-justify`, … (12 total). | | Header - Title | String | — | | Text shown as the main heading above the audio player. Ideal for contextual labeling, such as “Top Opportunities” or “Recent Cases.” | | Header - Caption | String | — | | Subheading text shown below the main title. Used to provide additional context such as “Sorted by Close Date” or “Filtered by Priority.” | | Header - Icon Name | String | — | | Salesforce Lightning Design System icon name (e.g., standard:product, standard:products) that appears next to the title. Used for visual context or branding. | | Display as Card | Boolean | `false` | | If true, displays the barcode within a styled card container, suitable for dashboards or embedded record page use. | ## Use Case Examples ### Example 1: Asset Tracking QR Code {% @arcade/embed url="" flowId="gyjakxQ1XTSlDPAFOoWm" %} **Scenario**: Generate QR codes for equipment assets that link to their detail records with professional styling. **Prerequisites**: This example uses the standard Asset object in Salesforce. For this demonstration, we've created a custom field `Asset_QR_URL__c` (Text field) that contains the asset's URL. In your implementation, you would create your own custom field with an appropriate name for your use case. Ensure your Asset records have populated Name and SerialNumber fields for proper display. **Steps** {% stepper %} {% step %} #### Navigate to Lightning App Builder and edit your Asset record page Drag the AX - Barcode component onto your page layout (from the Custom Components panel) {% endstep %} {% step %} #### **Configure the AX - Barcode component** * Set **Value** to `{{Record.Asset_QR_URL__c}}` (this references our demo custom field - replace with your own field name) * Set **Type** to `qrcode` (QR Code format) * Leave **Hide Value** unchecked (show URL for reference) {% endstep %} {% step %} #### **Configure visual styling** * Set **Width** to `200px` * Set **Height** to `200px` * Set **Background Color** to `white` * Set **Color** to `black` * Set **Text Color** to `#666666` * Set **Text Alignment** to `center` {% endstep %} {% step %} #### **Configure the header** * Set **Header Title** to `Asset QR Code` * Set **Header Caption** to `{{Record.Name}} - {{Record.SerialNumber}}` * Set **Header Icon Name** to `standard:asset_object` {% endstep %} {% step %} #### **Display as Card** for a professional presentation {% endstep %} {% step %} #### **Save and test QR code scanning** * Save and activate the page. {% endstep %} {% endstepper %} **Result**: Professional asset QR codes that link directly to asset records when scanned, complete with asset information in the header. ### Example 2: Event Check-in Code {% @arcade/embed url="" flowId="reimTiuPDPRTMEsfKrCr" %} **Scenario**: Create compact event tickets with attendee-specific codes for mobile scanning at registration. **Prerequisites**: This example assumes you have created a custom Event Attendee object (`Event_Attendee__c`) with custom fields including `Event__c` (lookup to Event), `Attendee_Name__c` (text field for attendee names), and appropriate Lightning record pages **Steps** {% stepper %} {% step %} #### Open Lightning App Builder and edit your Event Attendee record page {% endstep %} {% step %} #### Add the Barcode component to your ticket section {% endstep %} {% step %} #### Configure the check-in code * Set **Value** to `EVENT-{{Record.Event__c}}-ATT-{{Record.Id}}` * Set **Type** to `code128` (traditional barcode format) * Check **Hide Value** for clean ticket appearance {% endstep %} {% step %} #### Configure compact sizing * Set **Width** to `300px` * Set **Height** to `80px` * Set **Background Color** to `#f8f9fa` * Set **Color** to `#000000` {% endstep %} {% step %} #### Configure event header * Set **Header Title** to `Check-in Code` * Set **Header Caption** to `{{Record.Attendee_Name__c}}` * Set **Header Icon Name** to `standard:event` {% endstep %} {% step %} #### Check **Display as Card** for ticket-style presentation {% endstep %} {% step %} #### Save and verify barcode readability {% endstep %} {% endstepper %} **Result**: Clean, scannable event check-in codes with attendee information, perfect for mobile registration workflows. *** ## Key Considerations * **Content Strategy:** Use meaningful, scannable values that include record IDs or unique identifiers for tracking; mind URL length and complexity in QR codes. * **Visual Design:** Choose a barcode type suited to your scanning devices, with strong color/background contrast and sizing appropriate to the viewing distance. * **User Experience:** Add header titles and captions for context, and include human-readable text when users need to reference the value manually. * **Performance:** Avoid excessively long values that create complex barcodes; test generation with dynamic values and verify readability across screen sizes. *** ## Troubleshooting Common Issues * **Barcode Not Generating:** Verify the Value field has valid, non-empty data and that `{{Record.FieldName}}` references point to existing fields users can view. * **Scanning Issues:** Increase size for mobile or distance scanning, ensure sufficient Color/Background contrast, and try a different barcode type if reads are unreliable. * **Display Problems:** Check Width/Height use valid CSS units and colors use valid formats; test responsive behavior across screen sizes. * **Dynamic Content Issues:** Confirm referenced fields contain data, API names are spelled correctly, and users have read permission on those fields. * **Styling Inconsistencies:** Use Display as Card for consistent treatment and verify color choices work with your Lightning page theme. --- # 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/app-builder-components/app-builder-components/ax-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.