Learn step by step how to use Kuika’s Barcode Input element to scan product barcodes with your device’s camera or a barcode scanner and quickly and accurately transfer the data to your app.
Kuika’s “Barcode Input” element allows users to enter data quickly and accurately by scanning barcodes. Barcodes are detected via the device’s camera or connected barcode scanners and automatically transferred to the input field. This reduces the need for manual data entry, shortens processing time, and improves data accuracy.
To use this element, first create your table on the screen from the “Tables” section in the “Data Sources” panel. Then, from the “Actions” section in the left panel, select “New SQL Action” to create an SQL query named “InsertMarketProducts.” Rewrite your table name as “dbo.”, click the test button, and then save it. Write your second query, the “GetMarketProductsByBarcode” action, and follow the same steps for this action in order. Add a “Label” element to your page from the “UI Design” section. In the “Style” section of the “Styling” panel, select “Heading 2” as the font style. Drag the second “Label” element below it and change the text inside to “Product Name.” Add another “Label” below that and use the “Formatter” to set the text format to “Money.” Drag the “Barcode Input” element onto your page below it. Then add a “Button” element and enter “Scan” as its text. Use “Add Action” on the “Button” element, select “onClick,” and then choose “Scan Barcode” from the “Device” section. Next, add the “GetMarketProductsByBarcode” action to the “Button” element. Define the “Scan Barcode” field as the “Barcode” parameter. Click the “Barcode Input” element and link the “Scan Barcode” action to the “Value” field. Set the “Value” field of the “Label” element where you wrote “Product Name” to “Product Name.” For the other “Label” element, set the value to “Price.” After setting these values, enter “0” for the third “Label” and “Product Name” for the second “Label” in the “Design Placeholder” field that appears below the “Value” field.
When the application is tested, clicking the “Scan” button opens the barcode scanning screen. When the user scans the barcode for the relevant product, the barcode value is automatically retrieved via the “Barcode Input” element.
