Perspective - Barcode
Component Palette Icon:
Description​
The Barcode component enables you to display text as a barcode. The component supports 105 different barcode types including Code 128, QR code, EAN-8, and ISBN.
Properties​
Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.
| Name | Description | Property Type |
|---|---|---|
| value | Value to be encoded as a barcode. | value: numeric |
| type | What barcode specification to use, currently there are 105 formats supported including Code 128, QR code, EAN-8, and ISBN. Click here to see the barcode specification options. | value: string |
| displayValue | If true, the barcode's value will be displayed as text. | value: boolean |
| valuePosition | If displayValue is true, this property determines where the value should be displayed. Options are top or bottom; default is bottom. | value: string |
| valueStyle | Sets a style for the display value for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
| errorStyle | Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
| style | Sets an overall style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
Barcode Specification Options​
| A-B | C | D | E-G |
|---|---|---|---|
| auspost azteccode azteccodecompact aztecrune bc412 | channelcode, codablockf, code11 code128 code16k code2of5 code32 code39 code39ext code49 code93 code93ext codeone coop2of5 | daft databarexpanded databarexpandedcomposite databarexpandedstacked databarexpandedstackedcomposite databarlimited databarlimitedcomposite databaromni databaromnicomposite databarstacked databarstackedcomposite databarstackedomni databarstackedomnicomposite databartruncated databaretruncstedcomposite datalogic2of5 datamatrix datamatrixrectangular datamatrixrectangularextension dotcode | ean13 ean13composite ean14 ean2 ean5 ean8 ean8composite flattermarken gs1-128 GS1-128 gs1-128composite gs1-cc gs1datamatrix gs1datamatrixrectangular gs1northamericancoupon gs1qrcode |
| H-J | K-P | Q-Z |
|---|---|---|
| hanxin hibcazteccode hibccodeablockf hibccode128 hibccode39 hibcdatamatrix hibcdatamatrixrectangular hibcmicropdf417 hibcpdf417 hibcqrcode iata2of5 identcode industrial2of5 interleaved2of5 isbn ismn issn itf14 japanpost | kix leitcode mailmark matrix2of5 maxicode micropdf417 microqrcode msi onecode pdf417 pdf417compact pharmacode pharmacode2 planet plessey posicode postnet pzn | qrcode rationalizedCodabar raw royalmail sscc18 symbol telepen telepennumeric ultracode upca upcacomposite upce upcecomposite |
Component Events​
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.
Examples​
Example 1​
| Property | Value |
|---|---|
| props.value | 014113910613 |
| props.type | upca |
| props.displayValue | true |
| props.valuePosition | bottom |
| props.valueStyle.fontFamily | Verdana |
| props.valueStyle.fontSize | 18px |
Example 2​
| Property | Value |
|---|---|
| props.value | http://inductiveautomation.com |
| props.type | qrcode |
| props.displayValue | true |
| props.valuePosition | top |
| props.valueStyle.color | #2747C7 |
| props.valueStyle.fontFamily | sans-serif |
| props.valueStyle.fontSize | 14px |
| props.valueStyle.fontWeight | bold |
| props.style.paddingTop | 12px |
| props.style.borderColor | D97700 |