Looking for the new OutSystems Now? Click here!
 Features > Scan Barcodes in Your Application
Scan Barcodes in Your Application
OutSystems Now provides a plugin called ScanBarcode. Use it to integrate the built-in barcode scanner of a device with your mobile application.
Imagine you have an application that lists all the products your company sells: 
This screen displays the products in a table. An onchange action bound to the search field keeps updating the table according to the search keyword that the user types.
You want to provide your users a quick and easy way to have access to detailed product information while shopping in the store. For that you decide to use the device camera to scan the product barcode, and fill the search field with the barcode number. If there is a single hit, you want to open the detail screen of that product.
To implement this, follow these steps:
1. Ensure that the OutSystems Now component of the Forge is installed. Learn how to install a component from the Forge;
2. In your application module, create a reference to the following elements of the OutSystemsNow module: ScanBarcode and IsUsingOutSystemsNowApp;
3. Add a button next to the search field on the screen, name it ScanButton. Set its label with the text “Scan a barcode”.
Set the Method property with ‘Navigate’.
As Destination set an External Site with the dynamic URL value of “#”. This means, the button will navigate to the top of the screen;
4. Add a ScanBarcode element next to the button. As arguments pass ScanButton.Id and SearchInput.Id;
5. Enclose the button and the ScanBarcode element in an If element. Set its condition to IsUsingOutSystemsNowApp().
This ensures that they are only available on the screen if the user runs the application from OutSystems Now;
6. In the Preparation action of the screen, make sure that the query searches by barcode as well. In our example we need to add the following to the filter: 
or Product.Barcode like "%" + Session.SearchKeyword + "%"
7. Add an aggregate to the onchange action of the search input field. Add the Product entity as Source of the aggregate. The filter of the query:
Product.Barcode like "%" + Session.SearchKeyword + "%"
This query returns a product if the search keyword is a valid barcode;
8. Add an If element to the action flow that navigates to the ProductDetail screen if the aggregate returns only one record.
After completing the above steps, we have the ‘Scan a barcode’ button in our application:
Tapping the ‘Scan a barcode’ button calls the built-in barcode reader of your device. After reading the barcode successfully, the application navigates to the product detail screen:
How does it work?
Tapping the button calls the barcode reader of the device. When the user scans a barcode, the application loads the scanned barcode number into the SearchInput field. Then the button executes the navigation defined in its properties. In our case it jumps to the top of the page as the “#” value in the URL property indicates. 
The button is there only to run the JavaScript that reads a barcode. Do not add any logic to that button, as it interferes with the execution of the JavaScript.
 To learn more about the Cordova plugin, check the plugin documentation and source code.
Click here to see your activities