LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page

Last updated 2 years ago

Overview

scan-barcode launches the barcode scanner which opens a camera view with which app users can scan codes.

Version and device compatibility

  • scan-barcode is supported in all versions of the JourneyApps Container and Runtime.

  • It is supported on Android and iOS devices.

  • It received several visual and functional updates in version 4.80.0 of the JourneyApps Runtime.

Programmatically trigger the barcode scanner

The barcode scanner can be triggered programmatically using journey.hardware.scanBarcode(). See more details .

Basic Example

Standard Attributes

bind

label

required

Advanced Attributes

align-content

Version compatibility

align-content was introduced in version 4.81.0 of the JourneyApps Runtime.

align-label

allow-manual-entry

Optional

Type: boolean

Default: true

Version compatibility

allow-manual-entry was introduced in version 4.81.0 of the JourneyApps Runtime.

On unsupported devices, a text input dialog will display for users to manually enter the data. This dialog can be skipped by setting allow-manual-entry to false.

color

Optional

Type: string- can be a named color or #HEX value

Default: primary

Button text color

When using named colors (i.e. primary, secondary, positive, negative, etc) the corresponding named _text color will be used as the button's text color.

For example, this button:

<button label="My button" color="secondary" on-press="$:doSomething()"/>

Will use the theme's secondary_text named color for the button text.

When using a #HEX value, a high contrasting color will automatically be selected for the button's text color.

disabled

disabled-message

Optional

Default: unset

When the disabled attribute is set to true the component will display the bound state and direct interactions blocked. The component will appear greyed-out. A message will display indicating the message specified.

extensions

Optional

Type: EAN_2, EAN_5

Comma-separated list of barcode type extensions.

Platform compatibility

extensions are currently only supported on Android.

icon

Optional

Type: string

Default: Barcode Scanner Icon

Version compatibility

icon was introduced in version 4.81.0 of the JourneyApps Runtime.

icon-color

Optional

Type: string

Specify the color of the button's icon. The icon-color attribute can be a named text-color or #HEX value.

When using icon-color with image assets, a color mask will be applied to the icon will remove any color variation in the image.

icon-position

id

label-case

Version compatibility

label-case was introduced in version 4.81.0 of the JourneyApps Runtime.

label-color

on-change and on-scan

on-scan is functionally similar to on-change, however only the current $value is being passed as an event parameter.

prompt

Optional

Type: string

Default: unset

Prompt text to display on the barcode scanning screen. Message will also display on the manual fallback dialog.

show-if and hide-if

style

Optional

Type: solid | outline

Default: solid

The scan-barcode button style conveys importance of a button to the user, and can be set to solid or outline.

text-color

Version compatibility

text-color was introduced in version 4.81.0 of the JourneyApps Runtime.

Optional

Type: string - can be a named color or #HEX value

Specify the color of the scan-barcode button's label.

types

Optional

Comma-separated list of barcode types to attempt to scan.

scan-barcode on RealWear devices

By default scan-barcode will open JourneyApps' built-in barcode scanner on RealWear devices. With container version 22.7.2 or greater, it is possible to launch RealWear's native barcode scanner for certain barcode types (which comes with improved UI and voice control). This can be achieved by limiting the list of types to types that are supported by RealWear's barcode scanner. Supported types are:

  • CODE_128

  • EAN_8

  • EAN_13

  • UPC_A

  • QR_CODE

  • DATA_MATRIX

Supported Barcode Formats

Component Methods

scanBarcode

Programmatically opens the barcode scanner to allow the user to capture a barcode bound to the scan-barcode component.

scrollIntoView

Programmatically scroll until the scan-barcode component is visible in the view.

The main color of the scan-barcode button: Background color of a button; border and text color of an button.

To override the button's text color, set the attribute.

Type: string (static text, a or the return value of a )

The icon to display on the button, it will be placed on the left of the label by default. The icon can be a , an or an icon or image asset.

Default: the component's

Default: If the button's is a named color, its text color defaults to the _text counterpart of the named color. If the button's is a #HEX value, its text color defaults to a high contrasting color.

Android
iOS

The following component methods are available when an is assigned to the component and component.scanBarcode({id:'my-id'}) is called from JS/TS:

<scan-barcode label="Scan QR code" color="$:getColor()" />
function getColor() {
    return "#ffab00";
}
<var name="product" type="text"/>

<scan-barcode bind="product" extensions="EAN_2,EAN_5" />
<scan-barcode label="Scan the Product's Barcode" style="outline"  />
<scan-barcode label="Scan the Product's Barcode" text-color="#ffff00" />
<var name="product_code" type="text"/>

<scan-barcode bind="product_code" types="QR_CODE,UPC_A,UPC_E" />

Product barcodes:

UPC_A, UPC_E, EAN_8, EAN_13, RSS_14 (all variants), RSS_EXPANDED (most variants).

UPC_A, UPC_E, EAN_8, EAN_13

Other 1D barcodes:

CODE_39, CODE_93, CODE_128, ITF, CODABAR

CODE_39, CODE_128

2D barcodes:

QR_CODE, DATA_MATRIX, AZTEC (beta quality), PDF_417

QR_CODE, DATA_MATRIX

  1. 💻Build your App
  2. UI Components
  3. All UI Components

scan-barcode

PreviousGuide: PowerBI EmbeddingNextshortcut
  • Overview
  • Basic Example
  • Standard Attributes
  • bind
  • label
  • required
  • Advanced Attributes
  • align-content
  • align-label
  • allow-manual-entry
  • color
  • disabled
  • disabled-message
  • extensions
  • icon
  • icon-color
  • icon-position
  • id
  • label-case
  • label-color
  • on-change and on-scan
  • prompt
  • show-if and hide-if
  • style
  • text-color
  • types
  • Component Methods
  • scanBarcode
  • scrollIntoView
bind
label
required
align-content
align-label
solid
outline
text-color
disabled
format string
JS/TS function
Font Awesome icon
Ionicons icon
text-color
icon-position
id
label-case
label-color
on-change
show-if
hide-if
color
color
id
main.view.xml
<var name="product_barcode" type="text" />

<scan-barcode bind="product_barcode" label="Scan the Product's Barcode" />
here