Generate barcode with Web API

We describe how to generate barcoded images in Salesforce using RayBarcode’s Web API (REST API). Using the Web API, you can get barcodes as PNG or SVG images. The generated barcode image can be displayed using HTML IMG tag etc. You can save the generated barcode image to a record or embed it in PDF.

Using the web API takes more steps than using a Visualforce page or Lightning app. Instead, it allows finer control and coordination with other applications.

The picture above can be enlarged by clicking (tap).

You can use the web API in Salesforce Classic or Lightning Experience.

Premise

The following knowledge is required.

  • Apex development or JavaScript development
  • Visualforce page development

Usage procedure

The steps to generate a barcode on Salesforce using the web API are as follows:

  1. Generate an access token.
  2. Read barcode image from access token and URL.

Because access tokens have an expiration priod, you must generate an access token each time you generate a barcode.

You can use the HTML IMG tag or the Visualforceapex: image tag to display the generated barcode on a web page.

Access token generation.

You need to generate an access token to use the web API. Access token is generated by Apex’s UpdateAccessToken method of gcbc: GcBarcodeGlobalAccessTokenGenerator class.

Example usage in Apex code

gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();

JavaScript usage example

{!requireScript("/soap/ajax/29.0/connection.js")}
{!requireScript("/soap/ajax/29.0/apex.js")}
sforce.connection.sessionId = "{!$Api.Session_ID}";
sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
    onSuccess: function(){window.location.reload();},
    onFailure: function(error) {alert(error);}
});

If you want to generate an access token in JavaScript, execute Salesforce’s Apex in AJAX (sforce.apex.execute) in your Salesforce organization. This operation consumes the number of API calls for that organization. You can check API usage within 24 hours from “System Overview” in “Setup” of Salesforce.

URL syntax

Specify parameters such as width, height and value following the following URL.

In the case of PNG format

https://gcbarcode.azurewebsites.net/api/png/[BarcodeType]?

In the case of SVG format

https://gcbarcode.azurewebsites.net/api/svg/[BarcodeType]?

Specify the type of barcode to be generated in [BarcodeType]. Please refer to Barcode type for available barcode types. For example, in the case of QR code, it is as follows.

https://gcbarcode.azurewebsites.net/api/png/qrcode?

Specify parameters after the “?” Of the URL. The parameters to be specified are as follows. The check marks （✔） in the following table indicate that they are required.

Parameter Required Description
height ✔ Specifies the height of the barcode image in pixels. The height of the barcode image that is actually generated is determined to a value close to the height based on the specified barcode standard.
width ✔ Specifies the width of the barcode image in pixels. The width of the barcode image that is actually generated is determined to a value close to the width based on the specified barcode standard.
token ✔ Specifies the access token used for authentication. Specify custom setting gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c. Notice that there are two underscores each.
value ✔ Specifies the barcode value. The specified value must be URL encoded in UTF-8 format. For example, “こんにちは” is “%e3%81%93%e3%82%93%e3%81%ab%e3%81%a1%e3%81%af” and “https://www.Salesforce.com” is “https%3a%2f%2fwww%2eSalesforce%2ecom”.
options Specifies additional options specific to barcode type. See “Barcode Options”.

The description example is as follows.

https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token=$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c

RayBarcode does not set a limit on the length of the URL. The upper limit of the URL length depends on the specification of the browser used by the user for the call. Keep in mind that Internet Explorer and Microsoft Edge may reach the upper limit in a shorter length than Google Chrome.

Reference : Maximum URL length is 2,083 characters in Internet Explorer (Microsoft)

Visualforce page and JavaScript example

It is as follows when using the IMG tag of HTML.

<!-- RayBarcode Sample code -->
<!-- gcbarcode_sample_webapi_1.vfp -->
<apex:page>         
    <script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        // Set session ID securely
        sforce.connection.sessionId = "{!$Api.Session_ID}";
        // Calling RayBarcode's Apex Class with Apex in AJAX
        sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
            onSuccess: function(){},
            onFailure: function(error) {alert(error);}
        });
    </script>
    <!-- Display sample barcodes -->
    <img alt="Barcode image" id="qrcode" title="QR code" src="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>

IIf you use the apex: image tag instead of the IMG tag:

<!-- RayBarcode Sample code -->
<!-- gcbarcode_sample_webapi_2.vfp -->
<apex:page>         
    <script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        // Set session ID securely
        sforce.connection.sessionId = "{!$Api.Session_ID}";
        // Calling RayBarcode's Apex Class with Apex in AJAX
        sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
            onSuccess: function(){},
            onFailure: function(error) {alert(error);}
        });
    </script>
    <!-- Display sample barcodes -->
    <apex:image alt="Barcode image" id="qrcode" title="QR code" value="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>

Visualforce page and Apex usage

To display barcodes in custom controller Apex classes and Visualforce pages instead of JavaScript:

First, update the access token in the custom controller Apex class. You can not update the access token in the constructor. If you try to update in the constructor “DML currently not allowed” error will occur. Create a method and call it with the action attribute.

// RayBarcode Sample code
// GcBarcodeSampleWebApiPageController.cls
public class GcBarcodeSampleWebApiPageController {
    public void initialize () {
        gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();
    }
}

Next, create a Visualforce page that uses the custom controller Apex class you created. If you update the access token in the custom controller Apex class, you do not need to update the access token by JavaScript.

<!-- RayBarcode Sample code -->
<!-- gcbarcode_sample_webapi_3.vfp -->
<apex:page controller="GcBarcodeSampleWebApiPageController" action="{!Initialize}">
    <!-- Display sample barcodes -->
    <apex:image id="qrcode" alt="Barcode image" title="QR code" value="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>
Copyright © MESCIUS inc. All rights reserved.