---
title: Customize Barcodes
slug: scan/customize-barcodes
description: Tailor Unaric Scan barcodes to support additional objects, change label sizes, or modify the displayed data in Salesforce.
createdAt: 2026-04-06T02:20:05.091Z
---

You can tailor the **Print Labels** feature to support additional objects, change label sizes, or modify the displayed data. The feature uses Visualforce pages (**PrintLabelsContact** and **PrintLabelsAsset**), which you can clone and edit without requiring Apex code or custom fields.

Examine the source code of Unaric Scan’s **PrintLabelsContact** and **PrintLabelsAsset Visualforce** pages. Since there is no Apex code or custom fields involved, you can clone directly without worrying about **global** keywords or having to add namespaces to fields.

The top part of the page contains the variables controlling the size, margins, code used:

```xml
<apex:variable var="pageSize" value="letter" />
<apex:variable var="pageMarginTop" value="0.845in" />

<apex:variable var="width" value="4in" />
<apex:variable var="height" value="1.33in" />
<apex:variable var="marginRight" value="0.1in" />

<apex:variable var="code" value="qrcode" />
<apex:variable var="codeWidth" value="1.13in" />
<apex:variable var="codeWHeight" value="1.13in" />
<apex:variable var="codePadding" value="0.1in" />

<apex:variable var="textWidth" value="2.5in" />
<apex:variable var="textHeight" value="1.13in" />
<apex:variable var="textPadding" value="0.1in" />
```

The bottom contains the layout and data to be printed on a single label or *card*:

```xml
<apex:repeat value="{!selected}" var="r">
	<div id="{!r.Id}" class="card">
		<div class="code">
			<canvas id="{!r.Id}" data-text="{!r.Id}">Please wait...</canvas>
		</div>
		<div class="text"><span><b>{!r.Name}</b>
				{!r.MailingStreet}
				{!r.MailingCity}
				{!r.MailingPostalCode}
				{!r.MailingState}</span></div>
	</div>
</apex:repeat>
```

## Support new objects

To adapt the feature for a different object:

1. Go to **Setup** > **Visualforce Pages**.
2. Locate **PrintLabelsContact** or **PrintLabelsAsset** and click **Clone**.
3. Name the cloned page and modify it as needed.
4. Edit the first line of the Visualforce page to reference your object. For example: `<apex:page standardController="YourObjectName" ...>`
5. Create a list view button:&#x20;
   1. Navigate to **Setup** > **Object Manager** > \[Your Object] > **Buttons, Links, and Actions**.
   2. Click **New Button or Link**.
   3. Set the label and name, select **List Button**, and enable **Display Checkboxes**.
   4. Choose **Visualforce Page** as the content source and select your cloned page.

      ![](https://api.archbee.com/api/optimize/10Nod6Ww95R3dPr0k0TCJ/v_8DvibHOvLJ7qzouNnpl_image.png)
6. Add the button to the layout:&#x20;
   1. Go to **Setup** > **Object Manager** > \[Your Object] > **Search Layouts for Salesforce Classic**.
   2. Edit the **List View** layout and add your new button.

      ![](https://api.archbee.com/api/optimize/10Nod6Ww95R3dPr0k0TCJ/8r0hO5Jg9WSG7LwI931kl_image.png)

For more details on Visualforce pages, refer to the [Salesforce Visualforce Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/).

## Change label type

To adjust the label size or paper type, modify the `apex:variable` variables at the top of the Visualforce page. For example:

```xml
<apex:variable var="pageSize" value="letter" />
<apex:variable var="pageMarginTop" value="0.845in" />
<apex:variable var="width" value="4in" />
<apex:variable var="height" value="1.33in" />
<apex:variable var="marginRight" value="0.1in" /x>
```

Update these values to match your label specifications. For Avery 7163 on A4 paper, set **pageSize** to *A4* and adjust dimensions accordingly. Avery 5162 comes as a 2x7 sheet with 4" x 1.33" Letter (8.5" x 11").

If you are implementing a new label, you will need to calculate dimensions. For example, **pageMarginTop** was calculated as *(11 - (7 \* 1.33)) / 2 = 0.845*.

## Change encoded data

To change the data encoded in QR codes or barcodes, update the data-text attribute in the \<canvas> tag within the Visualforce page. For example, the sample pages use different fields for **Contact** and **Asset**:

```xml
<!-- Contact -->
<canvas id="{!r.Id}" data-text="{!r.Id}">Please wait...</canvas>

<!-- Asset -->
<canvas id="{!r.Id}" data-text="{!r.SerialNumber}">Please wait...</canvas>
```

The `id` attribute `({!r.Id})` should remain unique to identify each canvas element. The data-text attribute determines what’s encoded and can be set to any field on the record, such as `{!r.Name}`, `{!r.Email}`, or a custom field like `{!r.Custom_Field__c}`.

Also, ensure the selected field’s data is compatible with the code type. For instance, numeric codes may not support text well. You can also use Salesforce formula expressions to handle special cases, such as:

```xml
{!BLANKVALUE(r.Email, r.Account.Email__c)}
```

This formula encodes the contact’s email if available, or the account’s email as a fallback. For more on formula syntax, see [Salesforce Formula Operators and Functions](https://help.salesforce.com/s/articleView?id=sf.customize_functions.htm).

## Change code type

To switch between QR codes and Code-128 barcodes, modify the code variable:

```xml
<apex:variable var="code" value="qrcode" />
```

Set it to *qrcode* for QR codes or *code128* for Code-128 barcodes. For changing dimensions, adjust **`codeWidth`** and **`codeHeight`**.

:::hint{type="info"}
QR codes can encode more data than Code-128 barcodes. Select a code type that supports your data’s length and character set. The minimum unit for barcodes or 2D codes is a 1px bar or square, but to improve readability, the default setting uses a scale: 2 parameter. You can experiment with this value if necessary, though it may affect scan reliability.
:::

## View label outlines for testing

To preview label boundaries in the browser, find this line in the Visualforce page:

```css
/*outline: 1px dashed; style for testing */
```

Uncomment it to:

```css
outline: 1px dashed;
```

This line will display dashed outlines around each label for layout verification. Comment it out again before final printing.

## Change the information layout

To adjust how information is displayed on the label, modify the content within the `<div>` tag with the class `card` in the Visualforce page. For example:

```xml
<div id="{!r.Id}" class="card">
    <!-- Content here -->
</div>
```

The sample pages demonstrate different layouts:

- **Contact sample**: Includes a clearly defined code area (e.g., QR code or barcode) and a text area with fields like `{!r.Name}`, \{!r.MailingStreet}, etc.
- **Asset sample**: Contains only a code area (e.g., \{!r.SerialNumber} encoded as a barcode), with no text area.

Tweak the content inside the `<div class="card">` tag to achieve your desired layout. For example, you could add or remove fields, adjust spacing, or change styling. Preview the changes in the browser to ensure the layout meets your needs. If you need assistance, contact customer support through the [Salesforce Help Portal](https://help.salesforce.com/).

## Advanced customizations

Options for additional flexibility include:

- **Print all records:** Replace `{!selected}` with `{!records}` in the Visualforce page to print all records in a list view without selecting checkboxes. This aligns with the `StandardSetController.getRecords` method, as opposed to `getSelected` for checked records.
- **Custom filters:** Add an Apex controller or extension to read parameters like `ApexPages.currentPage.getParameters()` or the filter ID with `ssc.getFilterId()`, then apply any filters you want. For guidance, see the [Salesforce Apex Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/).