# Bar Code

Bar code component allows you to dynamically display any value as a QR code.

## How to add a static Bar Code

Drag and drop Bar Code component onto page and fill it with any value, such as URL.

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

## Bar Code component settings

<figure><img src="/files/PU0CoWckCYFh0PnDqv1j" alt=""><figcaption><p>Bar code settings</p></figcaption></figure>

* Component name
* General tab
  * [Format](#bar-code-formats)
  * Value
  * "Display code text" toggle
  * Fill Color
  * Background color
* Display tab
  * Conditional visibility
  * Spacing

### Bar code formats

List of supported bar code formats:

* CODE128 auto
* CODE128 A
* CODE128 B
* CODE123 C
* EAN13
* EAN8
* EAN5
* EAN2
* UPC
* CODE39
* ITF14
* ITF
* MSI
* MSI10
* MSI11
* MSI1010
* MSI1110
* Pharmacode
* Codabar

## How to pass values to Bar Code component

You can [pass any value](/user-guide/design-and-structure/components/layouts/overlays/overlay-parameters.md) to the component and it will output it as Bar Code.

Let's make an example of displaying SKU as a bar code, referencing the sku from selected row on a table.

You will need:

1. A table with SKU
2. Bar code component

### A table with SKU

Any [table](/user-guide/design-and-structure/components/lists/table.md) that has SKU as one of the columns will do.

<figure><img src="/files/2onRknkYPv5r42EMFE5t" alt=""><figcaption><p>Table with products as an example</p></figcaption></figure>

### Bar Code and value formula

Add the QR Component anywhere on the page and click on *"Fx"* button to start typing in your formula. It should have this syntax:

<pre><code><strong>%component_to_reference%.selected_item.%value%
</strong></code></pre>

{% hint style="info" %}
In this example you won't have to type in formula at all, you can just click on the appropriate value from the side window
{% endhint %}

### Interactive guide with example

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


---

# 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.jetadmin.io/user-guide/design-and-structure/components/bar-code.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.