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
Value
Text
Yes
The data to encode in the barcode. Supports {{Record.FieldName}} syntax for dynamic content.
{{Record.Asset_Code__c}}<br>https://company.com/product/{{Record.Id}}<br>ITEM-12345
Type
Picklist
No
Barcode format to generate. Options include QR Code, Code 128, Aztec Code, Data Matrix, and others.
qrcode (default), code128, azteccode, datamatrix
Width
Text
No
Width of the barcode in pixels or CSS units
200px, 100%, 15rem
Height
Text
No
Height of the barcode in pixels or CSS units
200px, auto, 10rem
Hide Value
Checkbox
No
Hides the human-readable text below the barcode
Checked for clean visual display
Background Color
Text
No
Background color of the barcode area using CSS color values
#FFFFFF, white, transparent
Color
Text
No
Color of the barcode bars or modules using CSS color values
#000000, black, #333333
Text Color
Text
No
Color of the human-readable value text using CSS color values
#000000, gray, #666666
Text Alignment
Picklist
No
Alignment of the human-readable text. Options: left, center, right
center (default), left, right
Header Title
Text
No
Main heading displayed above the barcode. Supports {{Record.FieldName}} syntax.
Asset Code<br>{{Record.Product_Name__c}}
Header Caption
Text
No
Subtitle displayed below the header title. Supports {{Record.FieldName}} syntax.
Scan for details<br>Serial: {{Record.Serial_Number__c}}
Header Icon Name
Text
No
Salesforce Lightning Design System (SLDS) icon name in format category:icon_name
utility:scan, standard:product, custom:barcode
Display as Card
Checkbox
No
Wraps the barcode in a styled card container for better visual presentation
Checked for dashboard placement
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.
Best Practices
Content Strategy
Use meaningful, scannable values that provide clear functionality
Include record IDs or unique identifiers for tracking and lookup purposes
Consider URL lengths and complexity when using web links in QR codes
Test barcode values with actual scanning devices before deployment
Visual Design
Choose barcode types appropriate for your scanning environment and devices
Use sufficient contrast between barcode color and background for reliable scanning
Size barcodes appropriately for viewing distance and scanning requirements
Consider mobile device capabilities when selecting barcode formats
User Experience
Provide clear context through header titles and captions about what the barcode does
Include human-readable text when users need to manually reference the value
Use card containers when barcodes need visual separation from surrounding content
Test barcode scanning with target devices and applications
Performance Considerations
Avoid excessively long values that create overly complex barcodes
Test barcode generation performance with dynamic values and large datasets
Consider caching implications when using frequently accessed dynamic content
Verify barcode readability across different screen sizes and resolutions
Troubleshooting
Barcode Not Generating
Verify the Value field contains valid, non-empty data
Check that dynamic references like
{{Record.FieldName}}point to existing fieldsEnsure the barcode type supports the content being encoded
Confirm users have permission to view the source field data
Scanning Issues
Increase barcode size if scanning from mobile devices or at distance
Ensure sufficient contrast between Color and Background Color settings
Test with different barcode types if current format isn't scanning reliably
Verify the encoded value format matches scanner expectations
Display Problems
Check Width and Height settings for reasonable values and valid CSS units
Verify color values use valid CSS color formats (hex, named colors, RGB)
Test responsive behavior on different screen sizes and orientations
Ensure Text Alignment setting works with your layout requirements
Dynamic Content Issues
Confirm the source record contains data in the referenced fields
Verify field API names are spelled correctly in dynamic references
Check that users have read permission on fields used in Value property
Test with records that have different data types and lengths
Styling Inconsistencies
Use the Display as Card option for consistent visual treatment
Verify color choices work well with your Lightning page theme
Test text alignment with various value lengths and container widths
Ensure header styling complements the overall page design
Summary
The Barcode component provides a flexible solution for generating scannable codes directly within Salesforce Lightning pages. With support for multiple barcode formats, extensive styling options, and dynamic content generation, it enables efficient workflows for asset tracking, event management, marketing campaigns, and operational processes. The component's integration with Salesforce data ensures that barcodes remain current and contextually relevant while providing users with quick access to information and functionality through scanning.
Last updated
Was this helpful?