---
title: Generate Barcode on Page
slug: scan/generate-barcode-on-page
description: Generate barcodes directly on any Salesforce page with Unaric Scan for instant printing and tracking.
image: https://archbee-image-uploads.s3.amazonaws.com/10Nod6Ww95R3dPr0k0TCJ/n2re_IZ360lBo2dm8T8G3_unaric-scan.png
icon: {"faIcon":"fa-solid fa-barcode"}
docTags: 
createdAt: 2024-08-22T04:40:50.563Z
---

Salesforce administrators can create barcodes directly on Lightning pages for showing data on Salesforce. This component dynamically generates and displays barcodes or QR codes based on specified Salesforce field values or static text. It can be added to any Lightning page, making it ideal for various use cases where visual representation of data as a barcode is beneficial.

::Image[]{src="https://api.archbee.com/api/optimize/8U46cdD4FHoKekEMZZobD-YQnI5XLoijRbSX7EEZThk-20240823-235453.png" size="76" width="1692" height="625" position="center" darkWidth="1692" darkHeight="625" showCaption="false"}

Use cases include:

- Displaying QR codes on contact or account detail pages for quick mobile scanning
- Generating product barcodes on product detail pages
- Creating scannable event tickets or name badges
- Encoding record IDs for easy record access via Scan & Search

## Key features

- Supports both 1D (barcode) and 2D (QR code) symbologies
- Can encode field values from Salesforce records
- Allows for static text encoding
- Customizable size and appearance
- Supports over 100 different code types

## Setup

### 1. Add the component to a page

1. Enter the Lightning App Builder for your desired page.
2. Scroll to the bottom of the Components panel.
3. Locate **Barcode (1D) and mosaic (2D) code generator**.
4. Drag the component onto your page layout.

   ::Image[]{src="https://api.archbee.com/api/optimize/8U46cdD4FHoKekEMZZobD-Vvv5z9c-HhY9u5QkyesNe-20240823-234313.png" size="64" width="686" height="552" position="center" showCaption="false"}

### 2. Configure the component

Set the following attributes in the component properties:

::::VerticalSplit{layout="right"}
:::VerticalSplitItem
1. **Object + field API Name**:
   - Enter a valid field API name to use its value for encoding
   - Supports dot notation for related objects (e.g., *Contact.Account.Owner.Profile.Name*)
   - Leave empty to use the record ID (ensure Text Value is also empty)
2. **Text Value**:
   - Enter a static value to encode
   - If populated, this overrides the **Object + field API Name** setting
3. **Code type**:
   - Select the desired barcode symbology
   - Note: For compatibility with Scan component, use: *code128, code39, code93, datamatrix, ean13, ean8, itf, pdf417, qr, upce*
4. **Scale**:
   - Adjust to control the relative size of the displayed barcode
5. **Caption Position**:
   - Choose to display a caption at the *Top, Bottom*, or *Off.*
:::

:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/8U46cdD4FHoKekEMZZobD-4bnnvJ5ZMrpd2InyIcgjt-20240823-234721.png)
:::
::::

## Generate a barcode on a page

1. On Salesforce, go to **Setup > Lightning App Builder**.
2. Choice an existing lighthing page or create a new one.
3. On the Lighting App Builder editor search for the **Barcode (1D) and mosaic (2D) code generator** component and drag it onto your page
4. Configure the component attributes:
   - Object + field API Name: Specify the field to encode
   - Text Value: Enter a static value (if desired)
   - Code type: Choose the barcode symbology
   - Scale: Set the relative size of the barcode
5. Click the **Save** button to finish.

## Best practices

- Ensure the chosen code type supports the characters in your data
- Test the generated barcodes with your scanning devices to confirm readability
- Use appropriate field-level security to control who can see the generated barcodes
- Consider using the Set Component Visibility feature to dynamically show/hide the barcode based on user permissions or record data

## Limitations

- Some symbologies may not support all characters; choose a compatible format for your data
- The component is designed for display purposes and does not include built-in printing functionality
- Performance may be impacted if generating large or complex codes on pages with many components