Mobile Frontend with QR Code Scanning for Site/Location/Asset-Linked Ticket Creation
- Dominant language
- Vue
- Stars
- 3.4k
- Forks
- 945
- Avg merge
- 18h 40m
- Merged PRs (30d)
- 37
Description
### Is your feature request related to a problem? Please describe.
Currently, there is no mobile-optimised way for end users (particularly field workers, facility managers, or building occupants) to raise a helpdesk ticket that is automatically linked to a specific physical location or asset. Users must manually type site names, asset IDs, or location details when submitting tickets - this is slow, error-prone, and often results in tickets with incomplete or incorrect location/asset information. For organisations managing multiple sites or large asset registers, this makes triage and routing significantly harder.
The existing portal/guest view does not support camera-based input or QR code scanning, meaning there is no bridge between physical assets in the field and the digital ticketing workflow.
### Describe the solution you'd like
A mobile-responsive portal page (or enhancement to the existing guest/customer portal) that supports QR code scanning via the device camera, with the following behaviour:
- QR Code Scan Trigger - A prominent "Scan QR Code" button on the ticket creation screen that activates the device camera (using a library such as html5-qrcode or the native BarcodeDetector API where supported).
- QR Payload Parsing - The scanned QR code contains a structured payload (e.g., a URL like https://helpdesk.example.com/new?site=SITE-001&asset=ASSET-042, or a JSON-encoded string) that resolves to one or more Helpdesk Ticket fields:
-
- Site / Location (mapped to a custom field or existing location reference)
- Asset Tag / Asset ID (mapped to a custom field)
- Category (optionally pre-filled based on asset type)
-
-
- Auto-Population of Ticket Fields - After a successful scan, the relevant fields on the ticket creation form are pre-filled automatically. The user then only needs to describe the issue (free text + optional photo attachment) and submit.
- Fallback for Manual Entry - If the camera is unavailable or the QR code is damaged, users should be able to manually enter the site/asset code.
- Mobile-First UX - The interface should be optimised for mobile viewports (large tap targets, minimal scrolling, camera permission prompts handled gracefully).
### Describe the alternatives you've considered
- External QR scanner apps redirecting via URL - Users scan a QR code with their phone's native camera, which opens a pre-filled helpdesk URL. This works but relies on the user having a compatible camera app and provides no in-app experience or validation. It also doesn't handle authentication or custom field mapping cleanly.
- Custom Frappe web form with client script - Building a standalone Frappe Web Form with a client-side QR scanning library injected via Custom HTML. This is workable but fragile, not integrated with the Helpdesk module's portal UX, and requires per-installation maintenance.
- Third-party asset management integration - Using an external CMMS or asset management tool (e.g., Urbanise, Asset Panda) with its own QR/barcode scanning, then syncing tickets into Frappe Helpdesk via API. This adds cost, complexity, and another system to maintain.
- NFC tags instead of QR codes - NFC tap-to-create-ticket. While technically elegant, NFC has limited range of supported devices and requires more specialised hardware for tagging. QR codes are cheaper, universally readable, and printable on any label printer.
### Additional context
- Use case: Facilities management across multiple buildings/sites - occupants or contractors scan a QR code affixed to a room, piece of equipment, or building entrance to report faults. The ticket arrives pre-tagged with the correct site and asset, enabling automated routing to the right team.
- QR code generation: Ideally, Frappe Helpdesk (or a companion app/doctype) would also provide a simple QR code generation utility so administrators can print labels for their sites/assets. A bulk print function (e.g., generate QR labels for all assets in a list) would be highly valuable.
- Libraries: [html5-qrcode](https://github.com/mebjas/html5-qrcode) is a mature, MIT-licensed library that handles camera permissions, multiple camera selection, and decoding across iOS/Android browsers. It would integrate well with the Vue.js frontend.
- Relevance to Frappe ecosystem: This feature would also benefit ERPNext users who use the Helpdesk module alongside Asset Management, as asset QR codes are already generated in ERPNext's Asset doctype - linking those directly to helpdesk ticket creation would close a significant workflow gap.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the existing guest/customer portal ticket-creation entry point in the Vue.js frontend and review how ticket fields, custom fields, and attachments are represented. Compare html5-qrcode with the native BarcodeDetector API, including camera permissions and manual fallback. Done means a mobile-friendly flow can scan or enter a code, prefill the described fields, and submit a correctly linked ticket.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, mobile-dev, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100