Scanner

📷 Scanner Component in Lowcoder

The Scanner component in Lowcoder enables applications to capture and process QR codes and barcodes directly through a device's camera. This functionality is essential for building interactive, real-time applications such as inventory systems, event check-ins, and secure access controls.

🔧 Key Features

• Camera Integration: Utilizes the device's camera to scan QR codes and barcodes.

• Real-Time Scanning: Processes codes instantly, providing immediate feedback.

• Event Handling: Triggers actions upon successful scans, such as data retrieval or navigation.

• Responsive Design: Adapts to various screen sizes and devices for optimal user experience.

🛠 Configuration Options

• Camera Selection: Choose between available cameras (e.g., front or rear) on the device.

• Scan Formats: Specify the types of codes to scan, such as QR codes or specific barcode standards.

• Styling: Customize the appearance, including dimensions and borders, to match your application's design.

• Event Handlers: Define actions to be executed upon successful scans, such as running queries or updating components.

⚙️ Integration Tips

• Data Binding: Bind the scanned data to other components or queries using Lowcoder's data binding syntax.

• Event Handling: Implement event handlers to perform actions like navigating to a different page or displaying additional information based on the scanned data.

• Error Handling: Incorporate error messages or fallback actions in case of scan failures or unsupported code formats.

Component Playground

On Component Playground, you can interact with the Dropdown component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Dropdown component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Dropdown component, we have shown how to use different properties of the Dropdown component. It also includes the Styling properties of the Dropdown component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Dropdown components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
data	Array	Returns the data of the Scanner component
disabled	Boolean	Returns True or False based on whether the Scanner component is disabled or not
hidden	Boolean	Returns True or False based on whether the Scanner component is hidden or not

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Click	Triggers, when a User clicks on the Scanner component
Success	Triggers, when the Scanner component successfully scans a QR code
Close	Triggers, when Scanner component closes

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setData() :

scanner1.setData(); method sets the Scanner component's Data property.

scanner1.setData(["https://www.google.com","https://www.facebook.com"]);

clearData() :

scanner1.clearData() clears the Scanner component's Data property and empties the Data from the Scanner component.

scanner1.clearData();

resetData() :

scanner1.resetData() method resets the Scanner component's Data property to the default Data of the Scanner component.

scanner1.resetData();

📌 Use Cases

• Inventory Management: Scan product barcodes to retrieve or update inventory information.

• Event Check-Ins: Validate attendee tickets by scanning QR codes at entry points.

• Secure Access: Authenticate users or grant access to restricted areas through code scanning.

• Product Information: Provide detailed product information by scanning codes on packaging.