Barcodes and QR codes bridge the physical and digital world. Scan one, and you reach a URL, document, or data record. The Avonni Barcode and QR Code flow screen components embed this mechanic into your Salesforce workflows—turning record fields into scannable codes without any backend work.

The Use Case

A common example: a sales rep opens an Account record in Salesforce and scans a QR code to pull up the latest contract or product spec. The code holds the record ID, URL, or any text field you map to it. No manual data entry. No context switching. The rep stays in Salesforce while the code routes them to the right place.

Both Barcode and QR Code components work the same way. QR codes are more flexible—they hold more data and scan faster on mobile. Barcodes are narrower visually and work well when space is tight.

How to Implement

Build a screen flow in Salesforce that generates and displays the code. The flow needs: (1) a Record ID input variable, (2) a Get Records query to fetch the record, (3) the Avonni Barcode or QR Code component mapped to a field value.

Step 1: Create Your Screen Flow

Start a new screen flow. This is the container where your code generation logic lives.

Step 2: Add a Record ID Variable

Create a Text variable to hold the record ID. This is your anchor—the flow uses it to find the right record and pull the field value for code generation.

Step 3: Query the Record

Add a Get Records action. Filter by the Record ID variable you just created. Retrieve the field you want to encode (like Account Name, Phone, Website URL, or custom field). This step loads the exact data your code will represent.

Step 4: Add the Barcode or QR Code Component

Drop the Avonni Barcode or QR Code component into your screen. Map its input attribute to the field you retrieved. The component reads that value and renders the code. Test with different field types—text, numbers, URLs all work.

Step 5: Deploy to a Record Page

Add the flow to a record page using the Lightning App Builder. When configuring the flow component, check "Pass record ID into the variable." The page will pass the current record ID automatically, so the flow runs in context—no manual input needed.

Result

Your record now renders as a scannable code. Users scan and act. No data re-entry. No ambiguity about which record the code represents. Both barcode and QR code components work this way—pick based on space and use case.