Display barcode in Salesforce record detail view as a button

Here we cover an easy way to display QR code in Salesforce classic using a free appexchange app Barcode and QR Code Generator.

This app allows you to generate barcode in Salesforce without depending on any external services. In below step by step guide, we are assuming that you have installed the app already. If not please go to Barcode and QR Code Generator and install.

Example - Displaying QR code using custom field in custom object

Here we will go through an example of displaying QR code using data from a custom field. Here for demo purpose I have created a custom object with name Demo_Record__c. This object has a custom field with API name Unique_Field__c. This is just one example. Same approach will work for any other field in any custom/standard object in Salesforce.

1) Create a barcode config record for the custom object and field combination

Go to "Barcode Configs" tab that comes with the app and create a new record. Give it a name without spaces or special characters. I am giving it a name DemoUniqueFieldConfig. Specify Demo_Record__c as object name and Unique_Field__c as field name. Then in order to display QR code, I am selecting "QR Code" from "Barcode type" picklist/dropdown field. You can leave other fields with default values. Then save the record. Please check below screenshot,

2) Create a custom button to display QR Code in "Demo Record" page layout

Navigate to "Setup => Objects => Demo Record". Scroll down to "Buttons, Links, and Actions" section and create a new button.

Generally to display barcode in a new widow you can just redirect user to below URL pattern /apex/BarQR__BarcodeGeneratorPage?configName=YOUR_CONFIG_RECORD_NAME_HERE&recordId=RECORD_ID_HERE

We are doing the same here in the button. We are using the configuration record name DemoUniqueFieldConfig from Step 1 and passing recordId dynamically using {!Demo_Record__c.Id}.

Save your button code. At the end you can add the button to page layout under "Setup => Objects => Demo Record => Page Layouts => Edit". Check below screenshot.

Click save and navigate to a record details page. You will be able to see "QR Code" button in the page. When you click on the button, QR code will be displayed in a popup window using data from the field you configured.

Result

Example from Salesforce classic view.

Since our "QR Code" button is a custom button that redirects the user to a page with barcode, it will be available in lightning experience also. But in lightning Barcode/QR code will be more easily accessible if you add it through app builder page. Checkout example of adding barcode component directly in lightning app builder page

Use cases

Barcode generation and scanning can be used to improve a lot of business processes. Some examples are,

• Generate product barcodes and stick labels to products so that you can scan and add products to opportunity
• Generate QR code corresponding to your event registration custom object field(Id or registration number) and email users, so that you can scan in participants at the time of the event
• Stick a QR code in your outgoing shipments and incoming shipments and then scan it into Salesforce records so that you can track shippings end to end