# Generating and Displaying Barcodes for Product Codes

## Overview

This guide provides an in-depth exploration of utilizing the [QR Code component](/flow/flow-components/qr-code.md) within Salesforce. This component seamlessly transforms any field from a Salesforce record into a QR Code. Whether you want to represent textual information, URLs, or other data types, this component enables the easy creation of QR Codes within your Salesforce environment, offering a versatile way to share and access information quickly and efficiently. 

Following this tutorial will give you insights into configuring and implementing this component to meet your needs and enhance your interaction with data in Salesforce.

## Steps

### 1. Create your screen flow

<figure><img src="/files/On2pVZJvxAojqLf2TQAp" alt=""><figcaption></figcaption></figure>

### 2. Create the record ID variable

The Record ID variable serves as a unique identifier for any record in Salesforce. It's a critical piece that allows for precise record manipulation within our flow, ensuring that we interact with the correct record at any point in our process.

Here's how to do it:

{% @arcade/embed flowId="KlG912NS430OtpzSUOXz" url="<https://app.arcade.software/share/KlG912NS430OtpzSUOXz>" %}

### 3. Create the Get Records collection

A Get Records Collection, essentially, instructs our flow to retrieve a specific set of records from our Salesforce object. By creating this collection, we allow the flow to gather the relevant data needed for our operations based on specified conditions - in this case, the current Record ID.

Utilizing the Record ID variable, we've previously created, we can set a condition that lets the Get Records element fetch the necessary data associated with the current Record ID. This ensures we're working with accurate and relevant data corresponding to the specific record.

<figure><img src="/files/PK8YhDaJJ9A7h5kz5dBI" alt=""><figcaption></figcaption></figure>

### 4. Add your screen flow

<figure><img src="/files/td5MjiUmLht9bVPLMZFe" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/4oFZRB4D7TUaS3rpXQxi" alt=""><figcaption><p>Adding the Avonni QR Code component</p></figcaption></figure>

#### Mapping the current record ID value

Assigning the QR Code value involves designating a specific record field whose data will be used to create the QR Code. We can establish a link between the Avonni QR Code component and the chosen record field by leveraging the mapped attribute.

The mapped attribute essentially acts as a bridge, linking the QR Code generator to the relevant record field. When the current record ID is processed, the corresponding record field value is automatically used to generate a QR Code.

<figure><img src="/files/rL09Egj41LF4zDrAIbPJ" alt=""><figcaption><p>Configuring the value of the QR Code to fetch data from a field.</p></figcaption></figure>

### 5. Adding your flow on a record page

In setting up our flow within Salesforce, adding the flow to our record page via App Builder is a pivotal step. In this process, it's crucial to ensure that we select the correct flow we intend to display on the record page.

Another critical step is checking the box labeled "**pass record ID into the variable**". Enabling this option allows the record page to communicate with the flow, transferring the Record ID of the current record directly into our flow's Record ID variable. This ensures that our flow works with the correct record based on the page the user is viewing.

<figure><img src="/files/UpsEBj1b84XTUaZShud9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Having trouble with this tutorial**? [Contact Avonni support for help](/flow/help/support-and-troubleshooting.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/barcode/generating-and-displaying-barcodes-for-product-codes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.