Add QR Code/Barcode Scanner in Clappia

This article explains the features of the Code Scanner (QR Code/Barcode Scanner) block and how it can be used to design your app.

Help Video

‍

Use Cases

1. Scanning QR Codes/Barcodes from any place and entering them into a form.
2. No-touch attendance systems.

Supported Code Formats

The Code Scanner block supports various formats of QR Codes and Barcodes. Below are the supported code formats:

• QR Code
• AZTEC
• CODE_39
• CODE_93
• CODE_128
• ITF
• EAN_13
• EAN_8
• PDF_417
• UPC_A
• UPC_E
• DATA_MATRIX

‍

Editing the Block

Click on the block and configure it by editing on the right panel.

‍

Label

The label is the name of the block that the end user sees in the app.

Example: Scan the Product ID

‍

Description

The description is the additional information provided to the end user which will be displayed below the input area.

Example: Hold the scanner properly to fit the frame

‍

This is how the Code Scanner block with the label and the description will look to the end user.

‍

Required

Enable this option if you want the user to compulsorily input the data. If enabled, the end user can submit if and only if the data is entered in this field.

‍

Advanced Options

Use this option to show the advanced options to configure the single line text block.

‍

Allow user to input manually

Enabling this option will allow the user to enter the QR Code or the barcode manually, without scanning. This becomes important when the codes are not scannable or distorted.

‍

Disable this option if you do not want the users to modify the codes that are scanned by the camera.

Open Camera Automatically

If this option is enabled, the Scanner will open automatically when the user opens the App. This is useful for apps where users will be creating submissions without interacting/touching the phone/tablet devices.

‍

‍Save Image of the Scanned Barcode or QR Code

In addition to capturing the scanned barcode or QR code value, the Code Scanner block can also save an image of the scanned barcode or QR code along with the submission.

To enable this, in Design App, click the Code Scanner block, and in the right panel, go to the Advanced tab. Enable Save captured image after successful scan.

Once enabled, an image of the scanned barcode or QR code is captured after a successful scan. After the submission is saved, you can view the captured image in the Submissions tab along with the submission details.

‍

Display this field if

Use this if you want to show or hide a field under certain conditions. It accepts the standard Clappia Formulae, similar to conditional sections.

1. You can type ‘@’ to get a list of all the variables in the app and select variables.
2. Using these variables you can write Excel-like formulae.

‍

‍

Example: When the user enters the employee name then the Scan field is displayed and will be accessible to use.

‍‍

Allow value to be changed after initial submission

This option is enabled by default. End users can edit the value entered in this field after creating a submission. Disable it if you do not want the end users to edit the submitted value.

‍

Pull details from other Clappia App

Enable this option to scan and pull data from another Clappia app (or the same) in the same workplace.

When a user scans a code, Clappia searches the selected source app for a matching submission. If a matching submission is found, the required data is automatically copied into the current app. This eliminates the need for users to enter the same data manually.

‍

Help Video

‍

‍

Data Source App

The master app from which you want to pull the data.

Selection Field

Select any one of the fields as a reference to pull data from the master app.

For example, if the QR code or barcode contains a Product ID, SKU, or Employee ID, select the corresponding field from the source app. When the scanned value matches a value in this field, Clappia retrieves the related submission and populates the configured Pulled Fields.

Pulled Fields

Select the fields from the master app that you need to pull into the present app.

How it Works:

When a code is successfully scanned, Clappia searches for a matching submission based on the scanned value. If a matching submission is found, the configured Pulled Fields are automatically populated with the corresponding values from that submission.

The values copied into the Pulled Fields are stored as part of the current submission. They are not linked to the original submission, so editing a Pulled Field does not change the data in the source app or source submission.

‍

Editing Pulled Fields

By default, Pulled Fields are read-only after they are populated. If you want to allow these fields to be updated later, you must enable editing for each Pulled Field individually.

To make a Pulled Field editable:

1. Click the required Pulled Field.
2. In the right panel, open the Advanced tab.
3. Enable Make this field editable.

After this option is enabled, the field can be edited manually when filling or editing a submission.

If you want to update Pulled Fields automatically, you can use the Edit Submission workflow. This workflow updates existing submissions based on the conditions you configure. For more information about setting up the Edit Submission workflow, click here.

Once a Pulled Field is marked as editable, it will also be available in the Edit Submission workflow. You can update each Pulled Field individually, just like any other editable field in the app. The Code Scanner field itself can also be updated through the Edit Submission workflow.

Pulled Fields from Copyable Sections

If the Pulled Fields selected from the source app are inside a Copyable Section, they will not be added to the same section as the Code Scanner block. When you save the Code Scanner block, these Pulled Fields are automatically created in a separate section.

How it Works:

Example: Suppose the source app has a section that can be copied up to 10 times.

It contains a submission with 2 copied section entries.

In the current app, you will initially see only a single set of Pulled Fields in the separate section.

When a user scans a code and it matches that submission, the separate section is automatically expanded to display the 2 copied section entries from the source submission.

‍

If you want the Pulled Fields to appear in the same section as the Code Scanner block, the fields in the source app must not be inside a Copyable Section. If possible, and if you do not have existing submissions that rely on the Copyable Section, you can disable the Copyable Section setting before configuring the Pulled Fields. Otherwise, we recommend keeping the existing structure to avoid affecting your current data.

‍

Allow users to see all records in the source app

By default, users can retrieve data only from submissions they have permission to access in the source app. Enable this option if you want users to search and retrieve data from all submissions in the source app, regardless of their access permissions.

Use this option only when users should be able to look up records across the entire source app.

‍

‍

Advanced Label

The Advanced Label option allows you to change the label of a field dynamically based on a condition you define. Instead of always showing the same fixed label under the ‘Basic’ tab, the field can display different labels depending on requirements of the form. Use spreadsheet-like functions such as IF, AND, OR, etc. and make use of other field variables to set your conditions. Type @ and select the field.

This is useful when the meaning of a field changes based on context, business logic, or user choices.

For example:
If you have a dropdown named Scan with options “Product Scan” and “Asset Scan”.
Depending on what the user is scanning, the label should reflect it.

So:
– For Product Scan, show “Scan Product Code”
– For Asset Scan, show “Scan Asset Code”

Formula:

This allows the same field to adapt its displayed purpose without needing multiple separate fields.

Advanced Description

The Advanced Description option works exactly like Advanced Label, but it changes the description text instead. This is useful when guidance or instructions for a field need to change depending on earlier answers.

For example, using the same scenario from Advanced Label:
If you have a dropdown called Scan with options like “Product Scan” and “Asset Scan”, you may want the description of your Code Scanner field to guide the user differently depending on what they selected.

So:
– If the user selects Product Scan, the description could say: “Scan the product barcode to auto-fill product details.”
– If the user selects Asset Scan, the description could say: “Scan the asset tag to fetch asset information from the system.”

Formula:

This helps users understand what is required from them without showing unnecessarily long or irrelevant instructions.

‍

Additional Examples (Apply to Both Advanced Label and Advanced Description)

1. Showing nothing until a selection is made

For example, if you have a dropdown field called Visit Category with options “Routine” and “Urgent”, you may want the label or description of a field to remain blank until the user first selects a category.

Once a selection is made:

• If the user chooses Routine, the field will display “Routine”.
• If the user chooses Urgent, the field will display “Urgent”.

Formula (can be used in either Advanced Label or Advanced Description):

The label/description stays empty until the dropdown has a selected value.
After the user picks an option, the selected text (Routine or Urgent) becomes the label or description.

2. Changing label/description based on language selection

For example, if your form includes a dropdown field called Select Language with options English, Spanish, and French, you can show the label or description in the selected language.

So:

• If the user selects English, show English text.
• If the user selects Spanish, show Spanish text.
• If the user selects French, show French text.

Formula (can be used in either Advanced Label or Advanced Description):

The formula returns the text for the selected language.
Only one label/description is shown at a time, depending on what the user picks in the Select Language dropdown.

‍

Important Notes (applies to both Advanced Label and Advanced Description)

1. Variables do not change
When a field is created, its variable name is derived from the label you set in the Basic tab. That variable name is what you must use in formulas, workflows, and other logic. The visible label or description shown by Advanced Label / Advanced Description does not change the variable name.

2. Submissions tab: table view vs right panel
In the Submissions area, the table view always displays the labels from the Basic tab. When you open an individual submission, the right panel shows the labels and descriptions as they appear in the form (i.e., the Advanced Label and Advanced Description applied for that submission). This keeps the submission list consistent while letting reviewers see the context-aware labels and descriptions when viewing a record.

3. Bulk Edit shows Basic tab labels and descriptions
When you need to Bulk Edit submissions, the spreadsheet you download shows the labels and descriptions from the Basic tab only. Advanced Label and Advanced Description are not applied in Bulk Edit, so keep that in mind when preparing bulk updates.

4. Some fields cannot be used inside Advanced Label/Description formulas
Certain block types do not expose a variable that can be referenced in Advanced Label or Advanced Description. If a block does not expose a variable, you cannot use it inside the formula.