Create a canvas app with the barcode reader control

The barcode reader control in Power Apps lets you use your phone or mobile device to scan barcodes from various formats.

Some of the common uses of barcode reader control in a canvas app are:

  • An app to check in items like books into a collection
  • An inventory management app that uses barcode to identify items
  • An employee app to check in and badge scanning for security

In this article, we'll create a canvas app with barcode reader and display scanned items in a gallery.

Watch this video to learn how to create an app with barcode reader:

Prerequisites

Open a blank app

Create a blank canvas app.

Add barcode scanner

  1. From the left-pane, select Screen1.

  2. From the left-pane, select + Insert > expand Media > select Barcode reader control.

     Select barcode reader

  3. From the properties list on the right-side of the screen, select Advanced tab, and then select the OnScan property.

    OnScan property

  4. Set the OnScan property of the Barcode scanner control to this expression by typing or pasting it in the formula bar.

    Collect(
        colScannedItems,
        {ScannedItem: First(BarcodeReader1.Barcodes).Value, ScannedTime: Now()}
    )
    
  5. From the Properties pane, set X property to "180" and the Y property to "1005".

    X and y properties

  1. Select + Insert > expand Layout > select Vertical gallery control.

    Gallery types select Vertical

  2. From the properties pane, select the layout for the gallery as Title and subtitle.

    Select Title and subtitle

  3. Select the gallery control on canvas.

  4. Set the Items property of the gallery control to this expression by typing or pasting it in the formula bar.

    colScannedItems
    

    Items property of the Gallery control

  5. In the left-pane, expand the Gallery1, and select Title2.

    Left navigation bar select Title2

  6. Set the Text property of Title2 to the following expression.

    ThisItem.ScannedItem
    

    Text property of the Label control

  7. Select Subtitle2 label, and set it's Text property to this expression.

    ThisItem.ScannedTime
    

    Set the Text property of the Label control

Try the app

  1. To test the app, select Screen1, and then press F5 on the keyboard.

  2. After testing, save and publish the app.

  3. Download Power Apps Mobile on your phone.

  4. Open the Power Apps app, and sign in.

  5. Select and open the barcode reader app.

    Launch your Barcode Reader application

  6. Select Scan, and scan any barcode label (for example, barcode label on a book).

Final Results

You'll see the scanned barcode information is saved inside the app.

Final Results

See also

Barcode scanner control in Power Apps