Introduction

This article features the QR Code Scanner Plugin and sample app created by Mokxa Technologies, LLC. The QR Code Scanner plugin adds a QR code scanner form element to the Joget Form Builder. This element can be added to any form with a simple drag-and-drop. It is used to scan QR codes or barcodes and save data. This article will explore the functionality and capability of this plugin.

Key Features

• Support for various QR and barcode formats.
• Easy integration with Joget forms.
• Configure QR Code scanner size in ‘px’.
• Seamless data capture by instantly scanning QR / barcodes and auto-populate form fields. 
• Better workflow productivity in QR-applicable cases such as asset tracking, inventory management, employee check-ins, etc.
• Flexible to customize scanning behavior based on specific application needs.

Get Started

Prerequisites

• Joget DX 8 Community or Enterprise edition.

• Developer access to Joget with plugin management capabilities.

• A camera-enabled device for scanning.

Where to get the plugin

Plugins Available in the Bundle:

1. QR Code Scanner (Form Element)

To download this plugin, visit Joget Marketplace.

For any issues related to this plugin, visit the QR Code Scanner Plugin Github page.

How to install

In the Joget App Center, navigate to Settings > Manage Plugins > Upload Plugin and click Choose File.

How to use it

Once the plugin is uploaded on Joget. Create a form and drag and drop the QR Code Scanner form element from the Custom section of the Form Builder. 

 Configure Properties

1. There are three options and one parameter available in the UI Advanced Options.

   • Hide Element label: When selected, it will hide the label.

   • Show QR Code value after scan: When selected, it will show the value of the QR code after it scans.

   • Hide QR Code scanner on page load: When selected, a button with “Scan QR Code” will show instead of the camera at the front end when the form loads.

   • QR Code Scanner size (px): This property field will change the max width of the QR Code Scanner (Default Max Width is 650px, Height is automatically calculated.)

Expected Outcome

The QR Code Scanner in a form:

The QR Code Scanner in a form (with the Hide Element label selected).

The QR Code Scanner in a form (with the Hide QR Code scanner on page load selected).

The QR Code Scanner in a form after scanning a QR (with the Show QR Code value after scan selected).

Related Video Tutorial

Download Sample App

Download the demo app for QR Code Scanner Plugin:

• APP_qr_scanner_demo_app-v1.0.0.jwa

Credits

This plugin, sample app and documentation are created by Mokxa Technologies, LLC.