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

Displaying barcode in Salesforce lightning experience natively

Here we cover an easy way to display barcode in lightning experience 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 example, we are assuming that you have the app installed already. If not please go to Barcode and QR Code Generator and install.

Example - Displaying barcode using email field in lead

Here we will go through an example of displaying barcode using data from email field in lead records. 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 lead email field

Go to "Barcode Configs" tab that comes with the app and create a new record. Give it a name without spaces or special characters. Specify lead as object name and email as field name. You can leave other fields with default values. Then save the record. Please check below screenshot,

2) Add Barcode component to lead flexipage and activate

Once you have created a barcode config record, it is just matter of editing lead flexipage and adding "Barcode and QR Code Generator" component to the page.

First go to a lead record details page. Click Gear Icon and "Edit Page".

Drop "Barcode and QR Code Generator" component from left sidebar to the place you need. It will ask for a configName. Give the name of the record you created from step 1.

Click "Save" button on top right and finally click "Activation" on top right and assign the page as organization default (or based on your app or profile preferences).

Result

If you followed the steps correctly, you should see barcode when you go to any lead record 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
• Need to scan the barcode values to Salesforce as well? Check out the article here

Long-Running callout with continuation in Lightning

API callouts that take more than 5 seconds are called long-running callouts. Salesforce allows only 10 long-running callouts at a time in an environment. To avoid hitting this limit Salesforce provides continuation. This uses a callback mechanism and can be implemented in Visualforce or Aura.

Use cases

If you have an integration that is used by more than 10 concurrent users and the API can take more than 5 seconds to respond, you should consider using continuation.

Steps to Implement

STEP 1 :- Create a remote site setting/named credential corresponding to the API you want to access. You can find remote site settings under setup => remote site settings. To follow this example, create a remote site setting whitelisting the domain https://salesforcecodes.blogspot.com/

STEP 2 :- Create an apex class that has an AuraEnabled method and annotated as continuation=true. This method starts the continuation processing. Add a second method to process the result. It is processBlogResponse in our example.

STEP 3 :- Create an aura component and call the apex method annotated with continuation=true. Syntax to call continuation method from aura is similar to calling other apex methods from aura.

STEP 4 :- Create an aura app or flexi page to display your aura component with continuation. In this example I am creating a TestApp aura applicaiton. After this go to https://YOURDOMAINHERE.com/c/TestApp.app to see the application displaying blogs retrieved using continuation.