Barcode scan field

A text field with a Scan button that reads a barcode or QR code with the camera and shows the matching asset, or a hint when there is none.

Overview

A field for asset tags, stock codes and locations. People scan the code with the camera or type it; the card below shows the matching record with a check mark, or "No asset with tag …" when there is none. Typing works too, for damaged labels and for people who can't use the camera.

The Scan button is the barcode reader control, which opens the device camera and reads barcodes and QR codes. It works in the Power Apps mobile app and in Windows; in a browser it can't open the camera.

When to use

Checking or registering assets, stock and equipment in the field.
Finding a record from a label faster than by searching.

When not to use

Scanning many codes in a row: set ScanningMode to scan multiple and collect them in a list.
Apps used only in a browser on a computer.

Controls used

Control	Version
GroupContainer	`1.5.0`
Gallery	`2.15.0`
ModernText	`1.0.0`
ModernTextInput	`1.1.2`
BarcodeReader	`1.0.25`
ModernIcon	`1.1.1`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- BarcodeScanFieldRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =BarcodeScanFieldLabel.Height + BarcodeScanFieldRow.Height + If(BarcodeScanFieldResult.Visible, BarcodeScanFieldResult.Height, BarcodeScanFieldHelp.Height) + 2 * 8 + 32
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(440, Parent.Width)
    Children:
      - BarcodeScanFieldSource:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Assets"
            Height: =0
            Items: |
              =Table(
                  {Tag: "AST-0201", Name: "Fire extinguisher FE-12", Location: "Warehouse Ghent, hall B", Checked: Date(2026, 9, 18)},
                  {Tag: "AST-0204", Name: "Ladder L-204", Location: "Office Leuven, 2nd floor", Checked: Date(2026, 9, 2)},
                  {Tag: "AST-0310", Name: "Forklift FL-03", Location: "Warehouse Antwerp", Checked: Date(2026, 8, 27)},
                  {Tag: "AST-0412", Name: "First aid kit, canteen", Location: "Office Brussels", Checked: Date(2026, 10, 1)}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TabIndex: =0
            Visible: =false
      - BarcodeScanFieldLabel:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            FontWeight: =FontWeight.Semibold
            Height: =22
            LayoutMinHeight: =22
            PaddingBottom: =0
            PaddingLeft: =0
            PaddingTop: =0
            Size: =14
            Text: ="Asset tag"
            Wrap: =false
      - BarcodeScanFieldRow:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =40
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =40
            LayoutMinWidth: =120
          Children:
            - BarcodeScanFieldInput:
                Control: ModernTextInput@1.1.2
                Properties:
                  AccessibleLabel: ="Asset tag"
                  Default: =locBarcodeScanFieldValue
                  FillPortions: =1
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =120
                  OnChange: |
                    =UpdateContext({locBarcodeScanFieldValue: Self.Text})
                  Placeholder: ="Scan or type a tag"
                  Size: =14
            - BarcodeScanFieldScan:
                Control: BarcodeReader@1.0.25
                Properties:
                  BorderRadius: =4
                  FillColor: =App.Theme.Colors.Primary
                  FontSize: =10.5
                  FontWeight: =FontWeight.Semibold
                  Height: =40
                  HoverFillColor: =App.Theme.Colors.Darker20
                  LayoutMinHeight: =40
                  LayoutMinWidth: =88
                  OnScan: |
                    =With(
                        {scan: ParseJSON(JSON(Self.Barcodes))},
                        UpdateContext({locBarcodeScanFieldValue: IfError(Text(Index(Table(scan), 1).Value.Value), Text(scan.Value))})
                    )
                  PressedFillColor: =App.Theme.Colors.Darker30
                  TabIndex: =0
                  Text: ="Scan"
                  TextColor: =Color.White
                  Tooltip: ="Scan a barcode or QR code with the camera"
                  Width: =96
      - BarcodeScanFieldHelp:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =22
            LayoutMinHeight: =22
            PaddingBottom: =0
            PaddingLeft: =0
            PaddingTop: =0
            Size: =13
            Text: ="Point the camera at the label on the asset."
            Visible: =IsBlank(locBarcodeScanFieldValue)
            Wrap: =false
      - BarcodeScanFieldResult:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            Fill: |
              =If(
                  IsBlank(LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue)))),
                  ColorFade(App.Theme.Colors.Darker70, 95%),
                  App.Theme.Colors.Lighter80
              )
            FillPortions: =0
            Height: =64
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =12
            LayoutMinHeight: =64
            LayoutMinWidth: =120
            PaddingLeft: =12
            PaddingRight: =12
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            RadiusTopLeft: =10
            RadiusTopRight: =10
            Visible: =Not(IsBlank(locBarcodeScanFieldValue))
          Children:
            - BarcodeScanFieldResultIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: =If(IsBlank(LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue)))), "Not found", "Found")
                  Height: =24
                  Icon: =If(IsBlank(LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue)))), "Warning", "CheckmarkCircle")
                  IconColor: =If(IsBlank(LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue)))), ColorFade(App.Theme.Colors.Darker70, 35%), App.Theme.Colors.Primary)
                  LayoutMinHeight: =24
                  LayoutMinWidth: =24
                  Width: =24
            - BarcodeScanFieldResultText:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =44
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =0
                  LayoutMinHeight: =44
                  LayoutMinWidth: =80
                Children:
                  - BarcodeScanFieldName:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =22
                        LayoutMinHeight: =22
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingTop: =0
                        Size: =14
                        Text: |
                          =Coalesce(
                              LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue))).Name,
                              "No asset with tag " & Upper(Trim(locBarcodeScanFieldValue))
                          )
                        Wrap: =false
                  - BarcodeScanFieldDetails:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Color: =ColorFade(App.Theme.Colors.Darker70, 40%)
                        Height: =22
                        LayoutMinHeight: =22
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingTop: =0
                        Size: =13
                        Text: |
                          =With(
                              {a: LookUp(BarcodeScanFieldSource.AllItems, Tag = Upper(Trim(locBarcodeScanFieldValue)))},
                              If(IsBlank(a), "Check the tag or scan again.", a.Tag & " · " & a.Location & " · checked " & Text(a.Checked, "d mmm"))
                          )
                        Wrap: =false

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `BarcodeScanFieldSource`

The records to look up, with the columns Tag, Name, Location and Checked. For large tables, look up in the data source directly in the two result texts instead.

In the YAML

YAML

Items: |
  =Table(
      {Tag: "AST-0201", Name: "Fire extinguisher FE-12", Location: "Warehouse Ghent, hall B", Checked: Date(2026, 9, 18)},
      {Tag: "AST-0204", Name: "Ladder L-204", Location: "Office Leuven, 2nd floor", Checked: Date(2026, 9, 2)},
      {Tag: "AST-0310", Name: "Forklift FL-03", Location: "Warehouse Antwerp", Checked: Date(2026, 8, 27)},
      {Tag: "AST-0412", Name: "First aid kit, canteen", Location: "Office Brussels", Checked: Date(2026, 10, 1)}
  )

Your version

YAML

Items: =Assets

`OnScan` on `BarcodeScanFieldScan`

What happens after a scan. Keep the first part, which puts the code in the field; the example also remembers the asset for the next screen.

In the YAML

YAML

OnScan: |
  =With(
      {scan: ParseJSON(JSON(Self.Barcodes))},
      UpdateContext({locBarcodeScanFieldValue: IfError(Text(Index(Table(scan), 1).Value.Value), Text(scan.Value))})
  )

Your version

YAML

OnScan: |
  =With(
      {scan: ParseJSON(JSON(Self.Barcodes))},
      UpdateContext({locBarcodeScanFieldValue: IfError(Text(Index(Table(scan), 1).Value.Value), Text(scan.Value))})
  );
  Set(varAsset, LookUp(Assets, Tag = Upper(Trim(locBarcodeScanFieldValue))))

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, BarcodeScanFieldRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Barcode scan field

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on BarcodeScanFieldSource

OnScan on BarcodeScanFieldScan

How to paste

When Studio flags a control version

`Items` on `BarcodeScanFieldSource`

`OnScan` on `BarcodeScanFieldScan`