Support

Support

How can we help you?

Docy

For Lightning Components

Estimated reading: 1 minute 27 views

METHOD 1:

There are three steps to display the barcode on your standard record detail page:
  1. Add a custom field into the object which you want to display the
  2. Create a visual force page to generate the
  3. Add the visual force page into the page layout.

Step1: Create a custom picklist field

Example: Barcode Type with the values listed below.

  1. code128
  2. code39
  3. ean13
  4. ean8
  5. qrcode
  6. pdf417

Step 2: Create a Visualforce Page.

Note: Please re-type the single and double quotes in the Visualforce page code.

Example: For custom controller or extension:

 

				
					<apex: sidebar="false" showHeader="false">
<apex:includeLightning />

<script>

var barvalue = '{!JSENCODE($currentPage.Parameters.Code)}'; var barType = '{!JSENCODE($currentPage.Parameters.Type)}';

if(barvalue == undefined || barvalue == '' || barvalue == null) barvalue = "AQXOLT";
if(barType == undefined || barType == '' || barType == null) barType = "code128";

if(barType == "code128" || barType == "code39" || barType == "ean8" || barType == "ean13"){

!$Lightning.use("BarcodeZone:TestBarcodeLightning", function() { console.log('after app upload');
!$Lightning.createComponent( "BarcodeZone:ACBarcodeZoneLightning",
{Value: barvalue, BrcdType: barType}, "Con",

function(cmp) { console.log("Component created!");
});
});
}
else if(barType == "qrcode" || barType == "pdf417"){

!$Lightning.use("BarcodeZone:Test2DBarcodeLightning", function() { console.log('after app upload');
!$Lightning.createComponent( "BarcodeZone:AC2DBarcodeZoneLightning",
{Value: barvalue, BrcdType: barType}, "Con",
function(cmp) { console.log("Component created!");
});
});
}

</script>
<div id="Con"></div>
</apex:page>

				
			

For e.g., our case, we create a new Visualforce Page and add the below code for standard controller:

				
					<apex:page standardController="Product2" sidebar="false" showHeader="false">
<apex:includeLightning />


<script>

var barvalue = '{!JSENCODE($currentPage.Parameters.Code)}'; var barType = '{!JSENCODE($currentPage.Parameters.Type)}';


if(barvalue == undefined || barvalue == '' || barvalue == null) barvalue = "{!JSENCODE(Product2.ProductCode)}";
if(barType == undefined || barType == '' || barType == null)
barType = "{!JSENCODE(Product2.BarcodeZone Barcode_Type c)}";

if(barType == "code128" || barType == "code39" || barType == "ean8" || barType == "ean13"){

!$Lightning.use("BarcodeZone:TestBarcodeLightning", function() { console.log('after app upload');
!$Lightning.createComponent( "BarcodeZone:ACBarcodeZoneLightning",
{Value: barvalue, BrcdType: barType}, "Con",
function(cmp) {
console.log("Component created!");
});
});
}
else if(barType == "qrcode" || barType == "pdf417"){

!$Lightning.use("BarcodeZone:Test2DBarcodeLightning", function() { console.log('after app upload');
!$Lightning.createComponent( "BarcodeZone:AC2DBarcodeZoneLightning",
{Value: barvalue, BrcdType: barType}, "Con",
function(cmp) {
console.log("Component created!");
});
});
}

</script>
<div id="Con"></div>
</apex:page>

				
			

Attribute Name

Attribute Type

Description

barvalue

String

Barcode value for which the barcode will be generated

barType

String

Type of the barcode to be generated

ILLUSTRATIONS 

  1. Select any Product from the Product list or create a new
  2. Enter the ‘Barcode Value’ to be generated and select the ‘Barcode Type’.

Example 1:

Barcode Value is “AQXOLT” and Barcode Type is “code39”.

Example 2:

Barcode Value is “AQXOLT” and Barcode Type is “code128”.

Example 3:

Barcode Value is “9780201734843” and Barcode Type is “ean13”.

Example 4:

Barcode Value is “83939399” and Barcode Type is “ean8”.

Example 5:

Barcode Value is “AQXOLT” and Barcode Type is “qrcode”.

Example 6:

Barcode Value is “83939399” and Barcode Type is “pdf417”.

 

 

 

Articles