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.
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
Value
String
—
Yes
The data or text string to encode and display as a barcode or QR code. Example: https://company.com/product/12345 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
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
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
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
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.
Last updated
Was this helpful?