Barcode
Barcode report control supports integration of different types of barcodes to enable accurate scanning of sensitive information quickly and efficiently. ActiveReportsJS Designer supports rendering of 1D and 2D barcodes in the report using Barcode report control, which offers various barcode styles to choose from. You can bind it to data, caption locations, rotation, control the bar width, quiet zones, whether check sum is enabled, and many other properties. This saves you the time and expense of finding and integrating a separate component.
You can use an expression to bind the value of a field to the Barcode Value property. You can also access the Expression Editor from the context menu of the Barcode control.
The following table describes Barcode types that you can use in ActiveReportsJS reports.
Barcode | Symbology |
|---|---|
| ANSI 3 of 9: It uses upper case, numbers, - , * $ / + %. |
| ANSI Extended 3 of 9: It uses the complete ASCII character set. |
| Aztec: It supports all 255 ASCII characters (digits 0-9, text, binary data), the FNC1 (^1) symbol, and the Flag 7 (^7) symbol |
| Codabar: It uses A B C D + - : . / $ and numbers. |
| Code 128 A: It uses control characters, numbers, punctuation, and upper case. |
| Code 128 B: It uses punctuation, numbers, upper case and lower case. |
| Code 128 C: It uses only numbers. |
| Code 128 Auto: It uses the complete ASCII character set. |
| Code 93: It uses uppercase, % $ * / , + -, and numbers. |
| Interleaved 2 of 5: It uses only numbers. |
| Code 39: It uses numbers, % * $ /. , - +, and upper case. |
| Extended Code 39: It uses the complete ASCII character set. |
| Code 49: It is a 2D high-density stacked barcode containing two to eight rows of eight characters each, where each row has a start code and a stop code. It encodes the complete ASCII character set. |
| Extended Code 93: It uses the complete ASCII character set. |
| Data Matrix: It is a high density, 2D barcode with square modules arranged in a square or rectangular matrix pattern. |
| EAN-13: It uses only numbers (12 numbers and a check digit). The check digit is an additional digit used to verify that a barcode has been scanned correctly. It is added automatically when the CheckSum property is set to True. |
| EAN-8: It uses only numbers (7 numbers and a check digit). |
| GS-1 Data Matrix: It supports the ASCII characters that are described in ISO/IEC 646 Information technology - ISO 7-bit coded character set for information interchange. |
| GS1 QR Code: It is a subset of the QR Code. It is a 2D symbol that denotes the Extended Packaging URL for a trade item. It is processed to obtain one URL address associated with the trade item identified by GTIN. GS1 QR Code requires the mandatory association of the GTIN and Extended Packaging URL. It allows to encode GS1 System Application Identifiers (AI) into QR Code 2D barcodes. Limitation: Kanji, CN, JP and Korean characters. |
| ITF-14: It is used to mark cartons that contain goods with an EAN-13 code. One digit is added in front of the EAN-13 code to mark the packing variant. |
| Japanese Postal: It is the barcode used by the Japanese Postal system. It encodes alpha and numeric characters consisting of 18 digits including a 7-digit postal code number, optionally followed by block and house number information. The data to be encoded can include hyphens. |
| PDF417: It is a popular high-density 2D symbology that encodes up to 1108 bytes of information. This barcode consists of a stacked set of smaller barcodes. This symbology can encode up to 35 alphanumeric characters or 2,710 numeric characters. |
| QR Code: It is a 2D symbology that is capable of handling numeric, alphanumeric and byte data as well as Japanese kanji and kana characters. This symbology can encode up to 7,366 characters. This is the default barcode style. |
| RSS-14: It is a 14-digit Reduced Space Symbology that uses EAN.UCC item identification for point-of-sale omnidirectional scanning. The RSS family of barcodes is also known as GS1 DataBar. |
| RSS-14 Stacked: It uses the EAN.UCC information with Indicator digits stacked in two rows for a smaller width. |
| RSS-14 Stacked Omnidirectional: It uses the EAN.UCC information with omnidirectional scanning as in the RSS14, but stacked in two rows for a smaller width. |
| RSS-14 Truncated: It uses the EAN.UCC information as in the RSS14, but also includes Indicator digits of zero or one for use on small items not scanned at the point of sale. |
| RSS Limited: It uses the EAN.UCC information as in the RSS-14, but also includes Indicator digits of zero or one for use on small items not scanned at the point of sale. |
| UCC/EAN-128: It complies to GS1-128 standards, which uses a series of Application Identifiers to encode data. This barcode uses the complete ASCII character set. It also uses FNC1 character as the first character position. Using AI's, it encodes best before dates, batch numbers, weights, and more such attributes. It is also used in HIBC applications. |
| UPC-A: It uses only numbers (11 numbers and a check digit). |
| UPC-E0: It uses only numbers. Used for zero-compression UPC symbols. For the Caption property, you may enter either a six-digit UPC-E code or a complete 11-digit (includes code type, which must be zero) UPC-A code. If an 11-digit code is entered, the Barcode control will convert it to a six-digit UPC-E code, if possible. If it is not possible to convert from the 11-digit code to the six-digit code, nothing is displayed. |
| UPC-E1: It uses only numbers. Used typically for shelf labeling in the retail environment. The length of the input string for UPC-E1 is six numeric characters. |
Some properties of the Barcode control are described below. Note that you need to enable Advanced Properties Mode to view all properties.
Symbology
Type: Select the type of the barcode from the pre-defined list.
Connection (QR Code): Select whether to use the connection for the barcode. This property is not applicable to GS1QRCode barcode.
Connection Number (QR Code): Enter the connection number for the barcode. This property is not applicable to GS1QRCode barcode.
Version (QR Code): Enter the version of the QRCode barcode style.
Error Level (QR Code): Select the error correction level for the barcode from the drop-down list. The possible values are M, L, H or Q.
Mask (QR Code): Select the pattern for the barcode masking from the drop-down list.
Model (QR Code): Select the model for the QRCode barcode style from the drop-down list. The possible values are Model1 or Model2.
Encoding (QR Code): Select the barcode encoding from the drop-down list.
Grouping (Code 49): Select whether to use grouping for the Code49 barcode.
Group Number (Code 49): Enter a number between 0 and 8 for the barcode grouping.
Ecc Mode (Data Matrix): Select the Ecc mode from the drop-down list. The possible values are ECC000, ECC050, ECC080, ECC100, ECC140, or ECC200.
Structured Append (Data Matrix): Select whether the barcode symbol is part of the structured append symbols.
Structure Number (Data Matrix): Enter the structure number of the barcode symbol within the structured append symbols.
File Identifier (Data Matrix): Enter the file identifier of a related group of the structured append symbols. If you set the value to 0, the file identifier symbols are calculated automatically.
Supplement Value (EAN-13, EAN-8, UPC-A, UPC-E0, UPC-E1): Enter the expression to set the value of the barcode supplement.
Supplement Bar Height (EAN-13, EAN-8, UPC-A, UPC-E0, UPC-E1): Enter the bar height for the barcode supplement.
Supplement Spacing (EAN-13, EAN-8, UPC-A, UPC-E0, UPC-E1): Enter the spacing between the main and supplement barcodes.
Supplement Caption Location (EAN-13, EAN-8, UPC-A, UPC-E0, UPC-E1): Select the location for the supplement caption from the drop-down list. The possible values are None, Above or Below.
Columns (PDF417): Enter column numbers for the barcode.
Rows (PDF417): Enter row numbers for the barcode.
Error Correction Level (PDF417): Enter the error correction level for the barcode.
PDF417 Type (PDF417): Select the PDF417 barcode type form the drop-down list. The possible values are Normal or Simple.
Background
Color: Select a color to use for the background of the Barcode.
Border
Width: Enter a value in points to set the width of the border.
Style: Select a style for the border.
Color: Select a color to use for the border from Color Picker, Standard Colors, or Web Colors.
Text
Color: Select a color to use for the border from Color Picker, Standard Colors, or Web Colors.
Font Style: Apply a font style on the text. Note that if you chose a theme for Layout > Style, the text appears according to the selected theme. You can select the following styles:
Normal - Makes text appear in normal style.
Italic - Makes text appear italicized.
Format: Select one of the common numeric formats, provided in the list.
Appearance
Caption Location: Select the location for the caption from the drop-down list from the following options - None, Above, or Below.
Checksum: A checksum provides greater accuracy for many barcode symbologies.
Rotation: Select from the following options - None, Rotate90Degrees, Rotate180Degrees, or Rotate270Degrees.
Bar Height: Enter a value in inches (for example, .25in) for the height of the barcode.
Narrow Bar Width: This is a value defining the width of the narrowest part of the barcode. Before using an extremely small value for this width, ensure that the scanner can read it. This value is specified in Length units (for example, '10cm', '4mm', '1in').
NW Ratio: Enter a value to define the multiple of the ratio between the narrow and wide bars in symbologies that contain bars in only two widths. For example, if it is a 3 to 1 ratio, this value is 3. Commonly used values are 2, 2.5, 2.75, and 3.
Quiet Zone: A quiet zone is an area of blank space on either side of a barcode that tells the scanner where the symbology starts and stops.
Data
Invalid Barcode Text: Enter a message to display if the barcode contains invalid values (content, character, length).
Use Case
Let's say that we want to create a payment slip with a barcode. Such report will look as shown:
Drag-drop the List control onto the report’s designer, such that it contains all report controls that will be added in further steps.
Set the following properties of the List control to some suitable values, for example:
Border Style: Solid
Border Color: Red
Drag-drop two TextBox controls on the List data region and set their Value to
Payment FormandReceipt, respectively. These will be the headers of the payment slip sections.Drag-drop two Container controls, on the List data region and resize them so that the Container1 is the main payment form and occupies more space whereas the Container2 is smaller in size and marks the boundaries of the Receipt section.
Drag-drop the Line controls on the List data region and draw them to mark the boundaries of the main payment form and receipt sections.
Drag and drop the TextBox controls on the first Container control and set their Value property as follows:
TextBox3: Customer ID:
TextBox4: =Fields!CustomerID.Value
TextBox5: ="Postal Code: "+Fields!PostalCode.Value
TextBox6: ="Sales ID: "+Fields!SalesID.Value
TextBox7: ="Attention: "+Fields!LastName.Value
TextBox8: Receipt Date
Drag-drop the Barcode control on the bottom of the payment form section and set its properties as follows.
Value: =Fields!BarCode.Value (from Data Field)
Type: UCC/EAN-128
Caption Location: Below
Drag-drop the TextBox controls on the second Container control and set their Value properties as follows:
TextBox9: Last Name
TextBox10: =Fields!LastName.Value
TextBox11: Amount
TextBox12: =Fields!Price.Value
TextBox13: Signature
TextBox14: Date Stamp
Drag-drop more Line controls on both Container controls and use them to improve the report visual presentation.
Improve the appearance of report by resizing the controls and applying font style and alignment properties.
Preview.