How to Build a Barcode Reader App for Salesforce AppExchange

While using Salesforce, your management system can conveniently extend new functionalities by installing apps from Salesforce AppExchange – the Salesforce store. How can you build a Salesforce app by yourself? In this article, I will share how to create a barcode reader app for Salesforce from scratch.

Requirement

Dynamsoft JavaScript Barcode SDK

Setting Up Salesforce Environment

Before getting started to code, there are a few configuration steps required for your Salesforce account.

The first step is no doubt to create a Salesforce account.

Salesforce partner community

As you sign in Salesforce, you will see two different UIs, a classic UI and a lightning UI. It is easy to switch them whenever you want.

The next step is to connect an org of developer edition in Environment Hub, for you need to build apps with a developer account.

Environment hub

Getting the security token in My Settings is also an important step because it will be used when you want to connect different organizations in the Salesforce partner community.

Salesforce security token

Dev Tool Installation

To build Salesforce apps, developers can install Salesforce CLI and Visual Studio Code extensions.

CLI

Install the Salesforce Command Line Interface (CLI): https://developer.salesforce.com/tools/sfdxcli

sfdx command

Visual Studio Code Extension

Search for “salesforce pack” in Visual Studio Code and install relevant extensions.

Salesforce Visual Studio Code extension

Building a Salesforce App

In Visual Studio Code, press Ctrl+Shift+P and type in “sfdx: create project” to create a new project named BarcodeReader:

Salesforce create project

Find the project-scratch-def.json file and change the orgName according to your Salesforce account:

{
  "orgName": "Dynamsoft",
  "edition": "Developer",
  "features": [],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true
    },
    "securitySettings": {
      "passwordPolicies": {
        "enableSetPasswordInApi": true
      }
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

To deploy the local project to an org, you have to authorize the org beforehand.

authorize org

Once the authorization is done, you can see the deployment option is available in the context menu by right-clicking.

Salesforce source deployment

Visualforce Page

Let’s try to create a Visualforce page called DecodeFile via SFDX command.

Visualforce page

Afterward, the page file can be deployed to Salesforce and viewed online.

Visualforce page online

If you have successfully listed the Visualforce page, it is time to add the barcode decoding logic.

<apex:page >
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="LICENSE-KEY"></script>
</head>

<body>
    <h1>Dynamsoft JavaScript Barcode SDK</h1>
    <p></p>
    <div id="performance"></div>
    <input type="file" id="barcode-file" onchange="loadfile()" accept=".jpg,.jpeg,.png,.bmp" />
    <div>
        <img id='image' />
    </div>
    
    <script>
        var performanceReport = document.getElementById('performance');
        var barcodereader;
        (async () => {
            barcodereader = await Dynamsoft.BarcodeReader.createInstance();
            await barcodereader.updateRuntimeSettings('balance');
            let settings = await barcodereader.getRuntimeSettings();
            // settings.deblurLevel = 0;
            settings.expectedBarcodesCount = 20
            // settings.timeout = 500
            barcodereader.updateRuntimeSettings(settings);
        })();
        
        var ratio = 0.6;
        function loadfile() {
            let name = document.getElementById('barcode-file');
            var img = document.getElementById('image');

            var reader = new FileReader();
            reader.onload = function (evt) {
                img.onload = function () {
                    console.log(img.width, img.height);
                    // load image to canvas
                    var canvas = document.createElement('canvas');
                    if (img.width > 1000 || img.height > 1000) {
                        canvas.width = img.width * ratio;
                        canvas.height = img.height * ratio;
                    }
                    else {
                        canvas.width = img.width;
                        canvas.height = img.height;
                    }
                    var context = canvas.getContext('2d');
                    context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
                    var buffer = context.getImageData(0, 0, canvas.width, canvas.height).data;
                    let decoding_start = Date.now();
                    barcodereader
                        .decodeBuffer(
                            buffer,
                            canvas.width,
                            canvas.height,
                            canvas.width * 4,
                            Dynamsoft.EnumImagePixelFormat.IPF_ARGB_8888
                        )
                        .then((results) => {
                            let decoding_end = Date.now();
                            performanceReport.innerHTML = "File name: " + name.files[0].name + ", time cost: " + (decoding_end - decoding_start) + " ms <br>";
                            console.log("File name: " + name.files[0].name + ", time cost: " + (decoding_end - decoding_start) + " ms");
                            let txts = [];
                            try {
                                let localization;
                                for (var i = 0; i < results.length; ++i) {
                                    performanceReport.innerHTML += "Result: " + results[i].BarcodeText + " <br>"
                                    txts.push(results[i].BarcodeText);
                                }
                                let out = txts.join(', ');
                                if (txts.length > 0) {
                                    console.log(out);
                                }
                                else {
                                    performanceReport.innerHTML += 'No barcode found'
                                    console.log('No barcode found');
                                }
                            } catch (e) {
                            }
                        });
                };
                img.src = evt.target.result;
            };
            reader.readAsDataURL(name.files[0]);
        };
    </script>
</body>

</html>
</apex:page>

Note: To make the JavaScript barcode SDK work, you have to apply for a valid license from Dynamsoft online portal.

Save the changes and re-deploy the code. Here is the preview of the Visualforce page.

Salesforce barcode reader

It seems good so far. Likewise, you can create another Visualforce page for decoding barcodes from a camera video stream and deploy it to Salesforce.

Decode barcode from camera video stream within Salesforce window

Custom Tabs

Hopefully, you have implemented the two Visualforce pages without trouble. To use them within the Salesforce window, you can create corresponding custom Visualforce tabs.

Salesforce custom tab
new visualforce tab

Making an App

Since the custom tabs are ready, you can group them into an app that works as a unit to provide functionality.

Salesforce app

Salesforce app tabs

Creating a Package

Finally, you need to create a package with the app in order to publicly share the barcode decoding functionality to AppExchange.

Salesforce AppExchange package
Salesforce package app

Publishing Apps to Salesforce AppExchange

Now you can visit the Salesforce partner page to view the package. As long as you finish the business plan and pass the security review, you can submit your selected package to Salesforce AppExchange.

Salesforce package publishing

Source Code

https://github.com/yushulx/salesforce-barcode-reader