ScanListener PCF Control

A Power Apps Component Framework (PCF) control for capturing keyboard-wedge barcode scanner input in Canvas Apps.

Features

• ✅ Captures barcode scanner input (keyboard-wedge scanners)
• ✅ Commits scan on Enter key
• ✅ Auto-focus to keep input ready
• ✅ Configurable max length
• ✅ Clear signal to reset buffer
• ✅ Scan counter for tracking

Properties

Input Properties

Property	Type	Default	Description
Enabled	Boolean	true	Enable/disable scanner input
AutoFocus	Boolean	true	Auto-focus hidden input to capture scans
MaxLength	Number	256	Maximum barcode length
ClearSignal	Number	0	Increment to clear the output

Output Properties

Property	Type	Description
sampleoutput	Text	The last scanned barcode value
scancount	Number	Total number of scans captured

Installation

Prerequisites

• Node.js (v18+)
• Power Platform CLI
• .NET SDK

Build from Source

# Clone the repo
git clone https://github.com/RogerHarr1/ScanListener.git
cd ScanListener

# Install dependencies
npm install

# Build the control
npm run build

# Build the solution package
cd Solutions
dotnet build /p:configuration=Release

The solution package will be at: Solutions/bin/Release/Solutions.zip

Import to Power Platform

1. Go to make.powerapps.com → Solutions
2. Click Import solution
3. Browse to Solutions/bin/Release/Solutions.zip
4. Click Next → Import

Usage in Canvas Apps

1. Enable Code Components

1. Open your Canvas app in Power Apps Studio
2. Go to Settings → Upcoming features → Experimental
3. Turn ON "Allow code component framework apps"

2. Add the Control

1. Click Insert → Get more components
2. Switch to the Code tab
3. Find ScanListener and click Import
4. Drag the control onto your screen

3. Example Power Fx

// Display the scanned barcode
Label.Text: ScanListener1.sampleoutput

// Show scan count
Label.Text: "Scans: " & ScanListener1.scancount

// Clear on button press (increment ClearSignal)
Button.OnSelect: UpdateContext({varClear: varClear + 1})
ScanListener1.ClearSignal: varClear

4. Collect Scans to a Table

// OnChange of ScanListener1
If(
    !IsBlank(Self.sampleoutput),
    Collect(
        ScannedItems,
        {
            Barcode: Self.sampleoutput,
            ScannedAt: Now()
        }
    )
)

Tech Stack

Technology	Purpose
TypeScript	Control logic
PCF	Power Apps component framework
HTML DOM	Hidden input for keyboard capture
Webpack	Bundling
.NET SDK	Solution packaging

Project Structure

ScanListener/
├── ControlManifest.Input.xml   # Control manifest
├── index.ts                    # Main control logic
├── package.json                # Dependencies
├── tsconfig.json               # TypeScript config
├── pcfconfig.json              # PCF config
└── Solutions/                  # Solution packaging
    └── Solutions.cdsproj

Troubleshooting

Scanner not capturing input

• Ensure Enabled is true
• Ensure AutoFocus is true
• Click on the control area to focus it

Barcode getting cut off

• Increase MaxLength property

Need to clear between scans

• Increment ClearSignal to reset the buffer

License

MIT